Figma Design MCP

Overview

Figma Design MCP is the official Model Context Protocol server from Figma, designed to enable AI agents to interact directly with Figma design files. Released in July 2026 with over 2,100 GitHub stars on launch day, this MCP server represents a major milestone in bridging design and development workflows through AI agents.

The server allows agents to read design layers, extract color variables, identify component instances, and even generate code skeletons from designs. This transforms Figma from a static design tool into a dynamic, agent-accessible data source for automated design-to-code pipelines.

Features

• Layer Structure Reading: Parse the complete hierarchy of Figma files including frames, groups, and components
• Design Token Extraction: Extract color variables, typography scales, and spacing tokens as structured data
• Component Instance Detection: Identify component usage patterns and variant states across designs
• Design-to-Code Generation: Generate React, Vue, and Flutter code skeletons from design files
• Design Modification: Receive agent instructions to modify design elements (e.g., "change all button corner radii to 8px")
• Style Guide Extraction: Extract and export complete design system specifications
• Version History Access: Read previous design versions for change tracking
• Multi-File Support: Work with entire Figma projects containing multiple design files

Installation

# Install via npm
npm install -g @figma/mcp-design

# Or via npx (no installation)
npx @figma/mcp-design

Configuration

Add to your MCP client configuration (e.g., Claude Desktop):

{
  "mcpServers": {
    "figma-design": {
      "command": "npx",
      "args": ["@figma/mcp-design"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_xxxxxxxxxxxx"
      }
    }
  }
}

Requirements:

• Figma Personal Access Token (generate at https://www.figma.com/settings#personal-access-tokens)
• Node.js 18+

Available Tools

Tool	Description
get_design_tree	Get the complete layer hierarchy of a Figma file
get_design_tokens	Extract all design tokens (colors, typography, spacing)
get_component_instances	List all component instances and their variant states
generate_code	Generate React/Vue/Flutter code from selected design elements
modify_design	Apply changes to design elements via natural language
extract_style_guide	Generate a complete design system specification document
get_file_metadata	Get file metadata including version history and collaborators
search_components	Search for components by name, type, or usage pattern

Usage Examples

Example 1: Extract Design Tokens

# Via MCP client
response = mcp_client.call_tool("figma-design", "get_design_tokens", {
    "file_key": "abc123xyz",
    "format": "json"
})

# Output includes:
# {
#   "colors": {
#     "primary": "#007AFF",
#     "secondary": "#5856D6",
#     "background": "#FFFFFF"
#   },
#   "typography": {
#     "heading": {"font": "Inter", "size": 32, "weight": 700},
#     "body": {"font": "Inter", "size": 16, "weight": 400}
#   },
#   "spacing": {
#     "small": 8,
#     "medium": 16,
#     "large": 24
#   }
# }

Example 2: Generate React Code from Design

response = mcp_client.call_tool("figma-design", "generate_code", {
    "file_key": "abc123xyz",
    "node_id": "123:456",
    "framework": "react",
    "include_styles": True
})

Example 3: Modify Design Elements

response = mcp_client.call_tool("figma-design", "modify_design", {
    "file_key": "abc123xyz",
    "instruction": "Change all button corner radii to 8px and primary color to #00AAFF"
})

Example 4: Extract Style Guide

response = mcp_client.call_tool("figma-design", "extract_style_guide", {
    "file_key": "abc123xyz",
    "output_format": "markdown"
})

Claude Desktop Setup

1. Generate Figma Access Token:

   • Go to https://www.figma.com/settings#personal-access-tokens
   • Click "Generate new token"
   • Copy the token (starts with figd_)

2. Add to Claude Desktop Config:

   {
     "mcpServers": {
       "figma-design": {
         "command": "npx",
         "args": ["@figma/mcp-design"],
         "env": {
           "FIGMA_ACCESS_TOKEN": "figd_your_token_here"
         }
       }
     }
   }
   

3. Restart Claude Desktop and test with:

   List the design tokens in my Figma file
   

Advanced Configuration

Environment Variables

Variable	Description	Default
FIGMA_ACCESS_TOKEN	Figma Personal Access Token (required)	-
FIGMA_API_BASE	Figma API base URL	https://api.figma.com
MCP_LOG_LEVEL	Logging verbosity	info

Team/Project Restrictions

For enterprise deployments, you can restrict access to specific Figma teams:

{
  "mcpServers": {
    "figma-design": {
      "command": "npx",
      "args": ["@figma/mcp-design", "--team-id", "your-team-id"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_xxxx"
      }
    }
  }
}

Pros

• ✅ Official Figma Support: Maintained by Figma with regular updates
• ✅ Complete Design Access: Read layers, tokens, components, and versions
• ✅ Design-to-Code: Automated React/Vue/Flutter code generation
• ✅ Design Modification: Agents can make design changes directly
• ✅ Design System Extraction: Export complete style guides as structured data
• ✅ Multi-Framework: Supports React, Vue, Flutter code generation

Cons

• ✅ Token Required: Requires Figma Personal Access Token setup
• ✅ Read-Limited: Some features may require Figma Enterprise permissions
• ✅ API Rate Limits: Subject to Figma API rate limiting
• ✅ New Server: Limited production track record

When to Use

• Design-to-Code Automation: Generate code from Figma designs automatically
• Design System Management: Extract and maintain design tokens programmatically
• UI Testing: Compare rendered UI against design specifications
• Component Auditing: Analyze component usage patterns across designs
• Multi-Agent Workflows: Connect design tools to broader agent workflows

Resources

• GitHub Repository
• Figma MCP Documentation
• Figma API Reference