Skip to main content
Figma / Developers

Getting Started

Quickstart

Build and run your first Figma plugin in under 5 minutes.

Get up and running with a Figma plugin. This guide walks you through creating a simple plugin that modifies selected elements.

Prerequisites

You need a Figma account (free or paid) and Node.js 18+ installed on your machine.

Create Your Plugin

1
Open the plugin creator
2
In Figma, go to Plugins > Development > New Plugin. Choose Figma design as the plugin type and select the With UI & browser APIs template.
3
Set up the project
4
Figma generates a project folder with the following structure:
5
my-plugin/
├── code.ts          # Plugin logic (runs in sandbox)
├── ui.html          # Plugin UI (runs in iframe)
├── manifest.json    # Plugin metadata
└── tsconfig.json    # TypeScript config
6
Install dependencies and start the TypeScript compiler:
7
cd my-plugin
npm install
npm run build
8
Write plugin logic
9
Replace the contents of code.ts:
10
code.ts
// Show the plugin UI
figma.showUI(__html__, { width: 300, height: 200 });

// Listen for messages from the UI
figma.ui.onmessage = (msg) => {
  if (msg.type === "create-shapes") {
    const nodes: SceneNode[] = [];

    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{ type: "SOLID", color: { r: 0.63, g: 0.35, b: 1 } }];
      rect.cornerRadius = 12;
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }

    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

  figma.closePlugin();
};
code.js
// Show the plugin UI
figma.showUI(__html__, { width: 300, height: 200 });

// Listen for messages from the UI
figma.ui.onmessage = (msg) => {
  if (msg.type === "create-shapes") {
    const nodes = [];

    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{ type: "SOLID", color: { r: 0.63, g: 0.35, b: 1 } }];
      rect.cornerRadius = 12;
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }

    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

  figma.closePlugin();
};
11
Create the UI
12
Replace ui.html:
13
<h2>Shape Creator</h2>
<p>How many rectangles?</p>
<input id="count" type="number" value="3" min="1" max="20">
<button id="create">Create</button>

<script>
  document.getElementById('create').onclick = () => {
    const count = parseInt(document.getElementById('count').value, 10);
    parent.postMessage({ pluginMessage: { type: 'create-shapes', count } }, '*');
  };
</script>
14
Run the plugin
15
Back in Figma, go to Plugins > Development > my-plugin. The UI appears, and clicking "Create" generates purple rectangles on the canvas.

What’s Next?

Plugin Setup Guide

Learn about manifest configuration, bundling, and publishing.

Plugin UI Guide

Build polished plugin interfaces with Figma's design system.

Plugins run in a sandboxed environment. You cannot access the DOM, window, or make network requests directly from code.ts. Use figma.ui.postMessage() to communicate between the sandbox and the UI iframe.