Figma MCP Server

What it does

The Figma MCP Server connects AI coding agents to your Figma files. Agents can extract design variables, components, and layout data, pull context from Make files, and generate code from selected frames. This keeps design system components consistent with your codebase through Code Connect and supports workflows from prototype to production.

Available tools

Tool	What it does
get_design_context	Extract variables, components, and layout data from Figma files
generate_code_from_frame	Generate code from a selected Figma frame
get_make_resources	Pull code resources from Make files for LLM context
get_code_connect	Retrieve Code Connect mappings for design-to-code consistency

Tool names may vary by installation method (desktop app vs remote server). Check the Figma MCP catalog for your client's supported tools.

Setup by tool

Cursor

Create .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "your_figma_personal_access_token"
      }
    }
  }
}

Claude Code

Add to your Claude configuration file:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "your_figma_personal_access_token"
      }
    }
  }
}

VS Code / GitHub Copilot

Add the same configuration to your MCP client. Alternatively, use the Figma desktop app local server or the remote MCP server at https://mcp.figma.com if your client supports HTTP transport.

Getting a Figma API key

1. Open Figma and go to Settings > Account > Personal access tokens
2. Click Generate new token
3. Name it (e.g., "AI Coding Agent") and copy the token
4. Share the relevant Figma files with the token owner

When to use this

• Design-to-code: Agents generate components that match your Figma design system
• Code Connect: Keep generated code aligned with documented component usage
• Variable sync: Pull design tokens and variables into implementation work
• Make context: Move from prototype to production with Make file resources as context

Security considerations

• Use Personal Access Tokens with minimal scopes; tokens can access all files the owner can access
• Do not commit tokens to version control; use environment variables
• Consider read-only access when agents only need to read design context
• Review generated code before merging; design-to-code output may need manual refinement