figma-mcp-go

Add a new mode to an existing variable collection (e.g. Light/Dark, Desktop/Mobile).

Apply an existing local style (paint, text, effect, or grid) to a node, linking the node to that style.

Bind a local variable to a node property, so the property is driven by the variable's value. Use 'fillColor' to bind a COLOR variable to the node's fill color. Use other fields (opacity, width, height, cornerRadius, itemSpacing, paddingTop, paddingRight, paddingBottom, paddingLeft) for FLOAT variables.

Clone an existing node, optionally repositioning it or placing it in a new parent.

Convert an existing FRAME node into a reusable COMPONENT. The frame is replaced in place by the new component.

Create a new local effect style (drop shadow, inner shadow, or blur).

Create a new ellipse (circle/oval) on the current page or inside a parent node.

Create a new frame on the current page or inside a parent node.

Create a new local layout grid style.

Create a new local paint style with a solid fill color.

Create a new rectangle on the current page or inside a parent node.

Create a new text node on the current page or inside a parent node.

Create a new local text style.

Create a new variable in a collection.

Create a new local variable collection.

Delete one or more nodes. This cannot be undone via MCP — use with care.

Delete a style (paint, text, effect, or grid) by its ID.

Delete a variable or an entire variable collection. Provide either variableId or collectionId.

Detach one or more component instances, converting them to plain frames. The link to the main component is broken; all visual properties are preserved.

Export multiple frames as a single multi-page PDF file. Each frame becomes one page in order. Ideal for pitch decks, proposals, and slide exports.

Export all design tokens (variables and paint styles) as JSON or CSS custom properties. Ideal for bridging Figma variables into your codebase.

Get all dev-mode annotations in the current document or on a specific node.

Get a depth-limited tree of the current selection or page. More token-efficient than get_document for large files.

Get the current Figma page document tree

List all fonts used in the current page, sorted by usage frequency. Useful for understanding typography without scanning all text nodes.

Get all components defined in the current Figma file.

Get metadata about the current Figma document: file name, pages, current page

Get a specific Figma node by ID. Must use colon format e.g. '4029:12345', never hyphens.

Get detailed information about multiple Figma nodes by ID in a single call.

List all pages in the document with their IDs and names. Lightweight alternative to get_document.

Get prototype/interaction reactions on a node. Useful for understanding interactive prototypes.

Export a screenshot of selected or specific nodes. Returns base64-encoded image data.

Get the currently selected nodes in Figma

Get all local styles in the document: paint, text, effect, and grid styles

Get all local variable definitions: collections, modes, and values. Variables are Figma's design token system.

Get the current Figma viewport: scroll center, zoom level, and visible bounds.

Group two or more nodes into a GROUP. All nodes must share the same parent.

Import a base64-encoded image into Figma as a rectangle with an image fill. Use get_screenshot to capture images or provide your own base64 PNG/JPG.

Move one or more nodes to an absolute position on the canvas.

Switch the active Figma page. Provide either pageId or pageName.

Remove prototype reactions from a node. Omit indices to remove all reactions. Provide a zero-based indices array to remove specific reactions (use get_reactions first to see current indices).

Rename a node.

Resize one or more nodes. Provide width, height, or both.

Export screenshots for multiple nodes and save them to the local filesystem. Returns metadata only (no base64).

Find all nodes matching specific types (e.g. FRAME, COMPONENT, INSTANCE) within a subtree.

Scan all TEXT nodes in a subtree. Useful for extracting all copy from a component or frame.

Search for nodes by name substring and/or type within a subtree. Avoids dumping the entire document tree.

Set or update auto-layout (flex) properties on an existing frame.

Set corner radius on one or more nodes. Provide a uniform cornerRadius or individual per-corner values.

Set the fill color of a node.

Set the opacity of one or more nodes (0 = fully transparent, 1 = fully opaque).

Set prototype reactions on a node. Use mode "replace" (default) to overwrite all reactions, or "append" to add to existing ones.

Supported triggers: ON_CLICK, ON_HOVER, ON_PRESS, ON_DRAG, AFTER_TIMEOUT, MOUSE_ENTER, MOUSE_LEAVE, MOUSE_UP, MOUSE_DOWN Supported action types: NODE (navigation), BACK, CLOSE, URL NODE navigation values: NAVIGATE, OVERLAY, SCROLL_TO, SWAP, CHANGE_TO Transition types: DISSOLVE, SMART_ANIMATE, MOVE_IN, MOVE_OUT, PUSH, SLIDE_IN, SLIDE_OUT DISSOLVE / SMART_ANIMATE: {"type":"DISSOLVE","duration":0.3,"easing":{"type":"EASE_OUT"}} Directional (PUSH, MOVE_IN, MOVE_OUT, SLIDE_IN, SLIDE_OUT): also require "direction" (LEFT|RIGHT|TOP|BOTTOM) and "matchLayers" (bool): {"type":"PUSH","direction":"LEFT","matchLayers":false,"duration":0.3,"easing":{"type":"EASE_OUT"}}

Each reaction has a "trigger" and an "actions" array (plural). Each action in the array is an Action object.

Example — on-click navigate with dissolve: {"nodeId":"1:2","reactions":[{"trigger":{"type":"ON_CLICK"},"actions":[{"type":"NODE","destinationId":"1:3","navigation":"NAVIGATE","transition":{"type":"DISSOLVE","duration":0.3,"easing":{"type":"EASE_OUT"}},"preserveScrollPosition":false}]}]}

Example — on-click navigate with push (directional transition): {"nodeId":"1:2","reactions":[{"trigger":{"type":"ON_CLICK"},"actions":[{"type":"NODE","destinationId":"1:3","navigation":"NAVIGATE","transition":{"type":"PUSH","direction":"LEFT","matchLayers":false,"duration":0.3,"easing":{"type":"EASE_OUT"}},"preserveScrollPosition":false}]}]}

Example — open URL on hover: {"nodeId":"1:2","reactions":[{"trigger":{"type":"ON_HOVER"},"actions":[{"type":"URL","url":"https://example.com"}]}]}

Example — auto-advance after 3 seconds: {"nodeId":"1:2","reactions":[{"trigger":{"type":"AFTER_TIMEOUT","timeout":3000},"actions":[{"type":"NODE","destinationId":"1:4","navigation":"NAVIGATE","transition":{"type":"DISSOLVE","duration":0.3,"easing":{"type":"EASE_OUT"}},"preserveScrollPosition":false}]}]}

Example — go back on click: {"nodeId":"1:2","reactions":[{"trigger":{"type":"ON_CLICK"},"actions":[{"type":"BACK"}]}]}

Set the stroke color and weight of a node.

Update the text content of an existing TEXT node.

Set a variable's value for a specific mode.

Swap the main component of an existing INSTANCE node, replacing it with a different component while keeping position and size.

Ungroup one or more GROUP nodes, moving their children to the parent and removing the group.

Update the name, color, or description of an existing paint style.