Figma

Batch Files

Connect many Figma components to code using a single shared template, ideal for large libraries with consistent patterns (e.g., icon sets).

Signature / Usage

Template file (icons.figma.batch.ts):

import figma from 'figma'

const size = instance.getEnum('Size', {
  Small: '16px',
  Medium: '24px',
  Large: '32px',
})

export default {
  example: figma.code`<${figma.batch.name} size={${size}} />`,
  imports: [`import ${figma.batch.name} from "${figma.batch.importPath}"`],
  id: figma.batch.id,
}

JSON file (icons.figma.batch.json):

{
  "templateFile": "./icons.figma.batch.ts",
  "components": [
    {
      "url": "https://www.figma.com/design/ABC/File?node-id=1-1",
      "name": "Icon24Arrow",
      "id": "icon-arrow",
      "importPath": "@company/icons/arrow"
    }
  ]
}

Options / Props

figma.batch object fields

JSON file structure

Single template (shorthand):

{
  "templateFile": "./template.figma.batch.ts",
  "components": [ { "url": "...", ... } ]
}

Multiple templates:

[
  { "templateFile": "./icons.figma.batch.ts", "components": [...] },
  { "templateFile": "./buttons.figma.batch.ts", "components": [...] }
]

Notes

• Batch template files do not include metadata comments (// url=, // source=, // component=) at the top — this data comes from the JSON file instead
• .figma.batch.json files are discovered automatically via existing include/exclude globs (default globs already cover **/*.figma.batch.json)
• Each component entry in the JSON publishes as an independent Code Connect document
• Publish with the standard npx figma connect publish command

Related

• Template Files
• Template API
• CLI Reference

CI/CD Integration

Automate Code Connect publishing in CI/CD pipelines so that component connections stay up to date when code changes are merged.

Signature / Usage

Example GitHub Actions workflow:

name: Publish Code Connect

on:
  push:
    branches: [main]
    paths:
      - 'src/components/**/*.figma.tsx'

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx figma connect publish --exit-on-unreadable-files
        env:
          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}

Notes

• Store the Figma personal access token in CI secrets as FIGMA_ACCESS_TOKEN (must have Code Connect Write and File content Read scopes)
• Use --exit-on-unreadable-files to fail the pipeline on configuration errors
• Restrict the workflow trigger to paths matching your Code Connect files to avoid running on every PR
• Establish local component connections first before setting up CI/CD automation

Related

• CLI Reference
• CLI Quickstart
• Config File

CLI Reference

Complete reference for the figma connect command and all its subcommands.

Signature / Usage

npx figma connect <command> [options]

Options / Props

Global flags

---

figma connect publish

Scan for Code Connect files and publish them to Figma.

npx figma connect publish [options]

---

figma connect unpublish

Remove published Code Connect connections from Figma.

npx figma connect unpublish [options]

Omitting --node unpublishes all components in the directory.

---

figma connect parse

Parse Code Connect files and output them as JSON (without publishing).

npx figma connect parse [options]

---

figma connect create

Generate a boilerplate Code Connect template file for a Figma component.

npx figma connect create <figma-node-url> [options]

---

figma connect preview

Preview how Code Connect snippets will render in the Inspect panel.

npx figma connect preview [dir/file] [options]

---

figma connect migrate

Convert existing Code Connect files to template format.

npx figma connect migrate [options]

Notes

• Set FIGMA_ACCESS_TOKEN as an environment variable to avoid passing --token on every command
• Use --exit-on-unreadable-files in CI/CD pipelines to catch configuration errors early

Related

• CLI Quickstart
• Config File
• CI/CD Integration

Comparing Code Connect UI and CLI

Side-by-side comparison of the two Code Connect approaches to help teams choose the right tool.

Signature / Usage

Use the CLI when your team needs precise prop mapping and design-system snippets in Inspect:

# install, configure figma.config.ts, then publish
npx figma connect publish

Use the UI (Dev Mode) when no local setup is desired or when mapping spans multiple frameworks simultaneously — open a component in Dev Mode and follow the guided connection flow.

Options / Props

Notes

• CLI-created connections appear in the UI but remain editable only via CLI
• UI scales better across organizations where non-developers participate in component mapping
• Both tools complement each other and both enhance Figma MCP server context

Related

• CLI Quickstart
• UI Setup
• Overview

Connecting Jetpack Compose Components

Connect Jetpack Compose components to Figma using Code Connect annotations and the Gradle plugin.

Signature / Usage

@FigmaConnect(url = "https://www.figma.com/file/...")
class ButtonDoc {
    @FigmaProperty(FigmaType.Text, "Label")
    val label = "Click me"

    @FigmaProperty(FigmaType.Boolean, "Disabled")
    val disabled = false

    @FigmaProperty(FigmaType.Enum, "Type")
    val type: ButtonType = Figma.mapping(
        "Primary" to ButtonType.Primary,
        "Secondary" to ButtonType.Secondary
    )

    @Composable
    fun Component() {
        Button(label = label, disabled = disabled, type = type)
    }
}

Options / Props

Gradle setup (required)

Add to build.gradle.kts:

Core annotations

FigmaType values

Figma.mapping() helper

Creates property-to-code mappings for enums, booleans, and custom transformations:

// Enum mapping
val type: ButtonType = Figma.mapping(
    "Primary" to ButtonType.Primary,
    "Secondary" to ButtonType.Secondary
)

// Boolean-to-component mapping
@FigmaProperty(FigmaType.Boolean, "Has Icon")
val icon: @Composable () -> Unit = Figma.mapping(
    true to { Icon(Icons.Default.Star) },
    false to { }
)

Variant-specific connections

@FigmaConnect(url = "https://...")
@FigmaVariant("Type", "Primary")
class PrimaryButtonDoc {
    @Composable
    fun Component() { PrimaryButton() }
}

Notes

• @FigmaChildren accepts one or more layer names as arguments
• Ensure the Kotlin and plugin versions match the requirements listed above — mismatches cause build failures

Related

• Config File
• CLI Reference
• Comparing CLI and UI

figma.config.json

Project-level configuration file placed at the repository root that controls how Code Connect discovers, parses, and publishes component files.

Signature / Usage

{
  "codeConnect": {
    "include": ["**/*.figma.ts"],
    "exclude": ["test/**", "build/**"],
    "parser": "react",
    "label": "React",
    "language": "jsx"
  }
}

Options / Props

Common fields

Supported language values: jsx, tsx, typescript, javascript, swift, kotlin, html, css, json, graphql, python, go, rust, bash, sql, xml, dart, cpp, ruby, plaintext

React-specific fields

SwiftUI-specific fields

Custom parser fields

Notes

• Auto-detection checks package.json for React/HTML projects and Package.swift / *.xcodeproj for Swift projects
• documentUrlSubstitutions is particularly useful in monorepos or when maintaining multiple Figma files without editing every Code Connect file

Related

• CLI Quickstart
• CLI Reference
• Template Files
• Custom Parsers

Custom Parsers

Enable Code Connect support for languages not natively supported by implementing a custom parser. Currently in preview.

Signature / Usage

{
  "codeConnect": {
    "parser": "custom",
    "parserCommand": "node ../parserDirectory/parser.js",
    "include": ["**/*.figma.test"],
    "exclude": []
  }
}

Options / Props

figma.config.json fields for custom parsers

Input payloads

`ParseRequestPayload` (sent during publish / parse):

`CreateRequestPayload` (sent during create):

Output payloads

`ParseResponsePayload` (returned via stdout during publish / parse):

`CreateResponsePayload` (returned via stdout during create):

Notes

• The API is still evolving — provide feedback via GitHub issues
• The parser command is invoked with file paths from the include globs; it must write its ParseResponsePayload to stdout
• Uses the Template API for generating Code Connect documents

Related

• Template API
• Config File
• CLI Reference

Connecting Web Components (HTML)

Connect HTML-based components — Web Components, Angular, Vue, or any HTML framework — to Figma using figma.connect() with the html tagged template literal.

Signature / Usage

import figma, { html } from '@figma/code-connect/html'

figma.connect('https://www.figma.com/file/...', {
  props: {
    label: figma.string('Label'),
    disabled: figma.boolean('Disabled'),
    type: figma.enum('Type', { Primary: 'primary', Secondary: 'secondary' }),
  },
  example: ({ label, disabled, type }) =>
    html`<ds-button type="${type}" ?disabled="${disabled}">${label}</ds-button>`,
})

Options / Props

Prop helpers

Variant restrictions

figma.connect('https://...', {
  variant: { Type: 'Primary' },
  example: () => html`<ds-button-primary></ds-button-primary>`,
})

figma.connect('https://...', {
  variant: { Type: 'Danger', Disabled: true },
  example: () => html`<ds-button-danger></ds-button-danger>`,
})

Notes

• Code Connect files are not executed — the CLI treats code snippets as strings
• Any JavaScript/TypeScript logic accompanying HTML must be enclosed in a <script> tag within the template
• The same prop helpers are available for Angular, Vue, and other HTML-based frameworks; adjust the html template syntax accordingly

Related

• React Integration
• Config File
• CLI Reference

Code Connect Overview

Bridges your codebase to Figma's Dev Mode by connecting design components to production code, enabling true-to-production code snippets instead of autogenerated examples.

Signature / Usage

Two implementation approaches:

• Code Connect CLI — command-line tool using template files; supports any codebase regardless of framework or language
• Code Connect UI — browser-based interface within Figma with GitHub integration; supports one-to-many connections across frameworks

Options / Props

Notes

• Requires a Dev or Full seat in Figma on an Organization or Enterprise plan
• CLI-created connections appear in the UI but remain editable only via CLI
• Both tools complement each other and enhance the Figma MCP server for AI-guided workflows
• Personal access token must have Code Connect scope set to Write and File content scope set to Read

Related

• CLI Quickstart
• UI Setup
• Comparing CLI and UI

Getting Started with Code Connect CLI

Install the CLI, configure your project, write template or framework-specific files, and publish connections to Figma.

Signature / Usage

# Install globally
npm install --global @figma/code-connect@latest

# Publish all Code Connect files
npx figma connect publish --token=<PERSONAL_ACCESS_TOKEN>

# Or set token via environment variable
export FIGMA_ACCESS_TOKEN=<token>
npx figma connect publish

Options / Props

Requirements

Project configuration (figma.config.json)

{
  "codeConnect": {
    "include": ["**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}

TypeScript type definitions (tsconfig.json)

{
  "compilerOptions": {
    "types": ["@figma/code-connect/figma-types"]
  }
}

Notes

• Adjust label and language in figma.config.json to match your framework (e.g., "Swift" / "swift" for SwiftUI)
• Template files use the .figma.ts (or .figma.js) extension by convention
• Each file requires a metadata comment // url=https://www.figma.com/... pointing to the Figma component node

Related

• Config File Reference
• CLI Reference
• React Integration
• Template Files

Connecting React Components

Connect React components to Figma using figma.connect() with built-in prop helpers for mapping design properties to code.

Signature / Usage

import figma from '@figma/code-connect'

figma.connect(Button, 'https://www.figma.com/file/...', {
  props: {
    label: figma.string('Label'),
    disabled: figma.boolean('Disabled'),
    variant: figma.enum('Type', { Primary: 'primary', Secondary: 'secondary' }),
  },
  example: ({ label, disabled, variant }) => (
    <Button disabled={disabled} variant={variant}>{label}</Button>
  ),
})

Options / Props

figma.connect() signatures

// Connect a React component (infers import location)
figma.connect(ComponentRef, figmaNodeUrl, options)

// Connect without a component reference (native HTML element)
figma.connect(figmaNodeUrl, options)

Prop helpers

figma.instance() chainable methods

figma.connect() options

Notes

• The first argument to figma.connect() determines the import statement generated in Dev Mode
• figma.children() supports wildcard matching: 'Icon*' matches all layers starting with "Icon", '*' matches all children
• Code Connect files are not executed at runtime — they are treated as strings by the CLI
• Multiple figma.connect() calls can target different variants of the same Figma component using the variant option

Related

• Config File
• Storybook Integration
• Template API
• CLI Reference

Code Connect

Integrating with Storybook

Connect Code Connect to Storybook stories so that design property changes in Figma generate code snippets from real stories.

Signature / Usage

import figma from '@figma/code-connect'
import { ButtonExample } from './Button.stories'

export default {
  component: Button,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/...',
      examples: [ButtonExample],
    },
  },
}

Options / Props

parameters.design fields

Variant restrictions (when one Figma component maps to multiple stories)

examples: [
  { example: PrimaryButtonStory, variant: { Type: 'Primary' } },
  { example: SecondaryButtonStory, variant: { Type: 'Secondary' } },
]

Dynamic props example

parameters: {
  design: {
    type: 'figma',
    url: 'https://...',
    props: {
      label: figma.string('Text Content'),
      disabled: figma.boolean('Disabled'),
      type: figma.enum('Type', { Primary: 'primary', Secondary: 'secondary' }),
    },
    examples: [ButtonExample],
  },
},

Notes

• Storybook integration is React only
• This extends Figma's existing Storybook plugin, automatically embedding component previews in your documentation
• Individual story props can be overridden per example entry in the examples array

Related

• React Integration
• CLI Reference

Connecting SwiftUI Components

Connect SwiftUI components to Figma using the FigmaConnect protocol and property wrapper helpers.

Signature / Usage

import Figma

struct Button_connection: FigmaConnect {
    let component = Button.self
    let figmaNodeUrl: String = "https://www.figma.com/file/..."

    @FigmaString("Label") var label: String = "Click me"
    @FigmaBoolean("Disabled") var disabled: Bool = false
    @FigmaEnum("Type", mapping: ["Primary": ButtonType.primary, "Secondary": ButtonType.secondary])
    var type: ButtonType = .primary

    var body: some View {
        Button(label, disabled: disabled, type: type)
    }
}

// Use as an Xcode preview
#Preview { Button_connection() }

Options / Props

Property wrappers

@FigmaEnum / @FigmaBoolean options

Variant-specific connections

Use a separate struct with let variant to provide different code samples for specific component variants:

struct PrimaryButton_connection: FigmaConnect {
    let component = Button.self
    let figmaNodeUrl: String = "https://..."
    let variant = ["Type": "Primary"]

    var body: some View { PrimaryButton() }
}

Conditional modifiers

// Apply a SwiftUI modifier conditionally based on a Figma property
@FigmaBoolean("Outlined") var outlined: Bool = false

var body: some View {
    Button(label)
        .figmaApply(outlined) { view in view.buttonStyle(.bordered) }
}

Notes

• @FigmaChildren accepts the name of the instance layer, not a property name
• figmaApply accepts an optional elseApply trailing closure for the false branch
• Connection structs work directly as Xcode previews via #Preview { MyComponent_connection() }
• Set xcodeprojPath or swiftPackagePath in figma.config.json if auto-detection fails

Related

• Config File
• CLI Reference
• Comparing CLI and UI

Template API

Core TypeScript/JavaScript API for building Code Connect template files. Provides the figma object, InstanceHandle methods, and type definitions.

Signature / Usage

import figma from 'figma'

const disabled = instance.getBoolean('Disabled')
const iconSnippet = instance.findInstance('Icon').executeTemplate().example

export default {
  example: figma.code`<Button disabled={${disabled}}>${iconSnippet}</Button>`,
  id: 'button-template',
  metadata: { nestable: true },
}

Options / Props

figma object

InstanceHandle — property access

InstanceHandle — layer finding

InstanceHandle — execution

TextHandle

SelectorOptions

figma.helpers.react — value type wrappers

figma.helpers.swift / figma.helpers.kotlin

Both provide renderChildren(children: any, prefix: string): ResultSection[] for properly indented nested rendering.

ResultSection union types

Notes

• Always use figma.code tagged template literal instead of plain string concatenation to preserve pill rendering in Dev Mode
• figma.batch is only available inside .figma.batch.ts template files

Related

• Template Files
• Batch Files
• React Integration

Template Files

Framework-agnostic approach to defining Code Connect using TypeScript (.figma.ts) or JavaScript (.figma.js) files that give full control over code snippet generation.

Signature / Usage

// url=https://www.figma.com/file/ABC/DesignSystem?node-id=1-1
// source=src/components/Button.tsx
// component=Button

import figma from 'figma'

const label = instance.getString('Label')
const disabled = instance.getBoolean('Disabled')

export default {
  example: figma.code`<Button disabled={${disabled}}>${label}</Button>`,
  imports: ["import { Button } from '@ui/components'"],
  id: 'button-template',
}

Options / Props

Metadata comments (at file top)

Export object fields

Instance property access methods

Notes

• Configure figma.config.json with label, language, and include: ["**/*.figma.ts"] before using template files
• Add "types": ["@figma/code-connect/figma-types"] to tsconfig.json for type definitions
• Use figma.code template literal (not plain string interpolation) to preserve pill rendering in Dev Mode
• Use getSlot() for freeform content that varies in structure; use findConnectedInstances() when all children share the same component type
• npx figma connect migrate converts existing Code Connect files to template format; use --outDir, --javascript, --include-props flags as needed

Related

• Template API
• Batch Files
• Config File
• CLI Reference

Connect to GitHub Repository

Links a GitHub repository to a Figma library file in Code Connect UI, enabling file path autocomplete and enhanced Figma MCP server context.

Signature / Usage

1. Open Code Connect UI in your Figma library file 2. Click Settings → Connect to GitHub 3. Authenticate with your GitHub account 4. Select Install and Authorize and confirm repository access (requires admin or owner permissions) 5. Select the repository and designate component directories

Notes

• You must be the owner of the Figma library file or an organization admin to connect GitHub
• Only one repository can be linked per Figma library file
• GitHub Enterprise Server (GHES) is not supported
• Users without admin permissions must request access from their organization administrator
• Connected directories become available for component path autocomplete when mapping components

Related

• UI Setup
• Comparing CLI and UI

Getting Started with Code Connect UI

Browser-based interface within Figma Dev Mode for connecting design components to code without local CLI installation.

Signature / Usage

1. Open a Figma library file containing design components 2. Switch to Dev Mode 3. Select Library → Connect components to code from the dropdown 4. Map each component to its code file path and optional component name

Options / Props

Adding multiple framework connections

1. Connect the initial component 2. Hover over the component row to reveal the add button 3. Enter file path and name for each additional framework

Notes

• Requires Dev or Full seat on Organization/Enterprise plan
• UI mappings do not display code snippets in the Inspect panel (unlike CLI)
• GitHub Enterprise Server (GHES) is not supported
• Only one GitHub repository can be linked per Figma library file
• CLI-created connections appear in the UI but are editable only via CLI

Related

• Connect to GitHub Repository
• Comparing CLI and UI
• Overview

Add Custom Rules

Store project-level rules in your MCP client's configuration to guide AI output, reduce repetitive prompting, and ensure consistency across team workflows.

Signature / Usage

For Claude Code, add rules to CLAUDE.md:

# MCP Servers
## Figma MCP server rules
- Always use components from `/src/components/ui` when possible
- Prioritize design fidelity; avoid hardcoding values
- Use design tokens from Figma where available
- Follow accessibility standards (WCAG)
- If the Figma MCP Server returns a localhost source for an image or SVG, use that source directly

Check your specific client's documentation for the correct configuration file and formatting.

Options / Props

Recommended rule categories:

Notes

• Rules act as documented best practices that persist across sessions
• To generate tailored rules automatically: prompt the agent to analyze your codebase and produce documentation covering design systems, component libraries, frameworks, and styling approaches
• Avoid creating new icon packages from scratch — assets should always originate from the Figma payload
• A structured workflow rule ensures quality: (1) fetch design context → (2) get screenshots → (3) download assets → (4) translate with project conventions → (5) reuse existing components → (6) validate against Figma

Related

• Write Effective Prompts
• Trigger Specific Tools
• Code Connect Integration

Avoid Large Frames

Large frame selections slow down tools, cause errors, or produce incomplete responses because there is too much context for the model to process at once.

Signature / Usage

# Preferred: work at the component level
"Generate code for the Card component in this frame"
"Implement the Header section"
"Build the Sidebar component"

# Avoid: entire screen in one call
"Generate code for this full dashboard screen"

Notes

• Break down selections to individual components or smaller sections (e.g., Card, Header, Sidebar)
• If a request feels slow or stuck, reduce your selection size and retry
• Keeping context manageable leads to more predictable outcomes for both user and model
• When troubleshooting quality issues, revisit three fundamentals: (1) how the Figma file is organized, (2) how prompts are written, (3) what context is passed to the model

Related

• Structure Figma File
• Write Effective Prompts
• Trigger Specific Tools

Code Connect Integration

Enhances Figma MCP server output with real implementation details from your codebase. When components are connected via Code Connect, the server wraps generated code in <CodeConnectSnippet> with design properties, import statements, usage examples, and custom instructions.

Signature / Usage

Two implementation approaches:

Code Connect CLI

Provides the richest output:

• Import statements from explicit imports fields or auto-populated source fields
• Full user-defined code snippets showing direct implementation
• Detailed prop mappings and component source paths

Code Connect UI

Auto-generates content without a CLI:

• Import statements based on mapped component paths and names
• Snippets automatically created from design component names and current property values
• Custom instructions added through Add instructions for MCP in the UI

Options / Props

Context injected into <CodeConnectSnippet> by the MCP server:

Notes

• Prioritize connecting frequently-used design system components first
• Document component-specific patterns using custom instructions in Code Connect UI
• Keep mappings synchronized with codebase changes to prevent stale suggestions
• Test and refine instructions using the Code Connect UI preview before rolling out
• Components must be published in Figma before Code Connect integration takes effect with write-to-canvas

Related

• Tools and Prompts
• Write to Canvas
• Desktop Server Installation
• Structure Figma File

Code to Canvas

Captures live UI from the browser and converts it into editable Figma frames using the generate_figma_design tool. Bridges code-first development with design collaboration by bringing real UI into Figma.

Signature / Usage

# Step 1: Install and configure the remote Figma MCP server for your client

# Step 2: Prompt to initiate capture
"Start a local server for my app and capture the UI in a new Figma file"
"Start a local server for my app and capture the UI in [existing file URL]"
"Capture the UI to my clipboard"

After prompting, use the browser toolbar to select Entire screen or Select element for targeted capture.

Options / Props

Notes

• Captured frames become standard Figma design layers — fully editable, organizable, and annotatable
• Clients typically infer that subsequent captures should go to the same file
• For live web apps, use tools like Playwright to inject the required capture scripts
• Supports capturing a single screen or an entire multi-step flow in one session

Supported Clients

Augment, Claude Code, Codex by OpenAI, Cursor, Factory, Firebender, VS Code, Warp

Related

• Remote Server Installation
• Tools and Prompts
• Write to Canvas

Desktop Server Installation

Local Figma MCP server running in the Figma desktop app. Suited for specific organizational needs; remote server is recommended for most users.

Signature / Usage

Server URL: http://127.0.0.1:3845/mcp (HTTP transport, local only)

Step 1: Enable the desktop MCP server in Figma

1. Open the Figma desktop app (latest version) 2. Open or create a Design file 3. Switch to Dev Mode with Shift+D 4. In the MCP server section, click Enable desktop MCP server

Step 2: Configure your MCP client

Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

VS Code (requires GitHub Copilot):

Open Command Palette → MCP: Add Server → select HTTP → paste the server URL → use ID figma-desktop.

Cursor:

Settings → MCP tab → Add new global MCP server with URL http://127.0.0.1:3845/mcp.

Generic JSON config:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Step 3: Provide design context

Two methods to give the agent context:

• Selection-based: Select a frame in Figma, then prompt the client to implement the selection
• Link-based: Share a Figma node URL; the agent extracts the node-id automatically

Step 4: Adjust settings

Access settings via the MCP server inspect panel in the desktop app:

• Image handling: choose local server or download assets
• Code Connect: enable component reuse from your codebase

Notes

• Desktop server does not support remote-only tools (create_new_file, generate_diagram, use_figma, upload_assets, etc.)
• The Figma desktop app must remain open and connected for the server to be available
• Adjust settings panel is accessible through the MCP server section in Dev Mode

Related

• Remote Server Installation
• Tools and Prompts
• Code Connect Integration

Make Context and Resources

Fetch design and prototype files from Make projects through the MCP integration, enabling agents to reuse existing design context instead of starting from scratch.

Signature / Usage

# Example prompt workflow
1. Share a Make project link with the agent
2. Agent returns a list of available files in the project
3. Download desired files when prompted

Example prompt:

"Here is my Make project link: [URL]. Extract the button component's behavior and styling for implementation."

Options / Props

• Fetch project context directly from Make (individual files or whole project)
• Prompt the agent to use existing code components instead of creating new ones
• Extend prototypes with real data to validate and productionize designs faster

Notes

• This integration uses the MCP resources capability; only available on clients that support MCP resources
• Designed to reduce friction when transitioning Make prototypes into production applications
• Preserves design intent throughout implementation by reusing existing component definitions

Related

• Overview
• Code Connect Integration
• Write to Canvas

Figma MCP Server Overview

Integrates Figma into AI agent workflows via the Model Context Protocol (MCP), enabling design-to-code generation and writing native Figma content back to the canvas.

Signature / Usage

Two deployment options:

• Remote server (recommended): cloud-hosted at https://mcp.figma.com/mcp; broadest feature set
• Desktop server: locally hosted at http://127.0.0.1:3845/mcp; for specific organizational needs

Options / Props

• Generate code from selected Figma frames with design context (variables, components, layout)
• Write native Figma content (frames, components, variables, auto layout) directly from MCP clients
• Retrieve Make file resources for prototype-to-production transitions
• Leverage Code Connect for consistency between generated code and actual components

Notes

• Only MCP clients listed in the Figma MCP Catalog can connect to the Figma MCP Server
• Write to canvas is in beta and currently free; will eventually become usage-based and paid
• Installing Figma skills for your MCP client is recommended for reliable write-to-Figma workflows
• Full Figma seat required for write operations; Dev seats are read-only

Related

• Remote Server Installation
• Desktop Server Installation
• Tools and Prompts

Figma MCP Server

Remote Server Installation

Cloud-hosted Figma MCP server setup. Recommended for the broadest feature set including write-to-canvas, diagram generation, and design system search.

Signature / Usage

Server URL: https://mcp.figma.com/mcp (HTTP/SSE transport)

Claude Code

# Preferred: plugin install
claude plugin install figma@claude-plugins-official

# Manual
claude mcp add --transport http figma https://mcp.figma.com/mcp
# For global access across all projects
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp

Then authenticate via the /mcp command in Claude.

Cursor

# Preferred: in chat
/add-plugin figma

Or use the deep-link installer, then authenticate when prompted.

VS Code

{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Open Command Palette (⌘ Shift P) → select MCP configuration (user or workspace) → paste the JSON above → click Start → authorize access.

Codex

codex mcp add figma --url https://mcp.figma.com/mcp

Or via app: Plugins → + → Install Figma, then authenticate.

Notes

• Authentication uses Figma OAuth; authorization is triggered on first use
• Remote server supports all tools including create_new_file, generate_diagram, use_figma, upload_assets, and others marked remote-only
• See Tools and Prompts for the full list of remote-only tools

Related

• Desktop Server Installation
• Tools and Prompts
• Write to Canvas

Structure Figma File

Best practices for organizing Figma files to maximize code generation quality when using the MCP server.

Options / Props

Notes

• Semantic layer names help the model comprehend functionality and purpose; generic names produce lower-quality code
• Auto Layout typically results in cleaner code without absolute positioning
• Code Connect eliminates guesswork for the AI model about which component to use

Related

• Code Connect Integration
• Write Effective Prompts
• Avoid Large Frames

Tools and Prompts

Complete reference for all tools and example prompts exposed by the Figma MCP Server.

Options / Props

Tools

Example Prompts

Code generation from design:

"Generate my Figma selection in Vue"
"Implement the selected frame using Chakra UI components"
"Generate iOS SwiftUI code from the selected Figma frame"

File operations:

"Create a new Figma file called 'Homepage Redesign'"
"Add a new frame to my Figma file"

Diagram creation (FigJam):

"Create a flowchart for the user authentication flow"
"Generate a Gantt chart for the project timeline"

Design system & tokens:

"Search for a button component in my design system"
"Get the variable names and values used in this frame"
"Create a color variable collection from design tokens"

Notes

• Tools marked Remote Only are unavailable when using the desktop server (http://127.0.0.1:3845/mcp)
• get_design_context outputs React + Tailwind by default; specify another framework in your prompt to override
• use_figma is the general write tool; prefer explicit prompt phrasing over relying on automatic tool selection (see Trigger Specific Tools)
• upload_assets has a 10 MB per-file limit

Related

• Remote Server Installation
• Trigger Specific Tools
• Code Connect Integration

Trigger Specific Tools

AI assistants don't always select the right MCP tool automatically. Explicitly naming the desired tool or describing its output in your prompt forces correct tool selection.

Signature / Usage

# Force get_design_context
"Get the design context for my Figma selection"

# Force get_variable_defs — use explicit description of what you want
"Get the variable names and values used in this frame"

# Force get_screenshot
"Take a screenshot of my selection"

# Force get_metadata
"Get the metadata for the selected Figma layers"

Options / Props

Key tools to trigger explicitly:

Notes

• If output seems incomplete or inaccurate, rephrasing to name the tool explicitly is the first troubleshooting step
• get_design_context serves as a foundation for any framework — pair it with framework instructions in your prompt
• As the MCP server adds more tools, explicit tool references in prompts become increasingly important

Related

• Tools and Prompts
• Write Effective Prompts
• Add Custom Rules

Write Effective Prompts

Guidelines for crafting prompts that get precise, consistent output from the Figma MCP server. Treat prompting like briefing a teammate — specificity drives results.

Signature / Usage

# Specify framework and styling system
"Generate iOS SwiftUI code from the selected Figma frame"
"Implement the selected frame using Chakra UI components"

# Target your codebase conventions and file paths
"Generate this using components from src/components/ui"
"Add this component to src/components/marketing/PricingCard.tsx"

# Specify layout system
"Implement this using our Stack layout component"

Options / Props

What a well-specified prompt controls:

Notes

• The MCP server provides structured data; what the model does with it depends entirely on what you ask
• When output seems wrong, try being explicit about which tool to invoke (see Trigger Specific Tools)
• Reusable team guidelines belong in custom rules (see Add Custom Rules)

Related

• Trigger Specific Tools
• Add Custom Rules
• Structure Figma File

Write to Canvas

Enables AI agents to create and modify native Figma content (frames, components, variables, auto layout) directly on the canvas using the use_figma tool. Output is editable design structure, not static screenshots.

Signature / Usage

# Basic prompt pattern
"Using this Figma file: [URL], create a new page and build a settings screen with auto layout"

# From a selection link
"Using this selection: [link], convert these raw values to variables"

# Follow-up in the same file
"Add an empty state below that"

Options / Props

Notes

• Feature is beta-level quality and currently free; will become usage-based and paid after beta
• Response output limit: 20 KB per tool call
• No asset or image support in write operations
• Custom fonts not supported
• Components must be manually published before Code Connect integration works
• Workflow: system → canvas → code (not a screenshot, generates real Figma layer structure)

Related

• Remote Server Installation
• Tools and Prompts
• Code Connect Integration
• Write Effective Prompts

Data Types

TypeScript interface and union type definitions used throughout the Plugin API for type-checking and passing structured values.

Signature / Usage

// Color
interface RGB  { readonly r: number; readonly g: number; readonly b: number }
interface RGBA { readonly r: number; readonly g: number; readonly b: number; readonly a: number }

// Paint union
type Paint = SolidPaint | GradientPaint | ImagePaint | VideoPaint | PatternPaint

// Effect union
type Effect = DropShadowEffect | InnerShadowEffect | BlurEffect |
              NoiseEffect | TextureEffect | GlassEffect

// Transform (2×3 affine matrix)
type Transform = [[number, number, number], [number, number, number]]

Options / Props

Color

RGB

interface RGB {
  readonly r: number  // 0–1
  readonly g: number  // 0–1
  readonly b: number  // 0–1
}

RGBA

interface RGBA {
  readonly r: number  // 0–1
  readonly g: number  // 0–1
  readonly b: number  // 0–1
  readonly a: number  // 0–1 (opacity)
}

Black: { r: 0, g: 0, b: 0, a: 1 } — White: { r: 1, g: 1, b: 1, a: 1 }

BlendMode

type BlendMode =
  'PASS_THROUGH' | 'NORMAL' | 'DARKEN' | 'MULTIPLY' | 'LINEAR_BURN' |
  'COLOR_BURN' | 'LIGHTEN' | 'SCREEN' | 'LINEAR_DODGE' | 'COLOR_DODGE' |
  'OVERLAY' | 'SOFT_LIGHT' | 'HARD_LIGHT' | 'DIFFERENCE' | 'EXCLUSION' |
  'HUE' | 'SATURATION' | 'COLOR' | 'LUMINOSITY'

---

Paint

type Paint = SolidPaint | GradientPaint | ImagePaint | VideoPaint | PatternPaint

Common fields on all paints: visible?: boolean, opacity?: number, blendMode?: BlendMode

SolidPaint

GradientPaint

ImagePaint

VideoPaint / PatternPaint

VideoPaint mirrors ImagePaint with type: 'VIDEO' and videoHash. PatternPaint references a source node with type: 'PATTERN' and sourceNodeId, tileType, scalingFactor, spacing.

---

Effect

type Effect = DropShadowEffect | InnerShadowEffect | BlurEffect |
              NoiseEffect | TextureEffect | GlassEffect

DropShadowEffect / InnerShadowEffect

BlurEffect

---

LayoutGrid

type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid

Always check pattern before reading other properties.

RowsColsLayoutGrid

GridLayoutGrid

---

Transform

A 2×3 affine transformation matrix (top two rows of a 3×3 matrix):

type Transform = [
  [number, number, number],
  [number, number, number]
]
// Identity: [[1, 0, 0], [0, 1, 0]]
// Translation by (tx, ty): [[1, 0, tx], [0, 1, ty]]

---

Vector and Rect

interface Vector { readonly x: number; readonly y: number }
interface Rect   { readonly x: number; readonly y: number; readonly width: number; readonly height: number }

---

Constraints

interface Constraints {
  readonly horizontal: ConstraintType
  readonly vertical: ConstraintType
}
type ConstraintType = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE'

MIN = left/top, MAX = right/bottom, STRETCH = both sides, SCALE = proportional.

---

ExportSettings

type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF | ExportSettingsREST

Common fields: contentsOnly?, useAbsoluteBounds?, suffix?, colorProfile?

---

Variable & VariableCollection

Variable

Methods: setValueForMode(modeId, value), resolveForConsumer(consumer), remove(), getPublishStatusAsync(), setVariableCodeSyntax(platform, value), removeVariableCodeSyntax(platform)

---

Image

interface Image {
  readonly hash: string
  getBytesAsync(): Promise<Uint8Array>
  getSizeAsync(): Promise<{ width: number; height: number }>
}

Created via figma.createImage(data: Uint8Array) or figma.getImageByHash(hash). Max 4096×4096 px; PNG, JPEG, GIF supported.

---

FontName

interface FontName {
  readonly family: string  // e.g. 'Inter'
  readonly style: string   // e.g. 'Regular', 'Bold Italic'
}

---

Guide

interface Guide {
  readonly axis: 'X' | 'Y'
  readonly offset: number
}

---

Reaction, Action, Trigger

Prototype interaction types:

• Reaction = { trigger: Trigger | null; action: Action | null }
• Trigger — user interaction (e.g. click, hover, key press)
• Action — navigation or overlay behavior

---

DocumentChange / NodeChange / StyleChange

Document change events deliver typed change descriptors:

• DocumentChangeEvent.documentChanges: DocumentChange[]
• NodeChangeEvent.changedNode: SceneNode
• StyleChangeEvent.changedStyle: BaseStyle

Notes

• figma.mixed (unique symbol) is returned for node-level properties that differ across a mixed selection.
• All numeric color channels are 0–1, not 0–255.
• Use figma.util.rgb() / figma.util.rgba() / figma.util.solidPaint() for converting CSS color strings.

Related

• node-properties
• figma.util
• figma.variables

Editor Types

Figma plugins can target one or more editor environments. The active environment is exposed at runtime via figma.editorType.

Signature / Usage

// manifest.json
{
  "editorType": ["figma", "dev"]
}

// Runtime detection
if (figma.editorType === 'figma') {
  // Design editor logic
} else if (figma.editorType === 'figjam') {
  // FigJam whiteboard logic
}

Options / Props

Notes

• "dev" and "figjam" cannot appear together in the same editorType array.
• Certain APIs are editor-scoped: e.g. figma.createSticky() is only available in FigJam; figma.createConnector() is FigJam-only.
• Use figma.editorType to branch behavior in multi-editor plugins.
• figma.mode gives finer-grained context within an editor ('default', 'textreview', 'inspect', 'codegen', 'linkpreview', 'auth').

Related

• manifest
• figma global object

figma.annotations

Sub-API for managing annotation categories in the current file.

Signature / Usage

// List existing categories
const categories = await figma.annotations.getAnnotationCategoriesAsync();

// Add a new category
const category = await figma.annotations.addAnnotationCategoryAsync({
  label: 'Accessibility',
  color: 'RED',
});

// Retrieve by ID
const found = await figma.annotations.getAnnotationCategoryByIdAsync(category.id);

Options / Props

Methods

Notes

• AnnotationCategoryColor is an enum of preset color names (e.g. 'RED', 'GREEN', 'BLUE').
• Annotation categories are file-scoped — they appear in all pages of the document.

Related

• figma global object
• data-types

figma.clientStorage

Sub-API for persisting data locally on the user's machine. Data is scoped to the plugin ID and is not synced across users or devices.

Signature / Usage

// Store a value
await figma.clientStorage.setAsync('theme', 'dark');

// Retrieve a value
const theme = await figma.clientStorage.getAsync('theme');

// Delete a key
await figma.clientStorage.deleteAsync('theme');

// List all keys
const keys = await figma.clientStorage.keysAsync();

Options / Props

Methods

Notes

• Storage capacity: 5 MB per plugin.
• Supported value types: objects, arrays, strings, numbers, booleans, null, undefined, Uint8Array.
• Data is isolated by plugin ID — different plugins cannot access each other's storage.
• Data is not synchronized across users or machines.

Related

• figma global object

figma.codegen

Sub-API for Dev Mode codegen plugins. Registers callbacks that fire when the user's selection changes in Dev Mode, producing code snippets displayed in the Inspect panel.

Signature / Usage

figma.codegen.on('generate', async (event: CodegenEvent) => {
  const node = event.node;
  return [
    {
      title: 'CSS',
      code: `width: ${node.width}px;\nheight: ${node.height}px;`,
      language: 'CSS',
    },
  ];
});

figma.codegen.on('preferenceschange', async (event) => {
  figma.codegen.refresh();
});

Options / Props

Methods

Properties

CodegenResult fields

Notes

• The generate callback has a 15-second timeout; return results before then.
• capabilities: ["codegen"] must be set in manifest.json.
• figma.mode will be 'codegen' when the codegen callback runs.
• CodegenPreferences.unit is 'PIXEL' or 'SCALED'; scaleFactor is only present when 'SCALED'.

Related

• figma global object
• editor-types

figma.constants

Sub-API exposing constant values such as FigJam color palettes.

Signature / Usage

// Access FigJam base color palette
const base      = figma.constants.colors.figJamBase;
const baseLight = figma.constants.colors.figJamBaseLight;

// Use a color value
const hexColor = base['yellow']; // e.g. '#FFD966'

Options / Props

Properties

ColorPalettes keys

Notes

• The colors property is primarily useful in FigJam plugins when applying standard palette colors to sticky notes, shapes, and connectors.
• Color values are hex strings (e.g. '#FFD966').

Related

• figma global object
• data-types: ColorPalette

figma (Global Object)

The figma global object is the main entry point for all Plugin API operations. It provides access to the document tree, node creation, styles, events, and all sub-APIs.

Signature / Usage

// Access document root and current page
const page = figma.currentPage;
const doc  = figma.root;

// Create nodes
const frame = figma.createFrame();
const text  = figma.createText();

// Show UI
figma.showUI(__html__, { width: 300, height: 400 });

// Notify user
figma.notify('Done!');

// Close plugin
figma.closePlugin();

Options / Props

Properties

Core Methods

Node Creation

Boolean Operations

Node Query

Style Management

Image / Font

Event Handling

Supported events: 'run', 'close', 'selectionchange', 'currentpagechange', 'documentchange', 'drop', 'nodechange', 'stylechange', 'canvasviewchange'

Sub-APIs

Notes

• figma.mixed is returned by properties with inconsistent values across a mixed selection.
• Always call await figma.loadFontAsync(...) before modifying TextNode.characters or text style properties.
• Prefer getNodeByIdAsync() over the deprecated synchronous getNodeById().

Related

• figma.ui
• figma.viewport
• figma.clientStorage
• figma.variables
• DocumentNode
• PageNode

figma.parameters

Sub-API for handling quick-action parameter input. Registers callbacks that fire on every keystroke to power autocomplete suggestions in the quick actions menu.

Signature / Usage

figma.parameters.on('input', ({ key, query, parameters, result }) => {
  if (key === 'color') {
    result.setSuggestions(['red', 'green', 'blue'].filter(c => c.startsWith(query)));
  }
});

// Plugin runs after parameters are resolved; access via RunEvent
figma.on('run', ({ parameters }) => {
  const color = parameters?.['color'];
});

Options / Props

Methods on figma.parameters

ParameterInputEvent fields

SuggestionResults methods

SuggestionObject shape

Notes

• manifest.json must define parameters entries with name and key.
• ParameterValues resolved value priority: data → name → string suggestion → freeform query → undefined (optional, skipped).
• setError() is unavailable when allowFreeform: true is set on the parameter.

Related

• manifest
• figma global object

figma.payments

Sub-API for gating plugin features behind a payment. Requires "payments" in the permissions array of manifest.json.

Signature / Usage

// Check payment status
if (figma.payments.status === 'UNPAID') {
  // Show upsell prompt or initiate checkout
  await figma.payments.initiateCheckoutAsync({ interstitial: 'PAID_FEATURE' });
}

// Generate a backend-verifiable token
const token = await figma.payments.getPluginPaymentTokenAsync();

Options / Props

Properties

Methods

Notes

• manifest.json must include "permissions": ["payments"].
• initiateCheckoutAsync throws if called during query mode or widget rendering.
• setPaymentStatusInDevelopment changes apply globally to all locally-tested plugins and do not persist across client restarts.
• requestCheckout() is only for text review plugins.

Related

• manifest
• figma global object

figma.teamLibrary

Sub-API for accessing published library variables and collections. Requires "teamlibrary" in the permissions array of manifest.json.

Signature / Usage

// List all available library variable collections
const collections = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();

// Get variables inside a collection
for (const coll of collections) {
  const vars = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(coll.key);
  // Import a specific variable
  const imported = await figma.variables.importVariableByKeyAsync(vars[0].key);
}

Options / Props

Methods

Notes

• manifest.json must include "permissions": ["teamlibrary"].
• Libraries must be manually enabled by the user via Figma's UI; the Plugin API cannot enable them programmatically.
• LibraryVariableCollection and LibraryVariable are descriptors only — to use a variable in the document, import it first via figma.variables.importVariableByKeyAsync(key).
• Promises reject if the collection doesn't exist, the user lacks access, or the request fails.

Related

• figma.variables
• manifest

figma.textreview

Sub-API for managing the text review plugin lifecycle. Requires "textreview" in the capabilities array of manifest.json.

Signature / Usage

// Request to be enabled as a text review plugin
try {
  await figma.textreview.requestToBeEnabledAsync();
  console.log('Text review enabled');
} catch {
  console.log('User declined');
}

// Check status
if (figma.textreview.isEnabled) {
  // Plugin is active for text review
}

// Disable
await figma.textreview.requestToBeDisabledAsync();

Options / Props

Properties

Methods

Notes

• manifest.json must include "capabilities": ["textreview"].
• Multiple cancellations in a single plugin run cause requestToBeEnabledAsync to auto-reject to prevent spam.
• figma.payments.requestCheckout() is available for gating text review behind payment.

Related

• manifest
• figma.payments
• figma global object

figma.timer

Sub-API for controlling the FigJam timer. Only available in FigJam documents.

Signature / Usage

// Start a 5-minute timer
figma.timer.start(300);

// Pause and resume
figma.timer.pause();
figma.timer.resume();

// Read state
console.log(figma.timer.state);     // 'RUNNING' | 'PAUSED' | 'STOPPED'
console.log(figma.timer.remaining); // seconds left

Options / Props

Properties

Methods

Notes

• Only available in FigJam (figma.editorType === 'figjam'); throws in other editors.
• Calling start() on a running timer adjusts the remaining time.

Related

• editor-types
• figma global object

figma.ui

Sub-API for managing the plugin's iframe UI — showing, hiding, resizing, repositioning, and passing messages between the plugin sandbox and the UI iframe.

Signature / Usage

// Show UI defined in manifest
figma.showUI(__html__, { width: 300, height: 400 });

// Send a message to the iframe
figma.ui.postMessage({ type: 'init', data: payload });

// Receive a message from the iframe
figma.ui.onmessage = (msg) => {
  if (msg.type === 'resize') {
    figma.ui.resize(msg.width, msg.height);
  }
};

// Inside iframe (ui.html)
window.onmessage = (event) => {
  const msg = event.data.pluginMessage;
  // handle msg
};
parent.postMessage({ pluginMessage: { type: 'done' } }, '*');

Options / Props

Methods

Properties

ShowUIOptions (passed to figma.showUI())

Notes

• Messages flow from plugin sandbox → iframe via figma.ui.postMessage(), and from iframe → sandbox via parent.postMessage({ pluginMessage: ... }, '*').
• Use figma.ui.onmessage or figma.ui.on('message', cb) — they are equivalent.
• The UI iframe has no direct access to the Figma document; all document operations must be relayed through messaging.

Related

• figma global object
• global fetch

figma.util

Sub-API providing convenience helpers for creating colors and paints from common encodings, and for normalizing markdown strings.

Signature / Usage

// Parse a CSS color string to RGB
const red = figma.util.rgb('#FF0000');

// Create a SolidPaint from a hex color
node.fills = [figma.util.solidPaint('#0078FF')];

// Update fill hue while keeping other paint properties
const updatedFill = figma.util.solidPaint('#FF00FF88', node.fills[0] as SolidPaint);

// Normalize markdown for Figma rich-text fields
const md = figma.util.normalizeMarkdown('# Title\n**Bold**');
component.descriptionMarkdown = md;

Options / Props

Methods

Notes

• rgb() and rgba() accept CSS strings: hex (#RGB, #RRGGBB, #RRGGBBAA), rgb(), hsl(), lab(), named colors.
• solidPaint() is especially useful for updating a fill's color while preserving blendMode, opacity, etc.
• normalizeMarkdown() should be used before assigning to descriptionMarkdown to avoid unexpected rendering.

Related

• data-types: Paint
• figma global object

figma.variables

Sub-API for creating and managing Variables and VariableCollections — Figma's design token system.

Signature / Usage

// Create a collection and a color variable
const collection = figma.variables.createVariableCollection('Brand');
const colorVar   = figma.variables.createVariable('primary', collection, 'COLOR');

// Set value for a mode
colorVar.setValueForMode(collection.defaultModeId, { r: 0, g: 0.47, b: 1, a: 1 });

// Bind to a node fill
const paint = figma.util.solidPaint('#0078FF');
const bound = figma.variables.setBoundVariableForPaint(paint, 'color', colorVar);
node.fills = [bound];

// Import from library
const imported = await figma.variables.importVariableByKeyAsync(key);

Options / Props

Retrieval Methods

Creation Methods

Alias / Binding Methods

Library

Notes

• Synchronous variants (getVariableById, getLocalVariables, etc.) are deprecated; they throw when documentAccess: "dynamic-page" is set.
• Passing null as the variable argument to binding helpers unbinds the field.
• VariableResolvedDataType values: 'BOOLEAN', 'COLOR', 'FLOAT', 'STRING'.

Related

• figma.teamLibrary
• data-types: Variable
• node-properties: boundVariables

figma.viewport

Sub-API for reading and controlling the visible canvas area — scroll position, zoom level, and view bounds.

Signature / Usage

// Pan to center on a node
figma.viewport.scrollAndZoomIntoView([node]);

// Read current state
console.log(figma.viewport.center); // { x: 0, y: 0 }
console.log(figma.viewport.zoom);   // 1.0 = 100%

// Set zoom and center
figma.viewport.zoom = 2;
figma.viewport.center = { x: 100, y: 200 };

Options / Props

Properties

Methods

Notes

• bounds is computed from center and zoom; it reflects exactly what is on-screen.
• scrollAndZoomIntoView() does not animate; the viewport snaps immediately.

Related

• figma global object

global fetch()

A network fetch function available in the plugin sandbox (not in the UI iframe). Functionally similar to the browser fetch API but with Figma-specific constraints.

Signature / Usage

// Declare allowed domains in manifest.json first:
// "networkAccess": { "allowedDomains": ["api.example.com"] }

const response = await fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' }),
});

if (response.ok) {
  const data = await response.json();
}

Options / Props

Function Signature

fetch(url: string, init?: FetchOptions): Promise<FetchResponse>

FetchOptions

FetchResponse

Notes

• The url parameter must be a string — Request objects are not supported.
• Headers are plain objects, not Headers instances (unlike browser fetch).
• All requested domains must be listed in manifest.json under networkAccess.allowedDomains. Requests to unlisted domains will fail.
• fetch() is only available in the plugin sandbox (the main code). The UI iframe has access to the standard browser fetch.

Related

• manifest
• figma.ui

Plugin Manifest

The manifest.json file is required for every Figma plugin. It defines plugin identity, target editors, entry points, and declared capabilities.

Signature / Usage

{
  "name": "MyPlugin",
  "id": "737805260747778092",
  "api": "1.0.0",
  "editorType": ["figma"],
  "main": "code.js",
  "ui": "ui.html"
}

Options / Props

Required fields

Optional fields

Notes

• id is generated by Figma when you first register a plugin; leave it blank during local dev then fill it in before publishing.
• dev and figjam cannot be combined in the same editorType array.
• networkAccess.allowedDomains must list every domain your plugin calls via fetch().
• Setting documentAccess: "dynamic-page" disables all deprecated synchronous node/variable APIs.

Related

• figma global object
• figma.parameters
• editor-types

BooleanOperationNode

A node that combines child shapes using a boolean set operation (union, subtract, intersect, or exclude).

Signature / Usage

// Create boolean operations
const union    = figma.union([rect, ellipse], figma.currentPage);
const subtract = figma.subtract([rect, ellipse], figma.currentPage);
const intersect = figma.intersect([rect, ellipse], figma.currentPage);
const exclude  = figma.exclude([rect, ellipse], figma.currentPage);

// Inspect
console.log(union.booleanOperation); // 'UNION'

Options / Props

Properties

Methods

Notes

• Like GroupNode, a boolean operation node auto-resizes to fit its children.
• Created via figma.union(), figma.subtract(), figma.intersect(), figma.exclude().
• Use figma.flatten() to merge a boolean operation into a single VectorNode.

Related

• VectorNode
• GroupNode

ComponentSetNode

A container for component variants. All direct children must be ComponentNode objects. Behaves like a frame, but is variant-aware.

Signature / Usage

// ComponentSetNode is typically created by Figma when you combine components as variants
// Accessing an existing component set:
const set = figma.currentPage.findOne(n => n.type === 'COMPONENT_SET') as ComponentSetNode;

console.log(set.defaultVariant.name);
console.log(set.componentPropertyDefinitions);

Options / Props

Properties

Methods

Notes

• A component set with no children deletes itself.
• Variant properties define dimensions like "Size" or "State" with enumerated values.
• defaultVariant is used as the preview and initial instance when dragging from the assets panel.

Related

• ComponentNode
• InstanceNode

ComponentNode

A reusable UI element. Behaves like a FrameNode but can produce auto-updating instances. Only available in the Design editor.

Signature / Usage

const component = figma.createComponent();
component.name = 'Button';
component.resize(120, 40);

// Add a component property
component.addComponentProperty('Label', 'TEXT', 'Click me');

// Create an instance
const instance = component.createInstance();
instance.x = 200;

// Find all instances in the document
const instances = await component.getInstancesAsync();

Options / Props

Properties

Methods

Notes

• ComponentNode inherits all FrameNode layout, geometry, and prototyping properties.
• Property names returned by addComponentProperty() are unique; store the returned value for future edits.
• A component set (ComponentSetNode) is needed for variant support.

Related

• ComponentSetNode
• InstanceNode
• FrameNode

DocumentNode

The root node of the Figma document. There is exactly one DocumentNode per browser tab. Its children must be PageNode objects.

Signature / Usage

const doc = figma.root; // DocumentNode

// Iterate pages
for (const page of doc.children) {
  console.log(page.name);
}

// Search entire document
const allTexts = doc.findAll(n => n.type === 'TEXT');

Options / Props

Properties

Methods

Notes

• figma.root always points to the DocumentNode.
• Only PageNode objects can be direct children.
• documentColorProfile is read-only; it reflects the file's color space setting.

Related

• PageNode
• figma global object

FrameNode

A container that defines layout hierarchy — analogous to <div> in HTML. Supports auto-layout, CSS grid layout, and prototyping reactions.

Signature / Usage

const frame = figma.createFrame();
frame.name = 'Card';
frame.resize(320, 200);

// Enable auto-layout
frame.layoutMode = 'HORIZONTAL';
frame.itemSpacing = 16;
frame.paddingLeft = 24;
frame.paddingRight = 24;

// Add children
const rect = figma.createRectangle();
frame.appendChild(rect);

Options / Props

Type

Layout

Grid Layout

Geometry

Prototyping

Methods

Notes

• layoutMode = 'NONE' means absolute positioning; children use x/y for placement.
• Frames persist their size when children are removed (unlike GroupNode).
• Use createAutoLayout() for a pre-configured horizontal auto-layout frame.

Related

• GroupNode
• ComponentNode
• InstanceNode
• node-properties

GroupNode

A semantic grouping container. Unlike FrameNode, a group auto-resizes to fit its children and does not establish layout boundaries.

Signature / Usage

// Groups are typically created by the user; plugins create them via:
const group = figma.group([rect, ellipse], figma.currentPage);
group.name = 'Icons';

Options / Props

Properties

Methods

Notes

• A group with no children deletes itself automatically.
• Position and size always reflect bounding box of children; setting x/y translates the group.
• Do not assume a node type is stable during long-running operations — users can convert frames to groups via the UI.

Related

• FrameNode
• BooleanOperationNode

InstanceNode

A copy of a ComponentNode that auto-updates when the component changes. Created via component.createInstance().

Signature / Usage

const instance = component.createInstance();
instance.x = 100;
instance.y = 100;

// Set component property values
instance.setProperties({ 'Label#abc123': 'Submit' });

// Swap to a different component
instance.swapComponent(otherComponent);

// Detach from component (becomes a plain FrameNode)
const frame = instance.detachInstance();

Options / Props

Properties

Methods

Notes

• mainComponent can be null when the source component lives in a remote library not yet loaded — use getMainComponentAsync() instead.
• Property keys in setProperties() use the format "propName#uniqueId" as returned by addComponentProperty().
• detachInstance() is irreversible.

Related

• ComponentNode
• ComponentSetNode
• FrameNode

Other Node Types

Reference for less commonly used node types: SliceNode, EmbedNode, LinkUnfurlNode, MediaNode, TableNode, TableCellNode, WidgetNode, CodeBlockNode, RemovedNode, HighlightNode, ShapeWithTextNode, StampNode, WashiTapeNode, TextPathNode, TransformGroupNode, InteractiveSlideElementNode, and SlotNode.

SliceNode (type: 'SLICE')

Defines an export region on the canvas. Does not render visually.

const slice = figma.createSlice();
slice.resize(200, 100);
slice.exportSettings = [{ format: 'PNG', constraint: { type: 'SCALE', value: 2 } }];

---

EmbedNode (type: 'EMBED')

An embedded external content node (e.g. a Loom video embed in FigJam).

---

LinkUnfurlNode (type: 'LINK_UNFURL')

An unfurled link preview card in FigJam.

---

MediaNode (type: 'MEDIA')

A video or GIF node. Only in FigJam.

---

TableNode (type: 'TABLE') and TableCellNode (type: 'TABLE_CELL')

A table in FigJam. Created via figma.createTable().

const table = figma.createTable(3, 4); // 3 rows, 4 columns
const cell  = table.cellAt(0, 0) as TableCellNode;

TableCellNode inherits text and fill properties.

---

WidgetNode (type: 'WIDGET')

A FigJam widget. Read-only from a plugin context.

---

CodeBlockNode (type: 'CODE_BLOCK')

A code block sticky in FigJam.

---

RemovedNode

Returned by some APIs when a node has been deleted. Check node.removed === true before use.

---

HighlightNode (type: 'HIGHLIGHT')

A highlight annotation node (FigJam). Created by users on top of other content.

---

ShapeWithTextNode (type: 'SHAPE_WITH_TEXT')

A FigJam shape that contains text (e.g. rounded rectangle with label). Has a text sublayer property for accessing the text content.

---

StampNode (type: 'STAMP')

A reaction stamp in FigJam (emoji reaction).

---

WashiTapeNode (type: 'WASHI_TAPE')

A decorative washi tape strip in FigJam.

---

TextPathNode (type: 'TEXT_PATH')

Text that follows a vector path.

---

TransformGroupNode (type: 'TRANSFORM_GROUP')

A group node created by certain transform operations. Behaves similarly to GroupNode.

---

InteractiveSlideElementNode (type: 'INTERACTIVE_SLIDE_ELEMENT')

An interactive element within a Figma Slides presentation (e.g. a poll or quiz component).

---

SlotNode (type: 'SLOT')

A slot placeholder within a component, used with slot-based component properties. Created via component.createSlot().

Notes

• EmbedNode, LinkUnfurlNode, MediaNode, TableNode, WidgetNode, and CodeBlockNode are FigJam-only.
• SliceNode is Design-only; it has no visual representation.
• Always check node.removed before operating on nodes obtained from long-lived references.

Related

• editor-types
• node-properties

Errors

Standard HTTP error codes returned by the Figma REST API.

Options / Props

Notes

• All requests must use HTTPS; plain HTTP returns 403
• For 429 responses, use the Retry-After response header value (seconds to wait)
• 400 and 500 errors caused by large payloads can be resolved by splitting requests into smaller batches
• API usage is governed by Figma's Terms of Service; Figma may deny API access

Related

• Rate Limits
• Files