This server acts as a Model Context Protocol (MCP) plugin that enables AI tools like Claude Desktop and Cursor to directly interact with Figma for comprehensive design automation and real-time manipulation.
Document Interaction: Analyze documents, retrieve selections, get node information, and list document styles
Element Creation: Create shapes (rectangles, frames, ellipses, polygons, stars), text elements, and component instances
Visual Modifications: Set fill/stroke colors, adjust positions/sizes, apply corner radius, configure auto-layout, and manage effects
Text Manipulation: Set content, font properties (name, size, weight), spacing, case, decorations, and load fonts asynchronously
Structure & Organization: Group, ungroup, clone, insert, and flatten nodes
Asset Management: Export nodes as images and scan text nodes
Component Integration: Access local and remote components from team libraries
Communication: Join channels for bidirectional communication between AI tools and Figma
Allows Claude Desktop and other AI tools to interact directly with Figma, enabling document analysis, element creation (shapes, text, frames), style modifications, text manipulation, and component management for AI-assisted design capabilities.
Allows GitHub Copilot to interact with Figma through the MCP protocol, enabling AI-assisted design capabilities directly from the Copilot interface.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Claude Talk to Figma MCP create a mobile login screen with a modern gradient background"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Enable your AI agents to read, analyze, and modify Figma designs.
Works with your favorite agentic tools:
Automate repetitive design tasks and maintain brand consistency without manual effort:
Automated accessibility audits - Detect and fix contrast issues in seconds
Bulk style updates - Change colors, typography, or spacing across the entire document with a single command
Visual hierarchy analysis - Get instant feedback on your design structure
Generate production-ready code directly from designs:
React/Vue/SwiftUI components - From design to code in one step
Code with design tokens - Keep design and development in sync
Reduce handoff friction - Fewer back-and-forth iterations with the design team
Key advantage: Unlike Figma's official MCP which requires a Dev Mode license, this MCP works with any Figma account (even free ones).
Related MCP server: Figma Console MCP Server
Accessibility:
"Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA"
Rebranding:
"Change #FF6B6B to #E63946 in all primary buttons throughout the document"
Design analysis:
"Analyze the visual hierarchy of this screen and suggest improvements based on design principles"
Developer handoff:
"Generate the React component for 'CardProduct' including PropTypes and styles in CSS modules"
Setup: 5 minutes | First automation: 2 minutes
Node.js installed
AI client:
Enables the Agent to send commands to Figma.
Open your terminal, navigate to the folder where you want to install the tool, and run:
npx claude-talk-to-figma-mcp💡 Tip: This command is an "all-in-one" (clones, installs, and starts). In subsequent sessions, if you're already inside the project folder
your-project/claude-talk-to-figma-mcp, you can simply runbun run socket.
Enables Figma to receive commands from the agent and return responses.
In Figma Desktop go to Menu → Plugins → Development → Import plugin from manifest → inside the folder where you installed the MCP, select src/claude_mcp_plugin/manifest.json
Enables the agent to use the MCP's read and modify tools.
Download claude-talk-to-figma-mcp.dxt (from Assets section of the latest release) and double-click. Claude configures itself automatically.
Open Cursor Settings → Tools & Integrations
Click "New MCP Server" to open the mcp.json file
Add this configuration:
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
}
}
}Save the file and restart Cursor
For other tools (Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code), you can follow the instructions in the "Configure your Agentic Tool" chapter of the detailed installation guide.
Open the plugin in Figma
Copy the channel ID (bold code inside the green box)
Type in the chat: Connect to Figma, channel {your-ID}
✅ Ready to design with AI!
To use the MCP again in day-to-day work, you don't need to repeat the entire process:
Start the socket: In the terminal, enter the project folder your-project/claude-talk-to-figma-mcp and run bun run socket (or npm run socket).
Open the plugin in Figma: You'll find it in your recent plugins list.
Connect the AI: Copy the channel ID and tell your agent: Connect to Figma, channel {your-ID}.
This MCP server supports safe parallel execution out of the box, allowing multiple AI agents (e.g. Claude Code's sub-agents or team swarms) to work simultaneously on your Figma file without locking up the plugin. A built-in command queue processes requests sequentially on the server side, preventing the Figma API from timing out.
Note: Because multiple agents can modify the document simultaneously, relying on implicit page context is unsafe. As a result, stateful commands like
set_current_pageare blocked. All agents must explicitly provide the intendedparentIdparameter when executing any creation or structural modification command (e.g.,create_frame,create_text).
(Special thanks to @mmabas77 for architecting and contributing this feature!)
If you prefer Docker or need to run the WebSocket server in a team environment, see the Docker installation guide in the detailed installation documentation.
Design analysis
Get document information, current selection, styles
Scan text, audit components, export assets
Element creation
Shapes, text, frames with full style control
Clone, group, organize elements
Modification
Colors, borders, corners, shadows
Auto-layout, advanced typography
Local components and team library components
Detailed installation — Manual setup, Cursor, Windsurf and other IDEs
Available commands — Complete tool reference
Troubleshooting — Common errors and how to fix them
Contributing — Architecture, testing, contribution guide
Changelog — Version history
Based on cursor-talk-to-figma-mcp by Sonny Lazuardi. Adapted for Claude Desktop and extended with new tools by Xúlio Zé.
If you want to know about all project contributions, you can visit the "Contributors" chapter of the contribution guide.
✅ Stable production - Tool ready for daily use in design and development teams
🚀 Under active development:
Complete support for Figma Variables
Enhanced export to Tailwind CSS/SwiftUI
Propose new ones on GitHub Issues
Your feedback and contributions keep the project alive. ❤️
Adjust image position, scale, and rotation within node. Rotates the IMAGE inside the node, not the node itself.
Inputs: nodeId (required), scaleMode, rotation, translateX, +2 more.
Bind a variable to a node property in Figma. Call once per field — for multiple fields, call multiple times.
Inputs: nodeId (required), variableId (required), field (required).
Perform a boolean operation (union, subtract, intersect, exclude) on two or more nodes. All nodes must share the same parent.
Inputs: nodeIds (required), operation (required), name.
Clone an existing node in Figma
Inputs: nodeId (required), x, y, parentId.
Convert a group or shape node into a frame in Figma. Preserves position, size, visual properties, and children. Useful for converting groups into auto-layout-capable frames.
Inputs: nodeId (required).
Convert an existing node (frame, group, etc.) into a reusable component in Figma
Inputs: nodeId (required), name, parentId.
Create an instance of a component in Figma
Inputs: componentKey (required), x (required), y (required), parentId.
Create a component set (variants) from multiple component nodes in Figma
Inputs: componentIds (required), name, parentId.
Create a connector (arrow or line) in FigJam. Connectors can link two existing nodes by ID, or connect arbitrary canvas positions. Use this to draw flow arrows between stickies, shapes, etc.
Inputs: startNodeId, startX, startY, endNodeId, +9 more.
Create a reusable effect style (shadows, blurs) in Figma's local styles.
Inputs: name (required), effects (required).
Create a new ellipse in Figma
Inputs: x (required), y (required), width (required), height (required), +5 more.
Create a new frame in Figma
Inputs: x (required), y (required), width (required), height (required), +5 more.
Create a new page in the current Figma document
Inputs: name (required).
Create a reusable color/paint style (SOLID) in Figma's local styles.
Inputs: name (required), r (required), g (required), b (required), +1 more.
Create a new polygon in Figma
Inputs: x (required), y (required), width (required), height (required), +6 more.
Create a new rectangle in Figma
Inputs: x (required), y (required), width (required), height (required), +5 more.
Create a FigJam section. Sections are used to group and organise content on the FigJam board. They appear as labelled coloured regions.
Inputs: x (required), y (required), width, height, +3 more.
Create a FigJam shape with text inside. Useful for flowcharts, diagrams, and process maps. Supported shapes: SQUARE, ELLIPSE, ROUNDED_RECTANGLE, DIAMOND, TRIANGLE_UP, TRIANGLE_DOWN, PARALLELOGRAM_RIGHT, PARALLELOGRAM_LEFT.
Inputs: x (required), y (required), width, height, +5 more.
Create a new star in Figma
Inputs: x (required), y (required), width (required), height (required), +7 more.
Create a sticky note in a FigJam board. Sticky notes are the primary way to add text content in FigJam.
Inputs: x (required), y (required), text (required), color, +3 more.
Create a new text element in Figma
Inputs: x (required), y (required), text (required), fontSize, +7 more.
Create a reusable text style (typography) in Figma's local styles. This is useful for design system consistency.
Inputs: name (required), fontFamily (required), fontSize (required), fontStyle, +6 more.
Delete a node from Figma
Inputs: nodeId (required).
Delete a page from the current Figma document
Inputs: pageId (required).
Detach a component instance, converting it into a regular frame. This breaks the link with the main component.
Inputs: instanceId (required).
Duplicate an existing page in the Figma document, creating a complete copy of all its contents
Inputs: pageId (required), name.
Export a node as an image from Figma
Inputs: nodeId (required), format, scale.
Flatten a node in Figma (e.g., for boolean operations or converting to path)
Inputs: nodeId (required).
Read annotations from a node in Figma. Uses the proposed Annotations API.
Inputs: nodeId (required).
Get detailed information about the current Figma document
Inputs: no named parameters.
Get all FigJam-specific elements (stickies, connectors, shapes with text, sections, stamps) on the current page. Use this to read the contents of a FigJam board.
Inputs: no named parameters.
Read layout grids from a frame node in Figma
Inputs: nodeId (required).
Read guides from a page in Figma
Inputs: pageId (required).
Extract image metadata from a node
Inputs: nodeId (required).
Get all local components from the Figma document
Inputs: no named parameters.
Get detailed information about a specific node in Figma
Inputs: nodeId (required), depth.
Get detailed information about multiple nodes in Figma
Inputs: nodeIds (required), depth.
Get all pages in the current Figma document
Inputs: no named parameters.
Read all prototype interactions (reactions) from a node in Figma. Useful for debugging and inspecting existing interactions.
Inputs: nodeId (required).
Get available components from team libraries in Figma
Inputs: no named parameters.
Get information about the current selection in Figma
Inputs: no named parameters.
Get text segments with specific styling in a text node
Inputs: nodeId (required), property (required).
Get all styles from the current Figma document
Inputs: no named parameters.
Export a single node as an SVG string from Figma. Returns the SVG markup including all nested children.
Inputs: nodeId (required).
List all variable collections and their variables in the current Figma file. Returns collections with their modes and variables.
Inputs: no named parameters.
Group nodes in Figma
Inputs: nodeIds (required), name.
Insert a child node inside a parent node in Figma
Inputs: parentId (required), childId (required), index.
Join a specific channel to communicate with Figma
Inputs: channel (required).
Load a font asynchronously in Figma
Inputs: family (required), style.
Move a node to a new position in Figma
Inputs: nodeId (required), x (required), y (required).
Rename a node (frame, component, group, etc.) in Figma
Inputs: nodeId (required), name (required).
Rename an existing page in the Figma document
Inputs: pageId (required), name (required).
Change the z-order (layer order) of a node within its parent. Distinct from insert_child which re-parents a node — reorder_node changes position within the same parent.
Inputs: nodeId (required), position, index.
Replace existing image on node with new image while preserving transform
Inputs: nodeId (required), newImageSource (required), sourceType (required), preserveTransform.
Resize a node in Figma
Inputs: nodeId (required), width (required), height (required).
Rotate a node in Figma by a specified angle in degrees (clockwise). Use relative=true to add to the current rotation instead of setting an absolute value. Note: locked nodes can still be rotated — the Plugin API bypasses the UI lock by design.
Inputs: nodeId (required), angle (required), relative.
Scan all text nodes in the selected Figma node
Inputs: nodeId (required).
Add an annotation label to a node in Figma. Uses the proposed Annotations API — requires Figma Desktop with enableProposedApi.
Inputs: nodeId (required), label (required).
Configure auto layout properties for a node in Figma
Inputs: nodeId (required), layoutMode (required), paddingTop, paddingBottom, +7 more.
Set the corner radius of a node in Figma
Inputs: nodeId (required), radius (required), corners.
DEPRECATED — this stateful command is blocked by the relay server. Instead, pass the target page's node ID as parentId on creation commands (e.g., create_rectangle, create_frame). Use get_pages to discover page IDs.
Inputs: pageId (required).
Set the visual effects of a node in Figma
Inputs: nodeId (required), effects (required).
Apply an effect style to a node in Figma
Inputs: nodeId (required), effectStyleId (required).
Set the fill color of a node in Figma. Alpha component defaults to 1 (fully opaque) if not specified. Use alpha 0 for fully transparent.
Inputs: nodeId (required), r (required), g (required), b (required), +1 more.
Set the font name and style of a text node in Figma
Inputs: nodeId (required), family (required), style.
Set the font size of a text node in Figma
Inputs: nodeId (required), fontSize (required).
Set the font weight of a text node in Figma
Inputs: nodeId (required), weight (required).
Set a gradient fill on a node in Figma. Supports linear, radial, angular, and diamond gradients. Replaces all existing fills (same behavior as set_fill_color).
Inputs: nodeId (required), type (required), stops (required), gradientTransform.
Apply layout grids to a frame node in Figma. Supports columns, rows, and grid patterns.
Inputs: nodeId (required), grids (required).
Set guides on a page in Figma. Replaces all existing guides on the page.
Inputs: pageId (required), guides (required).
Set an image fill on a node from base64-encoded image data. Supports PNG, JPEG, GIF, WebP. Max ~5MB after decode.
Inputs: nodeId (required), imageData (required), scaleMode.
Apply image to node from URL or base64 data
Inputs: nodeId (required), imageSource (required), sourceType (required), scaleMode.
Apply color and light adjustments to image fills
Inputs: nodeId (required), exposure, contrast, saturation, +4 more.
Change the variant properties of a component instance without recreating it. This preserves instance overrides and is more efficient than delete + create workflow.
Inputs: nodeId (required), properties (required).
Set the letter spacing of a text node in Figma
Inputs: nodeId (required), letterSpacing (required), unit.
Set the line height of a text node in Figma
Inputs: nodeId (required), lineHeight (required), unit.
Set multiple text contents parallelly in a node
Inputs: nodeId (required), text (required).
Set visibility, lock state, and/or opacity of a node in Figma. Only provided properties are changed; omitted properties remain unchanged.
Inputs: nodeId (required), visible, locked, opacity.
Set the paragraph spacing of a text node in Figma
Inputs: nodeId (required), paragraphSpacing (required).
Set prototype interactions (reactions) on a node in Figma. Use this to add hover effects, click interactions, etc. For component variants, set on the default variant to add 'While hovering -> Change to hover variant' interactions.
Inputs: nodeId (required), reactions (required).
Recursively change all stroke and fill colors of a node and all its descendants. Works like Figma's 'Selection colors' feature - perfect for recoloring icon instances.
Inputs: nodeId (required), r (required), g (required), b (required), +1 more.
Update the text content of an existing FigJam sticky note.
Inputs: nodeId (required), text (required).
Set the stroke color of a node in Figma (defaults: opacity 1, weight 1)
Inputs: nodeId (required), r (required), g (required), b (required), +2 more.
Import an SVG string as a vector node in Figma. The SVG is sanitized (scripts and external resources are stripped) before import. Max 500KB.
Inputs: svgString (required), x, y, name, +1 more.
Set the text alignment of a text node in Figma. Use textAlignHorizontal RIGHT for RTL/Arabic text.
Inputs: nodeId (required), textAlignHorizontal, textAlignVertical.
Set the text case of a text node in Figma
Inputs: nodeId (required), textCase (required).
Set the text content of an existing text node in Figma
Inputs: nodeId (required), text (required).
Set the text decoration of a text node in Figma
Inputs: nodeId (required), textDecoration (required).
Apply a text style to a text node in Figma
Inputs: nodeId (required), textStyleId (required).
Create or update a variable in a Figma variable collection. Creates the collection if collectionName is provided and it doesn't exist.
Inputs: name (required), resolvedType (required), collectionId, collectionName, +2 more.
Switch the variable mode on a node for a specific collection. This changes which mode's values are used for bound variables.
Inputs: nodeId (required), collectionId (required), modeId (required).
Ungroup nodes in Figma
Inputs: nodeId (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 92 tools
Many tools have overlapping purposes, such as set_image, set_image_fill, replace_image_fill, and set_image_filters. Similarly, set_text_content and set_multiple_text_contents are redundant. The large number of similar setters (set_fill_color, set_stroke_color, etc.) makes it difficult for an agent to distinguish between them without careful reading.
Most tools follow a consistent verb_noun pattern (e.g., create_rectangle, set_font_size, get_pages). A few outliers like boolean_operation (noun style) and set_multiple_text_contents (longer phrase) exist, but the overall naming is predictable and clear.
With 92 tools, the server is significantly over-scoped. This large number leads to redundancy and cognitive overload. Most MCP servers with good coherence have 3-15 tools; 92 is an extreme mismatch for the apparent domain.
The tool set covers a wide range of Figma operations including creation, reading, updating, and deleting nodes and pages, as well as styles, variables, and FigJam elements. However, there are notable gaps: no tools to delete or update styles, no tool to delete variables, and no global search for nodes. The coverage is broad but not fully complete.
The Figma MCP server brings Figma design context directly into your AI workflow.
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
Connect AI assistants to your approved computer for files, commands, browser and desktop tasks.
Use your Mac, Windows or Linux computer from ChatGPT, Claude or Codex: files, commands, documents.
