Name: Change the text value of a select node
Uploaded: 2020-01-25T13:30:27-06:00
Description: In this video, you will learn how, in your plugin, to change the text value of a selected text node in Figma

Bootstrap a Figma Plugin

Communicate between the plugin and Figma 

Publish a Figma Plugin

Change the text value of a select node

Create a Figma Plugin Using Typescript

In this video, you will learn how, in your plugin, to change the text value of a selected text node in Figma 

https://app.egghead.io/api/v1/lessons/javascript-change-the-text-value-of-a-select-node/subtitles

Instructor: [0:00] First, let's add the text input and a button. Let's go ahead and listen to the onclick event on our new button. Now let's get the text value from our input. We will query the document for that. Now we need to send the message to Figma.

[0:28] Let's go ahead and copy this code here. Let's change the type to request. Set text. This is just by convention. You can name the message however you want. We need to send the text in here. Now let's go back to the code part and capture this message.

[1:04] We get the current selection. If the selection is not null, we save the characters to the event.text. We make sure to return here. Now this is set, let's go back to Figma. Plugins, development, my plugin. Let's select the text and type "Hello" and click Set text.

[1:27] Whoa. This is actually not doing anything because we're missing an important step here, which is telling Figma to load that font before applying the text for the note. Let's go back to our code. Before setting the text here, let's call Figma loadFontAsync.

[1:51] We make sure that our function here is async because we need to await this one. This will make sure to load the font that's used by the selection. Let's hit Save and go back to Figma. Now go to the plugins, development, my plugin. Select the text and type, for example, my name. You can see here we're able to change the text.

Change the text value of a select node

Share this video with your friends

Course

Create a Figma Plugin Using Typescript