Provides tools for exporting images in multiple formats (PNG, JPG, SVG, PDF), extracting detailed style data with CSS generation, analyzing design elements including images and vectors, batch exporting multiple nodes, and retrieving SVG code for vector graphics directly from Figma designs.
Figma MCP Tool
English | 简体中文
A Model Context Protocol (MCP) server that integrates with the Figma API to export images and extract style data.
Features
🖼️ Image export: Export node images from a Figma URL; supports PNG, JPG, SVG, PDF
🎨 Style extraction: Fetch detailed style data for design elements; supports CSS generation
📦 Batch export: Export multiple nodes in one go
🔄 Smart retry: Built-in retry to handle network hiccups and API limits
🛡️ Robust errors: Clear error handling and troubleshooting guidance
🧩 Design element analysis: Deeply analyze images, vectors, components in designs 🆕
📋 SVG extraction: Get SVG code for vector graphics directly 🆕
Install and Run
Option 1: Run via npx (recommended, no install)
Option 2: Global install
Option 3: Local project install
Option 4: Run from source (for development)
Quick Start
1. Get a Figma access token
Log in to Figma
Open Settings
Find the "Personal access tokens" section
Click "Create new token"
Copy the token (starts with
figd_
)
2. Configure in Claude Desktop
Edit the Claude config file (pick your OS):
macOS/Linux: ~/.config/claude-desktop/config.json
Windows: %APPDATA%\Claude Desktop\config.json
Choose one of the following setups:
Setup A: Run via npx (recommended)
Setup B: Global install
Setup C: Use from a project
Setup D: Run from source
⚠️ Notes:
Recommended: Setup A (npx) — no install, always latest
Global install: good if you use it often
Project install: pin a version per project
From source: for development and customization
Replace
figd_your_figma_token_here
with your real Figma token
3. Restart Claude Desktop
Restart Claude Desktop to apply the config.
Usage
Once configured, use it directly in Claude:
Get Figma images
Get style data and generate CSS
Get file info
Get design elements 🆕
Get image assets 🆕
Get SVG data 🆕
Available Tools
This MCP server provides 7 tools:
Basics
get_figma_image — Get node image by Figma URL
get_figma_styles — Get node style data; optional CSS output
export_multiple_images — Batch export multiple nodes
get_file_info — Get basic file info
Design element tools 🆕
get_node_images — Get all image assets under a node
get_node_svg — Get SVG data for a node
extract_node_elements — Extract all design elements (images, vectors, components)
Troubleshooting
Common issues
1. "Cannot find module"
Cause: Using a
.ts
entry instead of the built.js
Fix: Use
/path/to/build/index.js
instead ofindex.ts
2. "Access denied"
Cause: Invalid Figma token or insufficient file permission
Fix: Verify token, ensure file is public or accessible
3. MCP server won’t start
Cause: Wrong paths or Node.js version too low
Fix:
Use absolute paths
Ensure Node.js ≥ 18
Rebuild:
npm run build
4. "No exportable images found"
Cause: URL missing
node-id
parameterFix: Ensure URL includes
?node-id=xxxxx-xxxxx
Manual test
You should see: Figma MCP server started
Validate config
Technical Details
Smart retry
Handles transient network issues automatically
Exponential backoff
Error classification and recovery
Batch processing
Automatically splits large node sets (90 per batch)
Avoids URL length limits
Concurrency control and resource management
Error handling
Detailed messages and remediation tips
Friendly feedback
Complete logging
Development
Dev mode
Project structure
New Features 🆕
Design element analysis
Image asset recognition: Find all images, including embedded and external
Vector extraction: Extract SVG paths, shapes, icons
Component analysis: Identify components and instances
Hierarchy traversal: Deeply walk the node tree
SVG data
Full SVG export: Complete SVG code with styles and paths
Vector fidelity: Preserve vector properties for lossless scaling
Inline styles: SVG contains complete styles, ready to use
Smart element detection
Auto categorization: Images, vectors, text, components
De-duplication: Remove duplicate resource references
Detail control: Overview vs detailed output modes
Security Best Practices
Token safety: Use env vars for the Figma token; never hardcode
Access control: Rotate tokens regularly
Least privilege: Grant the minimum required file access
License
MIT License
Support
If you run into issues:
Ensure Node.js ≥ 18
Verify your Figma token
Validate your JSON config
Check Claude Desktop logs
Manually start the MCP server
Once configured, you can use Figma files directly in Claude!
Contact
This server cannot be installed
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Enables interaction with Figma designs through the Figma API, allowing users to export images in multiple formats, extract style data and CSS, analyze design elements, and retrieve SVG code from Figma files. Supports batch operations and comprehensive design element analysis including images, vectors, and components.
Related MCP Servers
- AsecurityFlicenseAqualityEnables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.Last updated -5725202
- AsecurityFlicenseAqualityEnables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.Last updated -382,2752
- -securityAlicense-qualityGives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.Last updated -24,742MIT License
- -securityAlicense-qualityEnables AI agents to interact with Figma in real-time through a WebSocket connection. Supports comprehensive design operations including text manipulation, layouts, components, variables, and export functionality.Last updated -72207MIT License