Figma MCP Server

Pricing

Rating

Developer

Actor stats

Categories

Share

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:

Available Tools

The MCP server provides these tools to AI assistants:

Design Analysis

Code Generation

Content & Assets

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.