MCPInstall

figma-mcp-go-design-automation

by reason-machinesFrontend & Design

Automate Figma designs with AI using MCP server - no API limits, full read/write via plugin bridge

Installs
148
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill figma-mcp-go-design-automation
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads figma-mcp-go-design-automation automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Figma MCP Go Design Automation

Skill by ara.so — Design Skills collection

Overview

figma-mcp-go is an MCP (Model Context Protocol) server that provides AI agents with direct read/write access to Figma files through a plugin bridge. Unlike other Figma integrations, it doesn't use the Figma REST API, so there are no rate limits or token requirements. This makes it ideal for free Figma users and rapid AI-driven design automation.

Key capabilities:

  • 73 tools for creating, modifying, and reading Figma designs
  • Works via local plugin bridge (no API calls)
  • Full access to styles, variables, components, prototypes
  • Export to images, PDFs, and design tokens
  • Integrated design strategy prompts for best practices

Installation

The MCP server runs via npx with no build step required. You also need to install a Figma plugin to establish the bridge.

Step 1: Configure MCP Server

For Claude Code CLI:

claude mcp add -s project figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest

For Cursor / VS Code / GitHub Copilot (.vscode/mcp.json):

{
  "servers": {
    "figma-mcp-go": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@vkhanhqui/figma-mcp-go"]
    }
  }
}

For Claude Desktop (.mcp.json):

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@vkhanhqui/figma-mcp-go"]
    }
  }
}

Step 2: Install Figma Plugin

  1. Download plugin.zip from GitHub releases
  2. In Figma Desktop: Plugins → Development → Import plugin from manifest
  3. Select manifest.json from the extracted zip
  4. Open any Figma file and run the plugin to activate the bridge

Core Concepts

Tool Categories

  • Create: create_frame, create_rectangle, create_text, create_component, etc.
  • Modify: set_text, set_fills, set_auto_layout, resize_nodes, etc.
  • Delete: delete_nodes, delete_page, delete_style
  • Read: get_document, get_selection, get_styles, get_variable_defs
  • Export: get_screenshot, save_screenshots, export_frames_to_pdf, export_tokens
  • Prototype: set_reactions, remove_reactions
  • Variables: create_variable_collection, bind_variable_to_node, etc.

Node IDs

Most tools require node IDs. Get them with:

  • get_selection - Currently selected nodes
  • get_document - Full page tree
  • search_nodes - Find by name/type
  • get_design_context - Depth-limited tree

Common Patterns

Pattern 1: Create a Simple Layout

// Get current page context
const context = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_metadata",
  arguments: {}
});

// Create a parent frame
const frame = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_frame",
  arguments: {
    name: "Hero Section",
    x: 100,
    y: 100,
    width: 1200,
    height: 600,
    fills: [{type: "SOLID", color: {r: 0.95, g: 0.95, b: 0.95}}],
    autoLayout: {
      mode: "VERTICAL",
      primaryAxisAlignItems: "CENTER",
      counterAxisAlignItems: "CENTER",
      paddingTop: 40,
      paddingBottom: 40,
      paddingLeft: 60,
      paddingRight: 60,
      itemSpacing: 24
    }
  }
});

// Add text inside
const title = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_text",
  arguments: {
    characters: "Welcome to Our Platform",
    x: 0,
    y: 0,
    parentId: frame.nodeId,
    fontSize: 48,
    fontWeight: "Bold"
  }
});

Pattern 2: Batch Update Text Content

// Find all text nodes
const textNodes = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "scan_text_nodes",
  arguments: {
    rootNodeId: "parentFrameId"
  }
});

// Replace placeholder text
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "find_replace_text",
  arguments: {
    rootNodeId: "parentFrameId",
    findText: "{{product_name}}",
    replaceWith: "Acme Widget Pro",
    useRegex: false,
    caseSensitive: false
  }
});

Pattern 3: Apply Design System Styles

// Get available styles
const styles = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_styles",
  arguments: {}
});

// Create a paint style
const primaryColor = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_paint_style",
  arguments: {
    name: "Primary/500",
    color: "#3B82F6"
  }
});

// Apply to nodes
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "apply_style_to_node",
  arguments: {
    nodeId: "buttonNodeId",
    styleId: primaryColor.styleId,
    styleType: "FILL"
  }
});

Pattern 4: Create Variables and Bind Them

// Create a variable collection for theming
const collection = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_variable_collection",
  arguments: {
    name: "Theme",
    initialModeName: "Light"
  }
});

// Add Dark mode
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "add_variable_mode",
  arguments: {
    collectionId: collection.collectionId,
    modeName: "Dark"
  }
});

