Direction

Tool

What it does

Write

figma_write

Draw frames, shapes, text, prototypes via JS code

Read

figma_read

Extract node trees, colors, typography, screenshots

Info

figma_status

Check plugin connection + active sessions

Docs

figma_docs

Get full API reference + examples

Rules

figma_rules

Generate design system rule sheet — tokens, typography, components

Feature

Description

get_design_context

AI-optimized payload for a node — flex layout, token-resolved colors (var(--name)), typography with style names, component instances with variant properties. Best single call for design→React/Vue/Swift code.

get_component_map

List every component instance in a frame with componentSetName, variantLabel, properties, and suggestedImport path. Scaffold import statements in one call.

get_unmapped_components

Find component instances that have no description in Figma (no code mapping yet). Prompts AI to ask user for correct import paths.

New top-level MCP tool — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown rule sheet. Equivalent to official Figma MCP's create_design_system_rules. Call once at session start.

figma_read get_css { nodeId } → ready-to-use CSS string (flex, typography, fill, border, shadow, opacity, transform). One call, paste into code.

Resolved variables

get_node_detail now resolves boundVariables IDs → { name, resolvedType, value }. No more manual ID lookup.

Resolved style refs

fillStyleId / textStyleId now include fillStyle: { name, hex } and textStyle: { name, fontSize, fontFamily }.

Instance overrides detail

overrides: [{ id, overriddenFields: ["fills","characters",...] }] — full diff vs mainComponent, not just count.

INSTANCE nodes now expose set name ("Button") and variant label ("State=Primary, Size=Large") separately.

figma.create({ ..., insertIndex: 2 }) — insert node at exact position in parent, not always at end.

Typography tokens

setupDesignTokens({ fontSizes, fonts, textStyles }) — 1 call bootstrap full typography system with variable-bound text styles. Multi-mode (Compact/Comfortable/Large) supported.

applyTextStyle

Apply a local text style to a TEXT node by name in 1 call — auto-loads font.

STRING variables for fonts

applyVariable now binds fontFamily, fontStyle, characters (swap Inter → SF Pro via 1 variable).

Effects

effects: [{ type: "DROP_SHADOW" | "INNER_SHADOW" | "LAYER_BLUR" | "BACKGROUND_BLUR", ... }] on any node.

Gradient fills

fill: { type: "LINEAR_GRADIENT" | "RADIAL_GRADIENT", angle, stops } in create/modify.

Individual corner radii

topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius on FRAME/RECT.

8-digit hex + rgba alpha

fill: "#FFFFFF80" or "rgba(255,255,255,0.5)" — alpha auto-applied to paint opacity.

SVG arc (A) + commas

VECTOR d paths accept A arc command (auto-converted to cubic Bézier) and commas.

Icon libraries

7 free open-source libraries, iOS-filled first: Ionicons → Fluent → Bootstrap → Phosphor → Tabler Filled → Tabler Outline → Lucide.

Instance overrides

figma.instantiate({ overrides: { "LayerName": { text, fill, fontSize } } }) — override props per-layer.

Batch delete

figma.delete({ ids: [...] }) — delete multiple nodes in 1 round-trip.

Prototyping

setReactions — click/hover/press → navigate/overlay/swap with Smart Animate.

Scroll behavior

setScrollBehavior — HORIZONTAL / VERTICAL / BOTH overflow.

Variants & instance swap

setComponentProperties / swapComponent — variants + instance swap.

Component property definitions (v2.5.24)

addComponentProperty + bindComponentProperty — create TEXT / BOOLEAN / INSTANCE_SWAP properties on master components. Instance text overrides now actually re-measure auto-layout (button grows to fit longer label).

Multi-instance

Multiple Figma tabs connect simultaneously via sessions.

Prompt

What happens

"Draw a mobile login screen with social login buttons"

Creates a 390×844 frame with email/password inputs, Apple/Google buttons

"Read the selected frame and describe the design"

Extracts colors, typography, spacing from your selection

