This short guide will walk you through the steps needed to setup your development environment for writing and running a simple plugin inside of Figma. By the end of this guide, you will have a plugin that opens a modal, asks the user for a number, and creates that many rectangles on the canvas.
Install Visual Studio Code
Visual Studio Code can be downloaded here: https://code.visualstudio.com/.
This lets you use TypeScript, which we think makes developing good plugins much easier.
Install Node.js and NPM
You can download Node.js here, which will include NPM: https://nodejs.org/en/download/.
To install TypeScript, run
sudo npm install -g typescript in a terminal. (This isn't installed by Visual Studio Code).
Get the Figma desktop app
At this time, plugin development and testing needs to be done using the Figma desktop app. This is because Figma needs to read your code saved as a local file. The Figma desktop app can be downloaded here: https://www.figma.com/downloads/.
If you already have the desktop app, please make sure to update to the latest version, as several features have been added specifically in order to provide a better plugin development experience.
Log in to your account and open the file editor in the Figma desktop app
You can open any existing document or create a new one.
Go to Menu > Plugins > Development > New Plugin...
This will bring up the "Create a plugin" modal to create a sample plugin. Give it a name, then choose "With UI & browser APIs" in the next screen. Save the plugin anywhere on disk.
Open the code folder
Open the folder you just created using Visual Studio Code. Plugins are defined using multiple files and you'll want to be able to edit them all of them, so one trick is to open the folder itself rather than any of the files inside it.
Install the typings
npm install --save-dev @figma/plugin-typings.
Set up TypeScript compilation
Hit ⌘⇧B (Ctrl-Shift-B for Windows) in Visual Studio Code, then select
tsc: watch - tsconfig.json. This tells Visual Studio Code to compile
code.js. It will watch for changes to
code.ts and automatically re-generate
code.js every time
code.ts is saved.
Run the sample plugin
Create a new design file in the Figma editor. Go to Menu > Plugins > Development > YourPluginName to run your newly created plugin. The sample code will show a UI allowing you to choose a number, and then creates that many rectangles.
Make some test changes
Make some simple changes to
code.ts to get familiar with Visual Studio Code and the Figma Plugin API (not code.js — that's generated and gets overwritten!).
Run your new code!
Switch back to the Figma Desktop App and go to Menu > Plugins > "Run Last Plugin" (Or hit ⌥⌘P for Mac or Ctrl+Alt+P for Windows). This will rerun the last plugin that you ran, i.e. your plugin.
That’s it! You are now ready to develop plugins in Figma!