Creating a User Interface

The figma.showUI() function shows a plugin's user interface. The easiest way to use this function is to do the following:

  1. Create a HTML file containing the markup for your UI.
  2. Change manifest.json to contain "ui": "ui.html" where "ui.html" is the filename of your HTML file.
  3. Put the following call in your plugin code:
figma.showUI(__html__)

This will display the contents of your HTML file in an <iframe> inside of Figma.

After you've called figma.showUI(), you will likely want to send messages between the UI and the plugin code. For example, you might send information about the current document from the plugin code to be displayed in your plugin's user interface. Or you might send user input to the plugin code before performing some action.

Sending a message from the UI to the plugin code

To send a message from the UI to the plugin code, write the following in your HTML:

<script>
...
parent.postMessage({ pluginMessage: 'anything here' }, '*')
...
</script>

To receive the message in the plugin code, write:

figma.ui.onmessage = (message) => {
  console.log("got this from the UI", message)
}

Sending a message from the plugin code to the UI

To send a message from the plugin code to the UI, write:

figma.ui.postMessage(42)

To receive that message in the UI, write the following in your HTML:

<script>
...
onmessage = (event) => {
  console.log("got this from the plugin code", event.data.pluginMessage)
}
...
</script>

Note: the syntax for sending and receiving messages in the UI and the syntax for doing the same in the plugin code are subtly different. In the plugin code, you directly send and receive the values that you want to send. However, inside in the UI, you must send values on a pluginMessage property. Likewise, received data will appear on a pluginMessage property. When calling postMessage in the UI, you must also specify a second argument with the value '*'.

You can send almost any structured data in either direction, including objects, arrays, numbers, strings, booleans, null, undefined, Date objects and Uint8Array objects. However, keep in mind that this is similar to sending a serialized JSON representation of the object. Methods of the object (or in general, the prototype chain of sent objects) will not be recovered.

You can start sending messages from the plugin code to the UI as soon as figma.showUI() has been called. The messages will automatically be queued until the <iframe> containing the UI finishes loading.

Note: currently, you cannot send Blob objects, ArrayBuffers or TypedArray objects other than Uint8Array.

← Plugin ManifestMaking Network Requests →