1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Change the text value of a select node

    Khaled GarbayaKhaled Garbaya
    javascriptJavaScript
    figmaFigma
    typescriptTypeScript

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.