Figma MCP Server

Overview

The Figma MCP Server enables AI models to interact directly with Figma design files through the Model Context Protocol. This server bridges the gap between design and code by providing structured access to layouts, components, design tokens, and visual specifications.

Key Features

Available Tools

Quick Reference

Detailed Usage

// Get React + Tailwind code (default)
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_design_context",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def"
  }
});

// Get Vue code
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_design_context",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def",
    framework: "vue"
  }
});

// Get HTML + CSS
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_design_context",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def",
    framework: "html"
  }
});

// Selection-based (desktop server only)
// Select a frame in Figma, then prompt:
// "Generate code for the selected frame"

// Get all variables
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_variable_defs",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def"
  }
});

// Get specific variable types
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_variable_defs",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def",
    types: ["color", "spacing"]
  }
});

// Get typography tokens
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_variable_defs",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def",
    types: ["typography"]
  }
});

use_mcp_tool({
  server_name: "figma",
  tool_name: "get_code_connect_map",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def"
  }
});

{
  "123:456": {
    "componentName": "Button",
    "codeConnectSrc": "src/components/Button.tsx"
  },
  "123:789": {
    "componentName": "Card",
    "codeConnectSrc": "src/components/Card.tsx"
  }
}

// Get screenshot of a frame
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_screenshot",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def"
  }
});

// Get screenshot with specific scale
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_screenshot",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def",
    scale: 2  // 2x resolution
  }
});

use_mcp_tool({
  server_name: "figma",
  tool_name: "get_metadata",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def"
  }
});

use_mcp_tool({
  server_name: "figma",
  tool_name: "create_design_system_rules",
  arguments: {
    file_key: "abc123def",
    framework: "react",
    design_system: "material-ui"
  }
});

use_mcp_tool({
  server_name: "figma",
  tool_name: "get_figjam",
  arguments: {
    file_key: "abc123def"
  }
});

use_mcp_tool({
  server_name: "figma",
  tool_name: "whoami",
  arguments: {}
});

Installation

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": [
        "/path/to/figma-mcp-client.js"
      ],
      "env": {
        "FIGMA_SERVER_URL": "http://127.0.0.1:3845/mcp"
      }
    }
  }
}

Common Use Cases

1. Design-to-Code Translation

Convert Figma designs to production-ready code:

// Approach 1: Using Figma link
// Paste Figma link in chat: https://www.figma.com/file/abc123/Design?node-id=123:456
// Prompt: "Implement this design in React with Tailwind"

// Approach 2: Using get_design_context directly
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_design_context",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def",
    framework: "react"
  }
});

// Get visual reference for accuracy
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_screenshot",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def",
    scale: 2
  }
});

2. Design Token Extraction

Extract and implement design system tokens:

// Get all design tokens
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_variable_defs",
  arguments: {
    file_key: "abc123def"
  }
});

// Prompt: "Generate a theme configuration file from these design tokens"

// Get specific token types
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_variable_defs",
  arguments: {
    file_key: "abc123def",
    types: ["color", "spacing", "typography"]
  }
});

// Prompt: "Create CSS variables for these design tokens"

3. Component Library Sync

Map Figma components to codebase implementations:

// Get component mappings
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_code_connect_map",
  arguments: {
    file_key: "abc123def"
  }
});

// Use mapping to ensure correct components
// Prompt: "Implement this design using the mapped component library"

// Get design context for specific component
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_design_context",
  arguments: {
    node_id: "123:456",
    file_key: "abc123def"
  }
});

4. Responsive Design Implementation

Generate responsive layouts from Figma designs:

// Get design context for desktop
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_design_context",
  arguments: {
    node_id: "123:456",  // Desktop variant
    file_key: "abc123def",
    framework: "react"
  }
});

// Get design context for mobile
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_design_context",
  arguments: {
    node_id: "123:789",  // Mobile variant
    file_key: "abc123def",
    framework: "react"
  }
});

// Prompt: "Create a responsive component that adapts between these layouts"

5. Design System Documentation

Generate design system rules and documentation:

// Create design system rules
use_mcp_tool({
  server_name: "figma",
  tool_name: "create_design_system_rules",
  arguments: {
    file_key: "abc123def",
    framework: "react",
    design_system: "custom"
  }
});

