Figma Mcp Server

Extract Figma designs for AI coding agents. Get layout, styles, variables, screenshots, and generate code for React, Vue, Svelte, Flutter, and more.

Features

• Design Context Extraction - Layout, styles, and generated code for any Figma node
• Design Variables - Extract colors, spacing, typography as CSS/Tailwind tokens
• Screenshots - Export node images in PNG, JPG, SVG, or PDF format
• Multi-Framework Code - React + Tailwind, Vue, Svelte, Flutter, SwiftUI, Compose
• MCP Server Mode - Run as stdio server for Claude Desktop and AI agents
• 11 MCP Tools - Comprehensive Figma integration for design-to-code workflows

Quick Start

Demo Mode

Run with figmaApiKey: "demo" to see sample output without a real API key.

{
  "figmaApiKey": "demo",
  "extractionMode": "design_context",
  "framework": "react_tailwind"
}

With Real Figma File

{
  "figmaApiKey": "figd_your_token_here",
  "fileUrl": "https://www.figma.com/design/abc123/MyDesign",
  "extractionMode": "design_context",
  "framework": "react_tailwind"
}

Input Parameters

Parameter	Type	Required	Default	Description
figmaApiKey	string	Yes	-	Figma Personal Access Token. Use "demo" for sample data
fileUrl	string	No	-	Full Figma file URL
nodeId	string	No	-	Specific node to extract (format: 123:456)
extractionMode	enum	No	design_context	What to extract
framework	enum	No	react_tailwind	Target framework for code output
imageFormat	enum	No	png	Screenshot format
imageScale	number	No	2	Screenshot scale (1-4)
depth	number	No	0	Tree traversal depth (0 = unlimited)
mcpMode	boolean	No	false	Run as MCP stdio server

Extraction Modes

Mode	Description
design_context	Layout, styles, and generated code
variables	Design tokens (colors, spacing, typography)
metadata	XML structure overview
screenshot	Export node images
code_connect	Component-to-code mappings
figjam	FigJam diagram content
full	All extraction types

Target Frameworks

Framework	Output
react_tailwind	React + Tailwind CSS classes
react_css	React + CSS Modules
vue_tailwind	Vue 3 + Tailwind
svelte	Svelte components
html_css	Plain HTML + inline CSS
flutter	Flutter widgets
swift_ui	SwiftUI views
compose	Jetpack Compose

Output Schema

Design Context Output

{
  "nodeId": "123:456",
  "nodeName": "Hero Section",
  "nodeType": "FRAME",
  "layout": {
    "width": 1440,
    "height": 800,
    "layoutMode": "VERTICAL",
    "padding": { "top": 64, "right": 120, "bottom": 64, "left": 120 }
  },
  "styles": {
    "fills": [{ "type": "SOLID", "color": "#F8F8FC" }],
    "cornerRadius": 0
  },
  "codeOutput": "<div className=\"flex flex-col items-center...\">",
  "framework": "react_tailwind",
  "timestamp": "2024-01-15T10:30:00Z"
}

Variables Output

{
  "variableName": "primary-color",
  "variableType": "COLOR",
  "value": "#6366F1",
  "collection": "Brand Colors",
  "mode": "Light",
  "extractionType": "variables"
}

Screenshot Output

{
  "nodeId": "123:456",
  "imageUrl": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/...",
  "imageFormat": "png",
  "scale": 2,
  "width": 2880,
  "height": 1600
}

Getting a Figma API Key

1. Go to figma.com and sign in
2. Click your profile icon → Settings
3. Scroll to Personal access tokens
4. Click Generate new token
5. Copy the token (starts with figd_)

MCP Server Configuration

Claude Desktop

Add to your Claude Desktop config:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/figma-mcp-server", "--figma-api-key=YOUR_KEY"]
    }
  }
}

Via Apify MCP

Configure at mcp.apify.com to add this Actor to your MCP setup.

MCP Tools

When running in MCP mode, the following tools are available:

Tool	Description
get_design_context	Extract layout, styles, and generated code
get_variable_defs	Get design tokens (colors, spacing, typography)
get_screenshot	Capture visual representation of nodes
get_metadata	Sparse XML metadata for large designs
get_code_connect_map	Get component-to-code mappings
add_code_connect_map	Create new component mappings
get_figjam	Extract FigJam diagram content
create_design_system_rules	Generate design system rules file
whoami	Get authenticated user info
list_components	List all file components
list_styles	List all file styles

Use Cases

Design-to-Code

Extract a Figma frame and get ready-to-use React code:

{
  "figmaApiKey": "figd_xxx",
  "fileUrl": "https://www.figma.com/design/abc/Landing",
  "nodeId": "hero-section-id",
  "extractionMode": "design_context",
  "framework": "react_tailwind"
}

Design System Export

Extract all design tokens for your design system:

{
  "figmaApiKey": "figd_xxx",
  "fileUrl": "https://www.figma.com/design/abc/DesignSystem",
  "extractionMode": "variables"
}

Visual Documentation

Capture screenshots for documentation or code review:

{
  "figmaApiKey": "figd_xxx",
  "fileUrl": "https://www.figma.com/design/abc/Components",
  "nodeId": "button-component-id",
  "extractionMode": "screenshot",
  "imageFormat": "png",
  "imageScale": 2
}

Pricing

Pay-per-event pricing based on extraction type:

Event	Cost
Design context extraction	$0.01/node
Variable extraction	$0.005/variable
Screenshot export	$0.02/image
Metadata extraction	$0.01/file

Links

• Figma API Documentation
• MCP Protocol Specification
• Apify MCP Servers

License

MIT