Figma + MCP Integration
MCP (Model Context Protocol) is an open standard connecting AI assistants to external tools through a standardized interface. When you connect an AI assistant to Figma via MCP, the AI can directly read and write to your Figma canvas — creating frames, setting colors, adding text, inserting icons, and wiring prototypes.
What Becomes Possible
- “Create a 12-screen onboarding flow with status bars and bottom navigation” — AI generates all screens programmatically
- “Wire all Continue buttons to the next screen” — 40+ prototype interactions in seconds
- “Apply our brand colors to all primary buttons” — AI queries every matching node and updates them
- “Export every screen as PNG at 2x” — batch export without manual selection
Three Integration Methods
The simplest setup. Figma’s official MCP server provides design context to AI coding tools.
Two connection modes:
- Remote MCP — connects to
https://mcp.figma.com/mcp(no desktop app needed) - Desktop MCP — runs locally through the Figma desktop application
Configuration:
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}
| Pros | Cons |
|---|---|
| Official, maintained by Figma | Primarily read-only |
| No extension/plugin required | Starter plan: 6 tool calls/month |
| Works with Claude, Cursor, VS Code | Focused on design-to-code |
Best for: Feeding design context to coding agents so generated code matches your designs.
Connects to Figma Desktop via Chrome DevTools Protocol. No plugin installation needed — talks directly to the Figma desktop app.
Setup:
# Terminal 1: Launch Figma with debug port
# Windows:
start "" "C:\Users\...\Figma.exe" --remote-debugging-port=9222
# macOS:
open -a Figma --args --remote-debugging-port=9222
# Terminal 2: Start MCP server
figma-use mcp serve
Configuration:
{
"mcpServers": {
"figma-use": {
"url": "http://localhost:38451/mcp"
}
}
}
Key tools (selection of 90+):
| Tool | What It Does |
|---|---|
figma_create_frame | Create frame with auto-layout, fill, size |
figma_create_text | Add text with font, size, color |
figma_create_icon | Insert from 150,000+ Iconify icons |
figma_render | Render JSX directly into Figma |
figma_query | XPath-based node search |
figma_set_fill | Change colors on any element |
figma_set_layout | Set auto-layout or grid properties |
figma_export_node | Export as PNG/SVG |
figma_lint | Audit against 17 design rules |
figma_analyze | Extract design system |
Best for: Full AI-driven design generation, batch operations, design system enforcement.
Maximum control for complex projects. Python scripting, batch processing, and full Plugin API access.
Architecture:
Python Script (figma_bridge.py)
| HTTP POST (port 9224)
Node.js Bridge Server (figma_ws_server.js)
| WebSocket (port 9223)
Figma Desktop Bridge Plugin
| Plugin API
Figma Canvas
Python bridge function:
def figma_execute(code: str, timeout_ms: int = 30000) -> Any:
'''Execute Figma Plugin API code via the bridge.'''
payload = json.dumps({"code": code, "timeout": timeout_ms}).encode()
req = urllib.request.Request(
f"http://localhost:9224/execute",
data=payload,
headers={"Content-Type": "application/json"},
method="POST",
)
with urllib.request.urlopen(req, timeout=(timeout_ms // 1000) + 10) as resp:
result = json.loads(resp.read().decode())
if not result.get("success"):
raise RuntimeError(result.get("error", "Unknown error"))
return result.get("result")
Best for: Large-scale generation (dozens of screens), custom design systems, advanced prototype wiring.
Decision Flowchart
graph TD
A[What do you need?] --> B{Modify Figma canvas?}
B -->|No, read only| C[Option A: Official MCP]
B -->|Yes| D{How complex?}
D -->|Simple: frames, text, icons| E[Option B: figma-use]
D -->|Complex: batch scripting, custom logic| F[Option C: Custom Bridge]
JSX Rendering with figma-use
figma-use supports declarative JSX — the most natural way for an LLM to describe UI structure:
<Frame style={{p: 24, bg: '#3B82F6', rounded: 12, layout: 'VERTICAL', gap: 12}}>
<Text style={{size: 18, color: '#FFF', weight: 700}}>Welcome</Text>
<Text style={{size: 14, color: '#E0E0E0'}}>Sign in to continue</Text>
</Frame>
This renders directly into Figma as properly structured frames with auto-layout, fills, and typography.
Figma’s Built-In AI Features
Beyond MCP, Figma ships its own AI capabilities:
Figma Make
Prompt-to-code tool. Turns written descriptions or existing designs into working prototypes. Supports multiple AI models (Claude Sonnet/Opus, Gemini 3 Pro) selectable from the prompt box.
Figma Sites
Build and publish dynamic websites with code and AI-powered customization. Launched at Config 2025.
Figma Buzz
Create brand-consistent marketing and visual assets at scale with built-in AI.
AI Image Editing (December 2025)
Native AI-powered image editing: object removal/isolation, image extension (outpainting), and auto-suggest contextual workflows.
Check Designs (Early Access)
Figma’s AI-powered design linter. Audits work against your design system before developer handoff — surfaces hard-coded values and suggests correct tokens.
Bidirectional Claude Code Integration
Web pages and flows built in Claude Code can be captured and brought directly onto the Figma canvas as editable frames. Design in Figma, code with AI, push back to Figma.
Port Allocation (Local Setup)
| Port | Service | Purpose |
|---|---|---|
| 9222 | Chrome DevTools Protocol | Figma Desktop debugging for figma-use |
| 9223 | WebSocket server | Plugin connection for custom bridge |
| 9224 | HTTP server | Python command endpoint for custom bridge |
| 38451 | figma-use MCP | MCP server for Claude/Cursor |