// Get all variables for documentation
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_variable_defs",
  arguments: {
    file_key: "abc123def"
  }
});

// Prompt: "Generate design system documentation with usage examples"

6. FigJam Workflow Visualization

Convert FigJam diagrams to structured data:

// Get FigJam diagram data
use_mcp_tool({
  server_name: "figma",
  tool_name: "get_figjam",
  arguments: {
    file_key: "figjam-file-key"
  }
});

// Prompt: "Create a technical specification document from this FigJam workflow"
// Prompt: "Generate a state machine based on this user flow diagram"

Workflow Patterns

Desktop Server Workflow (Selection-Based)

1. Select a frame or component in Figma
2. Prompt your AI client: "Implement the selected design"
3. Review generated code and iterate
4. Refine with specific framework or styling requests

Remote Server Workflow (Link-Based)

1. Copy Figma link for frame or component
2. Paste link in AI client chat
3. Request implementation: "Convert this to React component"
4. Iterate with design token integration

Code Connect Integration

1. Set up Code Connect for your component library
2. Map Figma components to code files
3. Use get_code_connect_map to retrieve mappings
4. Generate code that references existing components

Best Practices

1. Use Selection-Based Prompting: Desktop server's selection feature is faster than copying links
2. Include Screenshots: Use get_screenshot for visual accuracy verification
3. Extract Design Tokens First: Get variables before implementing components for consistency
4. Leverage Code Connect: Map components to avoid regenerating existing UI elements
5. Specify Frameworks: Always indicate target framework (React, Vue, etc.) for better results
6. Iterate Incrementally: Start with basic structure, then add styling and interactivity
7. Use Design System Rules: Create rules files for consistent multi-component generation

Supported Frameworks

The Figma MCP server supports code generation for:

• React (default with Tailwind CSS)
• Vue.js
• HTML + CSS
• iOS (Swift/SwiftUI)
• Custom frameworks (via prompts)

Design Token Types

Supported design token categories:

• Colors: Fill colors, stroke colors, gradients
• Spacing: Padding, margins, gaps
• Typography: Font families, sizes, weights, line heights
• Border Radius: Corner radius values
• Shadows: Drop shadows, inner shadows
• Effects: Blur, opacity
• Grid: Layout grids, columns

Troubleshooting

Common Issues

Issue: Desktop server not starting

• Ensure you're in Dev Mode (Shift+D)
• Verify latest Figma desktop app is installed
• Check firewall settings for port 3845

Issue: Selection-based prompting not working

• Confirm desktop server is running (not remote)
• Select frame or component in Figma before prompting
• Ensure MCP client is properly configured

Issue: API token authentication failing

• Regenerate personal access token in Figma settings
• Verify token has correct permissions
• Check token is properly set in environment variable

Issue: Generated code doesn't match design

• Include screenshot for visual reference
• Specify exact framework and styling library
• Extract design tokens first for accuracy
• Use Code Connect for component consistency

Security Considerations

Security Best Practices

1. Rotate Tokens Regularly: Generate new personal access tokens periodically
2. Limit Token Scope: Create separate tokens for different projects
3. Use Desktop Server: For sensitive designs, use local desktop server instead of remote
4. Review Permissions: Ensure tokens only have necessary file access
5. Monitor Usage: Check Figma API usage logs for unexpected activity

Performance Tips

1. Use Metadata for Large Files: Call get_metadata instead of full context for large designs
2. Cache Design Tokens: Extract variables once and reuse across components
3. Batch Component Extraction: Get all component mappings in one call
4. Optimize Screenshot Requests: Use appropriate scale (1x-2x) based on needs
5. Filter Variable Types: Request only needed token types to reduce payload

Limitations

• Desktop Server: Selection-based prompting only works with desktop server, not remote
• File Access: Remote server requires appropriate file permissions
• Rate Limits: Figma API has rate limits for remote server usage
• Framework Support: Some frameworks may have limited code generation quality
• Complex Interactions: Animation and complex interaction logic may require manual implementation

Resources

• Official Figma MCP Documentation
• Figma MCP Tools & Prompts Guide
• Figma Developer Docs
• Code Connect Documentation
• Framelink Community Server

Sources