Overview

The Figma MCP Server integrates Figma design content into Model Context Protocol (MCP) workflows so AI agents can access real design context when generating code. Instead of working from screenshots or vague descriptions, agents can query Figma files for selected frames, components, variables, and layout metadata. That context improves the fidelity of design-to-code output and helps teams keep code in sync with their design system.

This server supports both read-oriented tools (fetching frames, tokens, components, assets) and write-capable flows (creating or updating Figma nodes) when enabled. It’s designed to be consumed by MCP-aware clients and agent frameworks such as VS Code, Cursor, and Claude Code. Note: some capabilities are in beta and rate-limited — review the rate limits and developer terms before running production workloads.

Features

Read design context: extract frames, component hierarchies, style variables, colors, spacing, and layout rules.
Generate code from selected frames: produce component code (e.g., React) from a chosen Figma frame.
Write to canvas (remote-only, beta): create or update Figma nodes (frames, components, auto layout) from an agent.
Component-aware code generation with Code Connect: map generated code to your real components for consistent outputs.
Asset and variable sync: export design tokens, imagery, and component metadata for use in your codebase.
Web-to-design conversion (rolling out): capture or convert web pages into Figma designs via an agent.

Installation / Configuration

The MCP server URL is: https://mcp.figma.com/mcp

Below are example configurations and quick install steps for common MCP clients.

VS Code

Open the command palette (⌘⇧P / Ctrl+Shift+P), run “MCP:Add Server”.
Choose HTTP and paste the server URL.
When prompted for a server ID enter figma.
Confirm global or workspace scope.

Example mcp.json entry:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Open the MCP-enabled chat/agent toolbar and verify tools are available by trying a tool invocation such as #get_design_context.

Cursor

Recommended: install the official Figma plugin inside Cursor’s agent chat:

/add-plugin figma

The plugin configures the MCP server and installs common skills for design-to-code tasks.

Manual Cursor config (example):

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

Recommended: install the Figma plugin from Anthropic’s plugin marketplace:

claude plugin install figma@claude-plugins-official

Manual add via CLI:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Use claude mcp list and claude mcp remove <name> to manage servers.

Notes on rate limits and access

Read operations from the Figma MCP server are subject to rate limits. Users on some plans may be restricted to very low monthly call counts; higher-seat plans follow Figma REST API per-minute tiers. See Figma’s rate limit docs and plan pages for details.
By using the server and skills you accept the Figma Developer Terms: https://www.figma.com/legal/developer-terms/

Available Tools / Resources

The server exposes a set of tools (available through the client’s MCP tool registry). Common capabilities you’ll see:

Tool / Resource	Purpose
get_design_context	Fetch variables, components, and hierarchical layout for a selected frame or file
generate_code_from_frame	Produce code (e.g., React) for a selected frame
write_to_canvas	Create or modify Figma nodes remotely (requires permission and beta access)
export_assets	Download images, icons, and optimized assets referenced in designs
code_connect_sync	Map design elements to code components and generate integration hints

Developer links

Official docs: https://developers.figma.com/docs/figma-mcp-server/
GitHub guide & examples: https://github.com/figma/mcp-server-guide

Use Cases

Convert a Figma frame into a working React component
- Select a frame, run generate_code_from_frame; the agent returns JSX + CSS/utility classes and maps design tokens to your project’s variables via Code Connect.
Sync design tokens into your codebase
- Use get_design_context to extract color, typography, and spacing variables and generate a tokens file for your style system.
Create/update Figma UI from code changes
- With write_to_canvas enabled, an agent can apply layout updates or create new components in Figma based on updated design system rules.
QA and accessibility checks
- Pull component metadata and layout to validate contrast ratios, spacing consistency, and auto layout behavior programmatically.
Capture web pages into Figma
- Use the web-to-design tool to import a live page and produce editable Figma frames as a starting point for redesign or mobile adaptation.

Tips for Developers

Start with read-only flows to prototype: extracting frames and variables is lower friction and avoids write permissions.
Test rate constraints on a sample file to understand how many tool calls your agent will need per user action.
Use Code Connect to reduce post-generation edits — mapping to existing components keeps output maintainable.
Keep credentials and tokens out of checked-in mcp.json files when using workspace-specific or personal servers.

For full reference, sample agents, and advanced configuration, see the Figma developer docs and the GitHub repository: https://github.com/figma/mcp-server-guide.

Figma MCP Server for Design-to-Code AI