Plugin Quickstart Guide

This QuickStart guide takes you through the setup of our recommended development environment: using TypeScript in Visual Studio Code. You don’t have to use this combination. You can write directly in JavaScript—or any language that translates to JavaScript—and use your preferred text editor.

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 of a Figma design file. If you’re new to Figma plugin development, make sure to read through our plugin concepts. They cover information, such as required knowledge, how plugins run, and what you can do with plugins.

Download tools

Before we begin, you need to install the following tools:

• The Figma desktop app: Plugin development and testing requires the Figma desktop app. Figma will need to read your plugin code saved as a local file. You can download it from the Figma downloads page. If you already have the desktop app installed, make sure you’re running the latest version.
• Visual Studio Code: This is the development environment you’ll be using for the QuickStart guide.

Create a new plugin

1. Log into the desktop app and create a new design file.
2. From the menu, navigate to Plugins > Development, then select New plugin.
3. From the Create a plugin modal, select Figma design and give your plugin a name.

4. Select Custom UI
5. Click Save as to save it anywhere on your disk.

Open the plugin code folder

1. Launch Visual Studio Code.
2. Go to File > Open Folder and then select the folder you saved when you created a new plugin.
3. If you see a verification modal, check the box and click Yes, I trust the authors to proceed.

Install project dependencies

When you first open the project in Visual Studio Code, you may notice a few errors highlighted in our files. To fix this, we’ll need to install some project dependencies.

Node.js and npm

Node provides a way to run JavaScript outside of the browser and npm is the default package manager for Node.

Npm is both a command-line tool and an online repository of open source Node.js projects. Instead of manually including dependencies in our project, npm makes it easy to install these dependencies using scripts.

When you download Node from the Nodejs.org website, your download also includes npm.

1. Select the installer to start the Node.js Setup Wizard.
2. When the installer asks about tools for native modules, check Automatically install the necessary tools and select Next.
3. Select Install.
4. After the install is complete, select Finish.

info

You can check that Node.js was successfully installed in Visual Studio Code.

In Visual Studio Code, select Terminal > New terminal. Type node into the terminal and press enter.

The terminal should return the version of Node.js you installed. If you’re not seeing this message, restart Visual Studio and run the command again.

Hit Ctrl-C twice to exit Node.

TypeScript

We recommend using TypeScript for developing Figma plugins. We provide a typings file with type annotations for the entire Plugin API.

When you install the typings for the Plugin API, Visual Studio Code provides you with suggestions as you code.

This helps to reduce errors and catch edge cases. You can only use the typings file with TypeScript.

If you take a look at the file named package.json, under devDependencies you’ll notice that we’ve already included TypeScript and the Figma typings file.

Npm allows us to install all dependencies from package.json using a single command.

1. Open the terminal in Visual Studio Code. You can toggle the terminal view under View > Terminal. If you want to start with a new terminal, go to Terminal > New terminal.
2. In the terminal type npm install and press Enter.

If the dependencies were installed, there should be no errors highlighted in our files. You’ll also notice a new dropdown in the Explorer named node_modules.

A new dropdown directory will be available under Explorer. If you expand this, you’ll see a few starter files already exist in our project.

info

You can check that TypeScript was successfully installed in Visual Studio Code.

In Visual Studio Code, select Terminal > New terminal. Type tsc -v into the terminal and press enter.

The terminal should return the version of TypeScript you installed. If you’re not seeing this message, restart Visual Studio and run the command again.

Set up TypeScript compilation

With your dependencies installed, all that's left for us to do is to make sure that TypeScript compiles to JavaScript in order for the plugin to run.

Since Figma plugins run in the browser, and browsers only support JavaScript, the main field in our manifest will always point to a JavaScript file.

Compilation is the process responsible for making sure that our TypeScript gets turned into usable JavaScript that allows our plugin to run.

To setup your project to watch for changes then automatically compile:

1. Hit Ctrl-Shift-B in Windows, or Command-Shift-B for Mac.
2. Select watch-tsconfig.json

info

You’ll need to run this command each time you close the project folder or relaunch Visual Studio Code.

Run the sample plugin

1. Open up the design file you created in the Figma desktop app.
2. Navigate to Plugins > Development, then select the name of your plugin.
3. When the plugin modal pops up, click Create to run the plugin.

You should see five orange rectangles in the canvas.

Your set up is now complete! Ready to start coding your first plugin? Check out the fourth video in our Build Your First Plugin video series.

Hot reloading

Figma provides the option to hot reload your plugin to speed up the development process. As you edit the plugin code and rebuild, the plugin will automatically restart with the latest changes. If turned off, you will need to manually restart the plugin.