// Create a color variable
const bgColor = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_variable",
  arguments: {
    collectionId: collection.collectionId,
    name: "Background",
    resolvedType: "COLOR"
  }
});

// Set values for both modes
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_variable_value",
  arguments: {
    variableId: bgColor.variableId,
    modeId: "Light",
    value: {r: 1, g: 1, b: 1}
  }
});

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_variable_value",
  arguments: {
    variableId: bgColor.variableId,
    modeId: "Dark",
    value: {r: 0.1, g: 0.1, b: 0.1}
  }
});

// Bind to a frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "bind_variable_to_node",
  arguments: {
    nodeId: "frameNodeId",
    variableId: bgColor.variableId,
    field: "fillColor"
  }
});

Pattern 5: Export Designs

// Export a single frame as screenshot
const screenshot = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_screenshot",
  arguments: {
    nodeId: "frameNodeId",
    format: "PNG",
    scale: 2
  }
});
// Returns base64-encoded image

// Save multiple frames to disk
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "save_screenshots",
  arguments: {
    nodeIds: ["frame1", "frame2", "frame3"],
    format: "PNG",
    scale: 2,
    outputDir: "/path/to/exports"
  }
});

// Export frames as PDF
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "export_frames_to_pdf",
  arguments: {
    frameIds: ["frame1", "frame2"],
    outputPath: "/path/to/design.pdf"
  }
});

// Export design tokens
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "export_tokens",
  arguments: {
    format: "JSON",
    outputPath: "/path/to/tokens.json"
  }
});

Pattern 6: Create Prototype Interactions

// Add a click reaction to navigate to another frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_reactions",
  arguments: {
    nodeId: "buttonNodeId",
    reactions: [{
      trigger: {type: "ON_CLICK"},
      action: {
        type: "NODE",
        destinationId: "targetFrameId",
        navigation: "NAVIGATE",
        transition: {
          type: "DISSOLVE",
          duration: 0.3,
          easing: {type: "EASE_IN_OUT"}
        }
      }
    }],
    mode: "replace"
  }
});

// Get existing reactions
const reactions = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_reactions",
  arguments: {
    nodeId: "buttonNodeId"
  }
});

Pattern 7: Component Management

// Convert a frame to a component
const component = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_component",
  arguments: {
    frameNodeId: "frameToConvert"
  }
});

// Get all local components
const components = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_local_components",
  arguments: {}
});

// Swap an instance to use a different component
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "swap_component",
  arguments: {
    instanceNodeId: "instanceId",
    newComponentId: "newComponentId"
  }
});

// Detach instance to plain frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "detach_instance",
  arguments: {
    instanceNodeIds: ["instance1", "instance2"]
  }
});

MCP Prompts

The server includes built-in prompts for design strategies. Use them to get AI guidance:

// Get best practices for reading designs
const readStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "read_design_strategy"
});

// Get best practices for creating designs
const designStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "design_strategy"
});

// Chunked text replacement strategy
const textStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "text_replacement_strategy"
});

Advanced Techniques

Auto-Layout with Complex Constraints

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_auto_layout",
  arguments: {
    nodeId: "frameId",
    mode: "HORIZONTAL",
    primaryAxisAlignItems: "SPACE_BETWEEN",
    counterAxisAlignItems: "CENTER",
    paddingTop: 16,
    paddingBottom: 16,
    paddingLeft: 24,
    paddingRight: 24,
    itemSpacing: 12,
    primaryAxisSizingMode: "AUTO",
    counterAxisSizingMode: "FIXED"
  }
});

Responsive Constraints

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_constraints",
  arguments: {
    nodeIds: ["childNodeId"],
    constraints: {
      horizontal: "STRETCH",
      vertical: "MIN"
    }
  }
});

Blend Modes and Effects

// Set blend mode
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_blend_mode",
  arguments: {
    nodeIds: ["overlayNodeId"],
    blendMode: "MULTIPLY"
  }
});

// Add drop shadow
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_effects",
  arguments: {
    nodeId: "cardNodeId",
    effects: [{
      type: "DROP_SHADOW",
      color: {r: 0, g: 0, b: 0, a: 0.1},
      offset: {x: 0, y: 4},
      radius: 8,
      visible: true
    }]
  }
});

Batch Operations

// Rename multiple nodes with find/replace
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "batch_rename_nodes",
  arguments: {
    nodeIds: ["node1", "node2", "node3"],
    operation: "findReplace",
    findText: "old",
    replaceWith: "new"
  }
});

// Clone and reposition
const clones = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "clone_node",
  arguments: {
    nodeId: "sourceNodeId",
    count: 5,
    offsetX: 20,
    offsetY: 20
  }
});

Troubleshooting

Plugin Not Connecting

