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
parameter - Fix: 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 -5743198
- AsecurityFlicenseAqualityEnables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.Last updated -385,6642
- -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 -54,230MIT 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