Communicate between the plugin and Figma
In this video, you will learn how to send and receive data from Figma to use it in your plugin
Instructor: [0:00] Here I have a simple Figma plugin. It has two files, the code.ts and the UI of our plugin. To run this, we need to press Command-Shift B, and hit Watch. We go back to Figma and go to Plugins, Development, and My plugin. This is the name of the plugin.
[0:26] You can see here it's an empty UI. Let's try and capture this selection in Figma and send that to our plugin. First, let's go back to the code section. Then, here we can do, const selection = figma.currentPage.selection. Then, here we will take the first element.
[0:54] Let's console-log this. If you go back here, select this, and go to plugins, development my plugin. If we open up the developer tool, you can see here, we're console logging this text node which is the first element selected.
[1:23] What we want to do is get the characters and send it to our plugin. Let's go back to the code. Let's remove the console log. Here, we will call figma.ui.postMessage. Here, we can send in an object. We will send the selection to our plugin.
[1:44] To receive that, we need to go to the UI HTML. Inside of the script tag, we will listen to the on-message callback. Here, we'll capture the event. For now, let's console-log our event.data.
[2:00] Let's go back to Figma, close the plugin, select the text, and run the plugin again. You can see here, Figma sent something to our plugin. Here, we're interested only on the text. Let's change that. Instead of the whole selection, we can send selection.characters.
[2:39] If we go back again, you can see here, the plugin message has selection and it has egghead in it. Let's display that in the plugin. In the UI, in here, let's add a paragraph and type your selection as, and then here we can have a span, of ID count. Here we can add characters.
[3:23] Instead of the console.log in here, we can do document.getElementById, and the ID is count. We set the inner HTML event.data.pluginMessage.selection.length. Let's go back to the plugin, make sure the text is selected, go to the menu of Plugin Development and My Plugin. You can see here your selection has seven characters.
[4:00] Let's send back some message now from the plugin to Figma. To do that, let's first add a button, give it an ID of close, and then here type close. Let's go to our script. In here, we can do document.getElementById. This will be closed on click. In here, we will call parent.postMessage. Then, in here, we can do pluginMessage, type close and *.
[4:41] That's the UI part. Let's go back to Figma. Let's go here and do figma.ui.onmessage. It will receive an event. If the event is of type close, we will close the plugin. Here we can call figma.closePlugin and hit save.
[5:02] Let's test this in Figma. Here we select the text, we run the plugin, and then we close the plugin. Figma received that message and closed the plugin.