io.github.felixAnhalt/Figma-Context-MCP
LLM-optimized Figma MCP server.
Ask AI about io.github.felixAnhalt/Figma-Context-MCP
Powered by Claude Β· Grounded in docs
I know everything about io.github.felixAnhalt/Figma-Context-MCP. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
Figma To Code MCP
Transform Figma design data into a compact, LLM-friendly format for code generation and UI building.
Why This Project?
Figma To Code MCP specializes in extracting only the information LLMs need to build UIs while removing Figma-specific metadata that isn't relevant for code generation. The result:
- β 99.5% size reduction on real Figma files (65 MB β 128 KB)
- β CSS-aligned property names (backgroundColor, flexDirection, etc.) matching LLM training data
- β Complete UI-building data preserved (layout, styling, text, components)
- β Inline styles - no separate dictionaries to parse
- β Omits Figma internals - no bounding boxes, constraints, or prototype data
- β Variable resolution - resolves Figma variables to actual values
- β SVG support - exports vector graphics to disk
- β Pattern collapsing - deduplicates repeating UI patterns
Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.
Available Tools
| Tool | Description |
|---|---|
get_figma_design | Fetches CSS-aligned, LLM-optimized design data. Supports SVG export to custom dir. |
get_image_fills | Retrieves image fill URLs from a Figma file |
render_node_images | Renders Figma nodes as PNG images |
read_vector_svg | Reads vector node data as SVG |
Required Scopes
Create a Figma personal access token with these scopes:
| Scope | Purpose |
|---|---|
file_content:read | Read file nodes, layout, styles |
library_content:read | Read published components/styles |
file_variables:read | Read variables (Enterprise only, optional) |
Note: Variable resolution requires Enterprise plan. Set
resolveVariables: falseif not on Enterprise.
How it works
- Open your IDE's chat (e.g. agent mode in Cursor).
- Paste a link to a Figma file, frame, or group.
- Ask Cursor to implement the design.
- Cursor fetches CSS-aligned, LLM-optimized design data and generates accurate code.
This MCP server transforms Figma API data into an LLM-friendly format:
- CSS property names (
backgroundColor,flexDirection,fontSize) instead of Figma internals - Inline styles directly in nodes (no separate dictionaries)
- Flexbox primitives for layout (no absolute positioning)
- Complete UI data (colors, typography, spacing, effects)
- 99.5% size reduction while preserving all UI-critical information
See V2_CSS_PROPERTY_MAPPING.md for complete property mapping details.
Getting Started
Many code editors and other AI clients use a configuration file to manage MCP servers.
The tmegit-figma-to-code-mcp server can be configured by adding the following to your configuration file.
MacOS / Linux
{
"mcpServers": {
"Figma To Code MCP": {
"command": "npx",
"args": ["-y", "@tmegit/figma-to-code-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows
{
"mcpServers": {
"Figma To Code MCP": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@tmegit/figma-to-code-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}
Or you can set FIGMA_API_KEY and PORT in the env field.
API Calls & Rate Limits
One execution of get_figma_design makes the following API calls:
| Call | Endpoint | Tier | Description |
|---|---|---|---|
| 1 | GET /v1/files/{fileKey}/nodes | T1 | Fetch requested nodes (geometry=paths) |
| 2 | GET /v1/files/{fileKey}/styles | T3 | Fetch all styles |
| 3 | GET /v1/files/{fileKey}/variables/local | T2 | Fetch local variables (if resolveVariables=true) |
| 4 | GET /v1/components/{key} | T3 | Resolve component key β library file (up to 3 tries) |
| 5 | GET /v1/files/{libFileKey}/components | T3 | Fetch all components from library |
| 6+ | GET /v1/files/{libFileKey}/nodes | T1 | Fetch component definitions from each library |
Amount of T1 calls: 1 + N (N=number of unique library files) Amount of T2 calls: 1 (if resolveVariables=true) Amount of T3 calls: 2 + N (styles + component key resolution + N library components)
For Professional plan with Dev/Full seat: 10 req/min (Tier 1), 25 req/min (Tier 2), 50 req/min (Tier 3).
Star History
Acknowledgment
This project was initially inspired by the ideas explored in the original Figma Context MCP by GLips: https://github.com/glips/figma-context-mcp
While the original project provides a Model Context Protocol (MCP) server that simplifies Figma data for use with AI coding agents, this implementation has been substantially redesigned with a different data model, API, and processing approach, and should be considered an independent system.
