Figma MCP Server

Connect AI assistants directly to your Figma designs. Extract design data, analyze layouts, and generate production-ready code for Flutter, React, HTML, Tailwind, and SwiftUI.

What is this?

This is an MCP (Model Context Protocol) server that runs on Apify. It allows AI coding assistants like Claude, Cursor, and VS Code Copilot to directly access your Figma designs and generate code from them.

Instead of manually copying design specs, your AI assistant can:

• Read component dimensions, colors, and typography
• Understand layout structure (Flexbox/Auto Layout)
• Extract design tokens for theme files
• Generate framework-specific code with proper styling

How It Works

┌─────────────┐     ┌──────────────────┐     ┌─────────────┐
│   Claude    │────▶│  Figma MCP Server │────▶│  Figma API  │
│   Cursor    │◀────│    (on Apify)     │◀────│             │
│   VS Code   │     └──────────────────┘     └─────────────┘
└─────────────┘
      │
      ▼
  Generated Code
  (Flutter/React/HTML)

1. You connect your AI assistant to this MCP server
2. Ask: "Generate Flutter code for this Figma component"
3. The AI reads the design data and generates accurate code

Quick Setup (5 minutes)

Step 1: Get Your Figma Token

1. Go to figma.com → Log in
2. Click your profile icon → Settings
3. Scroll to Personal access tokens
4. Click Generate new token → Copy it

Step 2: Start the MCP Server

1. Enter your Figma token in the input below
2. Click Save & Start (or enable Standby mode)
3. Your MCP endpoint will be:

   https://YOUR_USERNAME--figma-mcp-server.apify.actor/mcp
   

Step 3: Connect Your AI Assistant

For Claude Desktop - Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "figma": {
      "url": "https://YOUR_USERNAME--figma-mcp-server.apify.actor/mcp"
    }
  }
}

For Cursor - Add to MCP settings:

{
  "figma": {
    "url": "https://YOUR_USERNAME--figma-mcp-server.apify.actor/mcp"
  }
}

For any MCP client - Use the Streamable HTTP transport with the endpoint URL above.

What Can You Ask Your AI?

Once connected, try these prompts:

Prompt	What happens
"Get the design specs for figma.com/file/ABC123"	Extracts layout, colors, typography
"Generate Flutter code for node 1:234"	Creates Flutter widgets from the design
"Extract all colors from this Figma file"	Returns color palette with hex codes
"Find all buttons in this design"	Searches for nodes named "button"
"Export this icon as SVG"	Returns SVG download URL

Available Tools

The MCP server provides these tools to AI assistants:

Design Analysis

Tool	Description
get_file_info	Get file structure, pages, components, and style counts
get_node_details	Get detailed layout, dimensions, colors, effects for nodes
search_nodes	Find nodes by name or type (FRAME, COMPONENT, TEXT)

Code Generation

Tool	Description
get_component_for_code	Get component data with framework hints (Flutter/React/HTML)
extract_design_tokens	Extract colors, typography, spacing, corner radius values

Content & Assets

Tool	Description
get_text_content	Extract all text content from designs
export_node_image	Export nodes as PNG, SVG, JPG, or PDF
get_user_info	Get info about the authenticated Figma user

Example: Figma to Flutter

Your prompt:

"Get the component details for node 1:234 in file ABC123xyz and generate Flutter code"

What the AI receives from get_component_for_code:

{
  "name": "PrimaryButton",
  "type": "COMPONENT",
  "dimensions": { "width": 200, "height": 48 },
  "layout": {
    "mode": "HORIZONTAL",
    "primaryAxisAlignItems": "CENTER",
    "counterAxisAlignItems": "CENTER",
    "paddingLeft": 24,
    "paddingRight": 24
  },
  "fills": [{ "type": "SOLID", "color": "#6366F1" }],
  "cornerRadius": 8,
  "children": [{
    "type": "TEXT",
    "text": { "characters": "Get Started" },
    "fills": [{ "color": "#FFFFFF" }]
  }],
  "frameworkHints": {
    "suggestedWidget": "Container",
    "layoutWidget": "Row",
    "mainAxisAlignment": "MainAxisAlignment.center"
  }
}

What the AI generates:

Container(
  width: 200,
  height: 48,
  decoration: BoxDecoration(
    color: Color(0xFF6366F1),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Get Started',
        style: TextStyle(color: Colors.white),
      ),
    ],
  ),
)

Finding File Keys and Node IDs

From a Figma URL like:

https://www.figma.com/design/ABC123xyz/My-Design?node-id=1:234

• File Key: ABC123xyz (after /design/)
• Node ID: 1:234 (from node-id= parameter)

Standby Mode (Recommended)

For the best experience, enable Standby mode in Actor settings. This keeps the server running continuously so AI assistants get instant responses.

1. Go to Actor Settings → Standby
2. Toggle Enable Standby mode
3. Set your Figma token as default input
4. The server stays ready 24/7

Use Cases

• Design-to-code workflows - Generate Flutter, React, or HTML from Figma
• Design system documentation - Extract tokens for theme files
• Component libraries - Convert Figma components to code
• Responsive layouts - Understand Auto Layout for Flexbox/Row/Column
• Asset pipelines - Export icons and images programmatically

Pricing

This Actor uses Apify's standard compute pricing. Standby mode is recommended for production use.

Support

• Figma API Documentation
• MCP Specification
• Apify Documentation

---

Built for developers who want AI to understand their designs.