Skip to main content

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.

Create plugin modal with “my-first-plugin” in the name field and the Figma design template selected

  1. Select Custom UI
  2. 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.

“MY FIRST PLUGIN” folder open in the Visual Studio Code explorer

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.

The contents of the “code.ts” file for a sample plugin in Visual Studio Code

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 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.

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.

Developer terminal with the user typing node and pressing enter


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.

Developer typing figma.create in Visual Studio Code and typescript suggesting possible options

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.

Package.json file open in Visual Studio Code

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.


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.

Illustration that shows the code.ts being compiled before being sent to Figma as a plugin

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

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.

An animation of a plugin functioning in the Figma interface. The plugin window says "Rectangle creator" and shows a cursor entering the number "5" into a text input then hitting a "create" button which shows five rectangles being drawn on the Figma 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.

Hot reloading setting