Figma Context MCP Server

MCP Server providing AI agents direct access to Figma design files. Extract layout, styling, variables, and metadata for one-shot design-to-code implementation.

Features

• 11 MCP Tools for comprehensive Figma integration
• AI-Friendly Output - Simplified design data optimized for LLMs
• Multi-Framework Support - React, Vue, Svelte, Flutter, SwiftUI, and more
• Design Token Extraction - Colors, spacing, typography as CSS/Tailwind
• Screenshot Capture - Visual reference for complex layouts
• Code Connect - Map Figma components to code components

MCP Tools

Tool	Description
get_design_context	Extract layout, styles, and generate framework 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

Input Schema

Field	Type	Required	Description
figmaApiKey	string	Yes	Figma Personal Access Token
fileUrl	string	No*	Figma file URL (*required for direct extraction)
nodeId	string	No	Specific node ID to extract
extractionMode	enum	No	Type of extraction (default: design_context)
framework	enum	No	Target framework for code output
imageFormat	enum	No	Screenshot format (png/jpg/svg/pdf)
imageScale	number	No	Screenshot scale (1-4)
includeStyles	boolean	No	Include style definitions
includeComponents	boolean	No	Include component metadata
depth	number	No	Node tree traversal depth
mcpMode	boolean	No	Run as MCP server (stdio)

Getting a Figma API Key

1. Go to Figma
2. Click your profile icon → Settings
3. Scroll to "Personal Access Tokens"
4. Click "Generate new token"
5. Copy the token (shown only once)

Usage Examples

Extract Design Context (React + Tailwind)

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

Extract Design Variables

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

Capture Screenshot

{
  "figmaApiKey": "figd_xxx",
  "fileUrl": "https://www.figma.com/file/abc123/MyDesign",
  "nodeId": "123:456",
  "extractionMode": "screenshot",
  "imageFormat": "png",
  "imageScale": 2
}

Run as MCP Server

{
  "figmaApiKey": "figd_xxx",
  "mcpMode": true
}

Output Dataset

Design Context View

Field	Description
nodeId	Figma node ID
nodeName	Node name
layout	Layout properties (width, height, flex, padding)
styles	Style properties (fills, strokes, effects)
codeOutput	Generated code for target framework

Variables View

Field	Description
variableName	Variable name
variableType	Type (COLOR, FLOAT, STRING, BOOLEAN)
value	Resolved value
collection	Variable collection name
mode	Mode name (e.g., "Light", "Dark")
cssVariable	CSS custom property declaration

Supported Frameworks

• React + Tailwind CSS
• React + CSS Modules
• Vue + Tailwind CSS
• Svelte
• HTML + CSS
• Flutter
• SwiftUI
• Jetpack Compose

MCP Configuration

Claude Desktop

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

Via Apify

Configure at mcp.apify.com and add this Actor.

Pricing

Pay-per-event pricing:

• Design context extraction: $0.01 per node
• Variable extraction: $0.005 per variable
• Screenshot: $0.02 per image
• Metadata: $0.01 per file

License

MIT

Links

• Figma API Documentation
• MCP Protocol
• Apify MCP Servers

---

Built for the Apify $1M Challenge

TEEP:FIGMA-MCP-001 | dS=↓ | φ=● | E=~ | v9.0-Unified