figma-mcp-go

# figma-mcp-go > Skill by [ara.so](https://ara.so) — MCP Skills collection An open-source MCP server that provides full read/write access to Figma files through a plugin bridge, bypassing REST API rate limits. Built in Go, it enables AI tools like Claude, Cursor, and GitHub Copilot to automate design workflows, create components, modify styles, manage variables, and export designs to code. ## What It Does - **No API Token Required**: Works through a Figma plugin, avoiding REST API limits (6 calls/month on free plans) - **73 Tools**: Complete CRUD operations for frames, components, text, styles, variables, prototypes, and more - **Bidirectional**: Read design context and write changes back to live Figma files - **Export**: Screenshot nodes, generate PDFs, export design tokens as JSON/CSS - **Built-in Strategies**: Includes MCP prompts for design best practices ## Installation ### 1. Configure MCP Server **Claude Code CLI:** ```bash claude mcp add -s project figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest ``` **Codex CLI:** ```bash codex mcp add figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest ``` **Cursor / VS Code / GitHub Copilot (`.vscode/mcp.json`):** ```json { "servers": { "figma-mcp-go": { "type": "stdio", "command": "npx", "args": ["-y", "@vkhanhqui/figma-mcp-go"] } } } ``` **Claude Desktop (`.mcp.json`):** ```json { "mcpServers": { "figma-mcp-go": { "command": "npx", "args": ["-y", "@vkhanhqui/figma-mcp-go"] } } } ``` ### 2. Install Figma Plugin 1. Download [plugin.zip](https://github.com/vkhanhqui/figma-mcp-go/releases) 2. Open Figma Desktop → **Plugins** → **Development** → **Import plugin from manifest** 3. Select `manifest.json` from the extracted ZIP 4. Run the plugin inside any Figma file (it must stay open while using MCP tools) ## Core Workflows ### Reading Design Context **Get current page structure:** ```typescript // Use get_design_context for depth-limited tree with detail control const context = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "get_design_context", arguments: { rootNodeId: "0:1", // page ID or specific frame maxDepth: 3, detail: "compact" // minimal | compact | full } }); ``` **Get metadata and page list:** ```typescript const metadata = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "get_metadata", arguments: {} }); const pages = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "get_pages", arguments: {} }); ``` **Search for nodes:** ```typescript const results = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "search_nodes", arguments: { rootNodeId: "0:1", nameSubstring: "Button", types: ["COMPONENT", "INSTANCE"] } }); ``` ### Creating Design Elements **Create a frame with auto-layout:** ```typescript const frame = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "create_frame", arguments: { name: "Hero Section", x: 0, y: 0, width: 1440, height: 600, fills: "#0066FF", layoutMode: "VERTICAL", primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER", itemSpacing: 24, paddingTop: 48, paddingRight: 48, paddingBottom: 48, paddingLeft: 48 } }); ``` **Create text node:** ```typescript const text = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "create_text", arguments: { characters: "Welcome to Our Platform", fontFamily: "Inter", fontStyle: "Bold", fontSize: 48, x: 100, y: 100, parentId: frame.id // optional, parent frame } }); ``` **Import image from base64:** ```typescript const image = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "import_image", arguments: { base64Data: "iVBORw0KGgoAAAANSUhEUg...", // without data:image prefix x: 0, y: 0, width: 800, height: 600, name: "Hero Image", parentId: frame.id } }); ``` ### Modifying Existing Nodes **Update text content:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "set_text", arguments: { nodeId: "123:456", characters: "Updated heading text" } }); ``` **Set fills and strokes:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "set_fills", arguments: { nodeIds: ["123:456", "123:457"], color: "#FF5733" } }); await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "set_strokes", arguments: { nodeId: "123:456", color: "#000000", weight: 2 } }); ``` **Batch find and replace text:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "find_replace_text", arguments: { rootNodeId: "0:1", // search entire page findText: "Company Name", replaceText: "Acme Corp", useRegex: false, caseSensitive: false } }); ``` **Resize and reposition:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "resize_nodes", arguments: { nodeIds: ["123:456"], width: 1200, height: 800 } }); await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "move_nodes", arguments: { nodeIds: ["123:456"], x: 200, y: 300 } }); ``` ### Working with Components **Create component from frame:** ```typescript const component = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "create_component", arguments: { nodeId: "123:456", // must be a FRAME name: "Button/Primary" } }); ``` **Swap component instance:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "swap_component", arguments: { instanceId: "123:789", newComponentId: "456:123" } }); ``` **Detach instance:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "detach_instance", arguments: { nodeIds: ["123:789"] } }); ``` ### Styles and Variables **Create paint style:** ```typescript const style = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "create_paint_style", arguments: { name: "Colors/Primary/500", color: "#0066FF" } }); ``` **Create text style:** ```typescript const textStyle = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "create_text_style", arguments: { name: "Heading/H1", fontFamily: "Inter", fontStyle: "Bold", fontSize: 48, lineHeight: 56, letterSpacing: -0.5 } }); ``` **Apply style to node:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "apply_style_to_node", arguments: { nodeId: "123:456", styleId: style.id, styleType: "FILL" // FILL | STROKE | TEXT | EFFECT | GRID } }); ``` **Create variable collection:** ```typescript const collection = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "create_variable_collection", arguments: { name: "Spacing", initialModeName: "Default" } }); ``` **Create and bind variable:** ```typescript const variable = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "create_variable", arguments: { collectionId: collection.id, name: "spacing-md", resolvedType: "FLOAT" } }); await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "set_variable_value", arguments: { variableId: variable.id, modeId: collection.defaultModeId, value: 16 } }); await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "bind_variable_to_node", arguments: { nodeId: "123:456", variableId: variable.id, field: "itemSpacing" // fillColor | strokeColor | width | height | opacity | rotation | visible | cornerRadius | itemSpacing | paddingLeft | etc. } }); ``` ### Prototyping **Set prototype reactions:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "set_reactions", arguments: { nodeId: "123:456", reactions: [ { trigger: { type: "ON_CLICK" }, actions: [ { type: "NODE", destinationId: "123:789", navigation: "NAVIGATE", transition: { type: "DISSOLVE", duration: 0.3, easing: { type: "EASE_OUT" } } } ] } ], mode: "replace" // replace | append } }); ``` **Get reactions:** ```typescript const reactions = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "get_reactions", arguments: { nodeId: "123:456" } }); ``` ### Exporting **Take screenshot:** ```typescript const screenshot = await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "get_screenshot", arguments: { nodeId: "123:456", format: "PNG", scale: 2 } }); // Returns base64-encoded image ``` **Save screenshots to disk:** ```typescript await use_mcp_tool({ server_name: "figma-mcp-go", tool_name: "save_screenshots", arguments: {