figma-plugin

Figma Plugin Platform

Build Figma plugins that extend the design tool. TypeScript + Figma Plugin API.

Project Structure

Explain to the designer as:

"Your plugin has two parts: the brain (logic) and the face (UI panel)."

src/
  code.ts                 ← Plugin logic (talks to Figma canvas)
  ui.html                 ← Plugin panel (what the user sees)
  ui.ts                   ← Panel interactivity (optional, for complex UIs)
manifest.json             ← Plugin name, permissions, entry points
tsconfig.json             ← TypeScript settings
package.json              ← Dependencies
figma.d.ts                ← Type definitions for Figma API (auto-generated)

Scaffolding

No CLI tool — scaffold manually:

mkdir my-plugin && cd my-plugin
npm init -y
npm install -D typescript @figma/plugin-typings

Create manifest.json:

{
  "name": "My Plugin",
  "id": "000000000000000000",
  "api": "1.0.0",
  "main": "dist/code.js",
  "ui": "src/ui.html",
  "editorType": ["figma"]
}

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "typeRoots": ["./node_modules/@figma/plugin-typings"]
  },
  "include": ["src/**/*.ts"]
}

Add build script to package.json:

"scripts": {
  "build": "tsc",
  "watch": "tsc --watch"
}

Key Conventions

Two Worlds: Code vs UI

The plugin has two separate environments that talk to each other:

	Code (code.ts)	UI (ui.html)
Runs in	Figma's sandbox	An iframe
Can access	Figma canvas, nodes, styles	HTML, CSS, DOM
Can't access	DOM, window, fetch	Figma nodes directly
Communicates via	figma.ui.postMessage()	parent.postMessage()

"Think of it like two rooms with a mail slot. The brain room can see and change your design. The face room shows buttons and inputs. They pass notes back and forth."

Talking to the Canvas

// code.ts

// Read the current selection
const selection = figma.currentPage.selection

// Create a rectangle
const rect = figma.createRectangle()
rect.resize(200, 100)
rect.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.4, b: 1 } }]

// Create text
const text = figma.createText()
await figma.loadFontAsync({ family: "Inter", style: "Regular" })
text.characters = "Hello from the plugin!"

// Read node properties
const node = figma.currentPage.selection[0]
if (node.type === 'TEXT') {
  console.log(node.characters) // the text content
}