- Open Figma Desktop app
- Open any file
- Right-click on the canvas
- Select Development > Import plugin from manifest
- Navigate to the plugin folder
- Select manifest.json
- Vue
- Typescript
- figma-plugin-ds integration
- Message handler helper functions to simplify communication between the main code and the UI code
- Install dependencies with
npm i
. - Run
npm run dev
and a folder nameddist
will be created. - In the Figma desktop app, click on Create new plugin / Link existing plugin and point it to the
manifest.json
in this project. - Now you can edit the main Figma code from
src/code.ts
and the UI code fromsrc/ui.vue
. Hitting save will auto-reload the build so you can see your changes right away. - When you're ready to publish the plugin, run
npm run build
to create a production build.
To communicate between the main code and the UI code, you can use the dispatch
and handleEvent
functions to send and listen to messages between the two environments.
Sending a message from the main code to UI code:
dispatch('eventName', data)
Handling messages from the UI code to the main code:
handleEvent('eventName', data => {
// Do something with the data
})
Note that data is optional so you could simply send a message by dispatch('eventName')
.
In the vue UI code, dispatch
can be called anywhere, but handleEvent
functions should be called in mounted()
so they would only be called first and only once.
This project template shows an example of a UI button sending a message to the main code to create a rectangle node. The main code then sends back the created node ID to be displayed in the UI.