"Take a screenshot of the current frame"

Returns an inline image the AI can analyze

"Create a dark theme dashboard with KPI cards"

Draws a full dashboard layout with charts and stats

"Design an e-commerce product card"

Creates a product card with image, price, rating, CTA

"Draw a settings page with toggle switches"

Creates grouped settings with icons and toggles

Layer

Protection

VM sandbox

vm.runInContext() — blocks require, process, fs, fetch

Localhost only

Bridge binds localhost:38451, never exposed to network

Operation allowlist

56 predefined operations accepted (WRITE_OPS + READ_OPS)

Timeout

30s VM execution + 60-90s per plugin operation (adaptive by op type)

Body size limit

5 MB max per request

Session isolation

Multi-instance sessions scoped by Figma file ID

Operation

Description

figma.create({ type, ... })

Create FRAME / RECTANGLE / ELLIPSE / LINE / TEXT / SVG / VECTOR / IMAGE

figma.modify({ id, ... })

Update node properties (fill, size, text, layout, etc.)

figma.delete({ id })

Remove a single node

figma.delete({ ids: [...] })

Batch delete multiple nodes in one call

figma.query({ type?, name?, id? })

Find nodes by type, name, or ID

figma.append({ parentId, childId })

Move node into parent

Prop

Example

Notes

fill (solid)

"#6C5CE7" or "#6C5CE780" (8-digit hex with alpha) or "rgba(108,92,231,0.5)"

Alpha auto-extracted into paint opacity

fill (gradient)

{ type: "LINEAR_GRADIENT", angle: 135, stops: [{ pos: 0, color: "#7C3AED" }, { pos: 1, color: "#EC4899" }] }

Also RADIAL_GRADIENT

stroke, strokeWeight, strokeOpacity

Same hex/rgba rules

cornerRadius uniform

12

All 4 corners

Individual corners

topLeftRadius: 20, topRightRadius: 20, bottomLeftRadius: 0, bottomRightRadius: 0

Rounded top sheet pattern

effects array

[{ type: "DROP_SHADOW", color: "#00000026", offset: {x:0,y:8}, radius: 24, spread: 0 }]

Types: DROP_SHADOW, INNER_SHADOW, LAYER_BLUR, BACKGROUND_BLUR

TEXT center

textAlign: "CENTER" with explicit width

Auto-infers textAutoResize: "NONE" so centering works

VECTOR path

d: "M 150 7 A 143 143 0 1 1 29.26 226.62"

SVG A arc auto-converted to cubic Bézier; commas accepted

Operation

Description

figma.status()

Current Figma context info

figma.listPages()

List all pages

figma.setPage({ name })

Switch active page

figma.createPage({ name })

Add a new page

Operation

Description

figma.clone({ id, x?, y?, parentId? })

Duplicate a node with optional repositioning

figma.group({ nodeIds, name? })

Group multiple nodes

figma.ungroup({ id })

Ungroup a GROUP/FRAME

figma.flatten({ id })

Flatten/merge vectors into single path

figma.resize({ id, width, height })

Resize any node

figma.set_selection({ ids })

Programmatically select nodes

figma.set_viewport({ nodeId?, x?, y?, zoom? })

Navigate viewport

figma.batch({ operations })

Execute up to 50 ops in one call (10-25x faster)

Operation

Description

figma.listComponents()

List all components in document

figma.createComponent({ nodeId, name? })

Convert FRAME/GROUP → reusable Component

figma.instantiate({ componentId/Name, parentId, x, y })

Create component instance

figma.instantiate({ ..., overrides: { "LayerName": { text, fill, fontSize, visible, ... } } })

Instantiate with per-layer overrides

Operation

Description

figma.setupDesignTokens({ colors, numbers, fontSizes, fonts, textStyles, modes })

Bootstrap complete token system (idempotent) — colors + spacing + typography + text styles + multi-mode in 1 call

figma.createVariableCollection({ name })

Create variable collection ("Colors", "Spacing")

