LLM-optimized Figma MCP server.
Config is the same across clients — only the file and path differ.
{
"mcpServers": {
"Figma To Code MCP": {
"args": [
"-y",
"@tmegit/figma-to-code-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"command": "npx"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
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:
No automated test available for this server. Check the GitHub README for setup instructions.
Five weighted categories — click any category to see the underlying evidence.
No known CVEs.
No package registry to scan.
Be the first to review
Have you used this server?
Share your experience — it helps other developers decide.
Sign in to write a review.
Others in design
MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode
Official Miro MCP server - Supports context to code and creating diagrams, docs, and data tables.
AI image generation and editing with prompt optimization and quality presets. Powered by Nano Banana
Coinbase Design System - MCP Server
MCP Security Weekly
Get CVE alerts and security updates for io.github.felixAnhalt/Figma-Context-MCP and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
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:
Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.
| 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 |
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.
This MCP server transforms Figma API data into an LLM-friendly format:
backgroundColor, flexDirection, fontSize) instead of Figma internalsSee V2_CSS_PROPERTY_MAPPING.md for complete property mapping details.
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.
{
"mcpServers": {
"Figma To Code MCP": {
"command": "npx",
"args": ["-y", "@tmegit/figma-to-code-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
... [View full README on GitHub](https://github.com/felixAnhalt/Figma-Context-MCP#readme)