How do I set up development environment?

# Step 1: Install Essential Tools 1. Download and install the latest **Figma desktop app** from [figma.com/downloads](https://www.figma.com/downloads/). 2. Install **Visual Studio Code (VS Code)** from [code.visualstudio.com](https://code.visualstudio.com/). 3. Download and install **Node.js** (LTS version) from [nodejs.org](https://nodejs.org/). During installation, check 'Automatically install the necessary tools'. Verify setup: - Open VS Code, create new terminal (`Ctrl+`` ` or `View > Terminal`). - Run `node -v` to confirm Node.js version. - Run `npm -v` to confirm npm. This establishes a robust workspace for plugin building.

How do I create and run your first plugin?

# Step 2: Generate Basic Plugin 1. In Figma desktop, create a new design file. 2. Go to **Plugins > Development > New Plugin**. 3. Select **Figma design**, name it 'MyFirstPlugin', choose **Custom UI**, click **Save as** to disk. 4. Open the saved folder in VS Code (**File > Open Folder**). 5. In VS Code terminal, run `npm install` to add TypeScript and typings. 6. Press `Ctrl+Shift+B` (Win) / `Cmd+Shift+B` (Mac), select **watch-tsconfig.json** to compile. 7. In Figma, **Plugins > Development > MyFirstPlugin**, click **Create**. Expected: 5 orange rectangles appear on canvas.

How do I master plugin structure and manifest?

# Step 3: Explore Core Files Open these files in VS Code: **manifest.json** (required fields): ```json { "name": "MyFirstPlugin", "id": "auto-generated-id", "api": "1.0.0", "main": "code.js", "editorType": ["figma"], "documentAccess": "dynamic-page" } ``` **code.ts**: Entry point, e.g., `figma.showUI(__html__);` and `figma.closePlugin();` **ui.html**: Custom UI (optional). **tsconfig.json**, **package.json**: Build config. Edit `code.ts` to log `console.log(figma.currentPage);`, re-run plugin. Check Figma console (right-click canvas > Show DevTools).

How do I build interactive ui and api basics?

# Step 4: Add UI and Node Manipulation 1. Edit **ui.html** to add ` Create Rectangle ` and script: ```javascript postMessage({pluginMessage: {type: 'create-rect'}}); ``` 2. In **code.ts**: ```typescript figma.showUI(__html__); figma.ui.onmessage = msg => { if (msg.type === 'create-rect') { const rect = figma.createRectangle(); rect.x = 100; rect.fills = [{type: 'SOLID', color: {r:1,g:0,b:0}}]; figma.currentPage.appendChild(rect); figma.closePlugin(); } }; ``` 3. Compile, run, click button. Explore API: Use `figma.root`, `figma.currentPage.children`, `figma.createText()`. Load fonts with `await figma.loadFontAsync({family: 'Roboto', style: 'Regular'});`.

How do I clone samples and publish plugin?

# Step 5: Advance with Samples and Share 1. Clone [github.com/figma/plugin-samples](https://github.com/figma/plugin-samples). 2. Pick 'create-rects-shapes': `cd create-rects-shapes`, `npm install`, `tsc`, import via **Plugins > Development > Import plugin from manifest**. 3. Study `code.ts`: Node creation, grouping. 4. Fork a sample, customize (e.g., add colors), test. 5. Publish: **Plugins > Development > Export as dev plugin** or submit to Community via [figma.com/community](https://www.figma.com/community). Join Discord: discord.gg/xzQhe2Vcvx for feedback.

Master Figma Plugin Development in 5 Steps

🧰

Instant Toolkit

2 artifacts

📋
Step-by-Step Guide

1

Step 1: Install Essential Tools

Download and install the latest Figma desktop app from figma.com/downloads.
Install Visual Studio Code (VS Code) from code.visualstudio.com.
Download and install Node.js (LTS version) from nodejs.org. During installation, check 'Automatically install the necessary tools'.

Verify setup:

Open VS Code, create new terminal (Ctrl+`` or View > Terminal).
Run node -v to confirm Node.js version.
Run npm -v to confirm npm.

This establishes a robust workspace for plugin building.

Why this step matters:

-Provides the foundation for coding, compiling, and testing plugins efficiently
-Enables hot-reloading and debugging for faster iteration in real projects

30-60 minutes

Figma Desktop App, Visual Studio Code, Node.js

$0

Definition of Done

•Node.js and npm verified in VS Code terminal
•Figma desktop app launched and logged in

Common Mistakes to Avoid

❌ Using Figma web app instead of desktop

→Always use desktop app for Plugins > Development menu

❌ Skipping Node.js verification

→Run `node -v` and `npm -v` before proceeding

2

Following along, or just reading? 👀

Spin up a personalized “learn Figma plugins” plan you can save, check off, and return to anytime — unlimited on the free trial.

Start free trial →

3

4

5

🎥
Suggested Videos

Build your first plugin: Overview (Official)

Create Your First Figma Plugin (Free Course)

📚
Learning Resources

📖 Online Courses

Build your first plugin

beginner

Figma Learn

🌐 Helpful Websites

Figma Plugin Developer Docs

documentation

Official guide with API reference and concepts

Figma Plugin Samples

documentation

Official sample plugins to study and modify

🛠️ Useful Tools

Figma Desktop

Design Editor

Editor for running and developing plugins

Visual Studio Code

IDE

IDE with TypeScript support and hot-reload

Node.js

Runtime

Runtime for npm dependencies and TypeScript

Master Figma Plugin Development in 5 Steps