The Figma MCP server provides intelligent API access to Figma designs, optimized for AI models through compact data formats, smart context management, and tools for design analysis and parallel implementation.
Core Capabilities:
Navigation & Discovery: List pages and frames, search components by name with partial matching, and access elements using human-readable names or direct node IDs from Figma URLs
Design Analysis: Extract frame hierarchies in compact ASCII tree format with 95% token reduction (205k → 10k chars), analyze page structures to identify sections and transition elements, and get complete page context (structure, screenshots, assets, styles) in one API call
Asset Extraction: Automatically categorize and export icons (SVG), images (PNG), and composite groups to organized folders with hierarchical naming, plus extract design tokens (colors, typography, spacing, shadows, effects) and published styles
Implementation Validation: Perform pixel-perfect comparisons between Figma designs and live browser implementations, validate element positions/dimensions/bounds, detect content overflow, verify asset loading and DOM element presence, and test across responsive breakpoints
Parallel Implementation Support: Generate agent-ready contexts for isolated sections, enabling multi-agent parallel work on different parts of a design
Session Management: Maintain context across requests with caching and replay functionality, view session state, and reset when needed
Smart Filtering: Automatically exclude invisible elements (visible: false) from all outputs to match Figma's design view
Optimization Features: Handle large files with automatic chunking and pagination (>50 pages/frames, >1000 elements), manage Figma API rate limits (120-480 req/min), control tree traversal depth to balance detail vs. token usage, and provide real-time progress tracking during operations
Provides tools for accessing Figma files through the REST API, including navigation of pages and frames, extraction of design tokens and assets (SVGs, images), screenshot generation, and component search with intelligent context management and compact tree output format.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Figma MCPshow me the structure of the landing page in the Validado file"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@alucardeht/figma-mcp
MCP server for Figma API with intelligent context management and token optimization.
v3.0.0 — Compact tree output format with 95% token savings.
Installation
Claude Code
Get your Figma Token
Open Figma Settings
Navigate to Personal access tokens
Click Create a new token
Copy the token immediately (it won't be shown again)
Requirements
Figma Plan
The Figma REST API works with any plan, but rate limits differ significantly:
Plan | File Access | Rate Limit |
Starter (Free) | 6 requests/month | Impractical for real use |
Professional | Unlimited | 120 req/min |
Organization | Unlimited | 480 req/min |
Important: Free accounts are limited to 6 API calls per month for file content. This makes the MCP server impractical without a paid plan.
Dev Mode is not required — this MCP uses the REST API, not Dev Mode features.
Features
Compact Tree Output (NEW in v3.0)
95% token reduction: 205k chars → 10k chars for typical landing pages
ASCII tree format: Clear hierarchical structure with
├─,└─,│Essential info preserved: Positions, dimensions, colors, layouts, overflow indicators
Example output:
Smart Navigation
Name-based access: Use human-readable names, no IDs required
Partial matching: "Landing" matches "Landing page"
Session state: Maintains context across requests
Invisible Element Filtering
By default, elements with visible: false in Figma are excluded from all MCP outputs:
Frame structure (
get_frame_info) - Only visible elements in the treeAsset extraction (
extract_assets) - Only visible icons and imagesStyle collection (
extract_styles) - Only styles from visible elementsPage analysis (
analyze_page_structure) - Only visible sections and components
This ensures the MCP output matches what you actually see in Figma's design view, not hidden elements used for design iteration, disabled variants, or placeholder components.
Why this matters: Designers often hide elements (placeholders, alternative versions, work in progress). Without filtering, the AI model would see and potentially implement these invisible elements, causing divergence from the intended design.
Asset Management
Organized extraction: Assets saved to
icons/andimages/foldersDesign tokens: Extract colors, typography, effects
Configurable screenshots: Scale 1-4x with dimension limits
Available Tools
Navigation
Tool | Description |
| List all pages in a file |
| List frames on a page |
| Get frame structure in compact format |
| Get frame via node_id (faster direct access) |
| Find components by name |
Extraction
Tool | Description |
| Export frame as PNG |
| Export frame via node_id (faster direct access) |
| Extract design tokens |
| Export SVGs and images |
| List published styles |
Validation
Tool | Description |
| Pixel-perfect comparison between Figma and browser, results organized by visual sections with match scores, bounds, colors, and CSS tree |
| Detect content overflow |
| Compare position: Figma vs browser |
| Compare dimensions: Figma vs browser |
| Pixel-perfect diff with pixelmatch |
| Check elements exist in DOM |
| Verify images are loaded |
| Validate specific viewport |
| Test mobile, tablet, desktop |
Session
Tool | Description |
| Replay previous response from cache |
| View current session state |
| Clear all cached data |
Direct Access via Node ID
Both get_frame_info and get_screenshot accept node_id as an alternative to page_name + frame_name for faster, direct access.
How to get node_id:
Open frame in Figma editor
Copy the ID from the URL:
https://www.figma.com/design/FILE_KEY/...?node-id=NODE_IDNode ID format example:
40000056-28165
Usage:
Benefits:
Skips page/frame name lookup (1 fewer API call)
More direct and reliable
Useful for specific design reviews
Compact Format Reference
The get_frame_info tool returns a compact tree format optimized for LLM context:
Attributes shown:
bg:#hex— Background colorrow/col— Layout directiongap:N— Spacing between childrenradius:N— Border radiusshadow— Has drop shadowINSTANCE/VECTOR/TEXT— Node type↓overflow:Npx— Content overflows bounds
Example Workflow
Rate Limits
Plan | Requests/min |
Free | 120 |
Professional | 240 |
Organization | 480 |
Use pagination with continue=true to stay within limits.
License
MIT
Issues? Open an issue