figma.createVariable({ name, collectionId, resolvedType, value })

Create COLOR/FLOAT/STRING/BOOLEAN variable

figma.addVariableMode({ collectionId, modeName })

Add mode (e.g. "dark", "compact")

figma.renameVariableMode({ collectionId, modeId, newName })

Rename a mode

figma.removeVariableMode({ collectionId, modeId })

Remove a mode

figma.setVariableValue({ variableId/Name, modeId/Name, value })

Set per-mode value

figma.modifyVariable({ variableName, value })

Change variable value — all bound nodes update

figma.applyVariable({ nodeId, field, variableId/Name })

Bind variable to a node property

figma.applyTextStyle({ nodeId, styleName })

Apply a local text style to a TEXT node by name (auto-loads font)

figma.setFrameVariableMode({ nodeId, collectionId, modeName })

Pin frame to a variable mode (Light/Dark, Compact/Large)

figma.clearFrameVariableMode({ nodeId, collectionId })

Reset frame to document default mode

figma.createPaintStyle({ name, color })

Create reusable paint style

figma.createTextStyle({ name, fontFamily, fontSize, ... })

Create reusable text style (manual — prefer setupDesignTokens.textStyles)

figma.ensure_library()

Create/get Design Library frame

figma.get_library_tokens()

Read library color + text tokens

Operation

Description

figma.loadImage(url, opts)

Download image → place on canvas

figma.loadIcon(name, opts)

Fetch SVG icon with 7-library fallback (iOS-filled first)

figma.loadIconIn(name, opts)

Icon inside centered circle background

Operation

Description

figma.setReactions({ id, reactions })

Add prototype interactions (ON_CLICK/ON_HOVER/ON_PRESS → NAVIGATE/OVERLAY/SWAP)

figma.getReactions({ id })

Read all prototype interactions from a node

figma.removeReactions({ id })

Clear all interactions from a node

Operation

Description

figma.setScrollBehavior({ id, overflowDirection })

Set overflow scrolling: NONE / HORIZONTAL / VERTICAL / BOTH

Operation

Description

figma.setComponentProperties({ id, properties })

Set variant, boolean, text, or instance swap properties on an INSTANCE

figma.swapComponent({ id, componentId })

Swap the main component of an instance

figma.getComponentProperties({ id })

Read all properties + definitions from component/instance

Operation

Description

get_selection

Full design tree of selected node(s) + design tokens

get_design

Full node tree for a frame/page (depth param: default 10, or "full")

get_page_nodes

Top-level frames on the current page

screenshot

Export node as PNG — displays inline in Claude Code

export_svg

Export node as SVG markup

export_image

Export node as base64 PNG/JPG — for saving to disk (format, scale params)

get_design_context

AI-optimized design→code payload — flex layout, token-resolved fills as var(--name), typography with style names, component instances with variant properties + componentsUsed / tokensUsed summaries. Best single call for generating React/Vue/Swift code.

get_component_map

Component instance map — every INSTANCE in a frame with componentSetName, variantLabel, properties, and suggestedImport path. Deduplicates into uniqueComponents[] with usage counts.

get_unmapped_components

Code-mapping audit — lists instances with no description in Figma (unmapped[]). Use to prompt user for correct import paths before code generation.

get_node_detail

Structured properties for single node — fills, layout, typography, effects, bound variables (resolved to name+value), style refs (resolved to name+hex), instance overrides (full field list), componentSetName + variantLabel

get_css

Ready-to-use CSS string for a node — background, flex, border, radius, shadow, typography, opacity, transform. Best for design-to-code.

get_styles

All local paint, text, effect, grid styles

get_local_components

Component listing with descriptions + variant properties

get_viewport

Current viewport position, zoom, bounds

get_variables

Local variables (Design Tokens) — collections, modes, values

search_nodes

Find nodes by type, name, fill color, font, size — supports includeHidden

scan_design

Progressive scan for large files — all text, colors, fonts, images, icons