Symptom: MCP tools timeout or return "plugin not ready"

Solutions:

  1. Ensure Figma Desktop (not browser) is running
  2. Verify plugin is loaded: Plugins → Development → figma-mcp-go
  3. Restart both the plugin and your AI tool
  4. Check Figma Developer Console for errors (Plugins → Development → Open Console)

Node ID Not Found

Symptom: "Node with ID X not found"

Solutions:

  1. Use get_selection to verify current selection IDs
  2. Use search_nodes to find nodes by name
  3. Ensure you're on the correct page with navigate_to_page
  4. Check if node was deleted or is on a different page

Font Not Loading

Symptom: Text creation fails with "font not available"

Solutions:

  1. The plugin auto-loads fonts, but they must be installed on your system
  2. Use get_fonts to see available fonts in the current file
  3. Specify common fonts: fontFamily: "Inter" or "Roboto"
  4. Check Figma's font loading status in the right panel

Rate Limit Confusion

Symptom: Worried about hitting API limits

Solution: This tool doesn't use Figma's REST API at all—there are no rate limits. All operations go through the local plugin bridge.

Export Path Issues

Symptom: save_screenshots or export_frames_to_pdf fails

Solutions:

  1. Use absolute paths: /Users/username/exports/ not ~/exports/
  2. Ensure the directory exists (create it first if needed)
  3. Check write permissions on the target directory
  4. On Windows, use forward slashes: C:/Users/username/exports/

Auto-Layout Not Applied

Symptom: set_auto_layout succeeds but layout doesn't change

Solutions:

  1. Ensure the node is a FRAME (not GROUP or other type)
  2. Check that child constraints are compatible
  3. Verify mode is "HORIZONTAL" or "VERTICAL"
  4. Some properties require primaryAxisSizingMode to be set

Best Practices

  1. Always get context first: Use get_metadata or get_design_context before making changes
  2. Use search instead of hardcoding IDs: Node IDs change between sessions—use search_nodes or get_selection
  3. Leverage MCP prompts: Call read_design_strategy or design_strategy for AI-guided best practices
  4. Batch operations: Group multiple set_fills, resize_nodes, etc. calls to minimize tool invocations
  5. Export often: Use get_screenshot to verify changes visually during complex operations
  6. Variable-first design: Prefer bind_variable_to_node over direct set_fills for themeable designs
  7. Test on a copy: Clone important frames before applying batch transformations

Reference: Key Tools by Use Case

Use CaseRecommended Tools
Get startedget_metadata, get_selection, get_design_context
Create layoutscreate_frame, set_auto_layout, create_section
Add contentcreate_text, create_rectangle, import_image
Modify designsset_fills, resize_nodes, set_text, move_nodes
Design systemcreate_paint_style, create_text_style, create_variable_collection
Prototypingset_reactions, remove_reactions, get_reactions
Exportget_screenshot, save_screenshots, export_tokens, export_frames_to_pdf
Search/navigatesearch_nodes, navigate_to_page, get_pages
Batch editsfind_replace_text, batch_rename_nodes, set_fills (with multiple IDs)

FAQ

What does the figma-mcp-go-design-automation skill do?

Automate Figma designs with AI using MCP server - no API limits, full read/write via plugin bridge

How do I install figma-mcp-go-design-automation?

Run npx skills add https://github.com/reason-machines/design-skills --skill figma-mcp-go-design-automation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/figma-mcp-go-design-automation/ (personal) or .claude/skills/figma-mcp-go-design-automation/ (project).

Which AI agents can use figma-mcp-go-design-automation?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is figma-mcp-go-design-automation safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains figma-mcp-go-design-automation?

It is published by reason-machines in reason-machines/design-skills. It has 148 recorded installs.

More from reason-machines/design-skills

View all →

awesome-claude-design

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

205 installs

design-md-format

reason-machines/design-skills

Create and validate DESIGN.md files that give AI coding agents structured understanding of design systems through machine-readable tokens and human-readable rationale.

178 installs

open-codesign-ai-design

reason-machines/design-skills

Use Open CoDesign to generate prototypes, slides, and PDFs from prompts with Claude, GPT, Gemini, or local models

AI & Agents175 installs

open-design-ai-prototyping

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

174 installs

diagram-design-editorial

reason-machines/design-skills

Create editorial-quality diagrams in HTML + SVG matching your brand — architecture, flowcharts, sequences, timelines, quadrants, and 9 more types.

Docs & Writing169 installs

keychron-hardware-design

reason-machines/design-skills

Access and work with Keychron keyboard and mouse industrial design files (STEP, DXF, DWG, PDF) for 135+ models to create compatible accessories, remixes, and modifications.

Docs & Writing167 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs