Let's discuss how plugins run inside Figma.
In order for the plugin system to be secure and stable, some browser APIs are unavailable or need to be accessed differently. We won't bore you with too many details, but it's important to understand our model to answer questions like:
- How do I access the contents of a Figma file?
- How do I create a user interface for my plugin?
- How do I make network requests?
To use browser APIs (e.g. to show UI or to access the network), you will need to create an
<iframe> with a
<script> tag inside. This can be done with
figma.showUI(). Inside of this
The main thread can access the Figma "scene" (i.e. the hierarchy of layers that make up a Figma document) but not the browser APIs. Conversely, the iframe can access the browser APIs but not the Figma "scene." The main thread and the iframe can communicate with each other through message passing.
When the plugin is finished with its work, it must call
figma.closePlugin() to tell Figma that it is finished. Otherwise the user will just see "Running [your plugin]" forever.
Note that the user can cancel the plugin at any point by using the UI that Figma displays while the plugin is running. When this happens, Figma will itself call
console.log(this)as the first line of your plugin.