{ "markdown": "\n\n
\n

Figma To Code MCP

\n

Transform Figma design data into a compact, LLM-friendly format for code generation and UI building.

\n \n \"weekly\n \n \n \"MIT\n \n
\n
\n\n
\n\n## Why This Project?\n\nFigma 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:\n\n- ✅ **99.5% size reduction** on real Figma files (65 MB → 128 KB)\n- ✅ **CSS-aligned property names** (backgroundColor, flexDirection, etc.) matching LLM training data\n- ✅ **Complete UI-building data** preserved (layout, styling, text, components)\n- ✅ **Inline styles** - no separate dictionaries to parse\n- ✅ **Omits Figma internals** - no bounding boxes, constraints, or prototype data\n- ✅ **Variable resolution** - resolves Figma variables to actual values\n- ✅ **SVG support** - exports vector graphics to disk\n- ✅ **Pattern collapsing** - deduplicates repeating UI patterns\n\n---\n\nGive [Cursor](https://cursor.sh/) and other AI-powered coding tools access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) server.\n\n## Available Tools\n\n| Tool | Description |\n| -------------------- | ---------------------------------------------------------------------------------- |\n| `get_figma_design` | Fetches CSS-aligned, LLM-optimized design data. Supports SVG export to custom dir. |\n| `get_image_fills` | Retrieves image fill URLs from a Figma file |\n| `render_node_images` | Renders Figma nodes as PNG images |\n| `read_vector_svg` | Reads vector node data as SVG |\n\n## Required Scopes\n\nCreate a Figma personal access token with these scopes:\n\n| Scope | Purpose |\n| ---------------------- | ------------------------------------------ |\n| `file_content:read` | Read file nodes, layout, styles |\n| `library_content:read` | Read published components/styles |\n| `file_variables:read` | Read variables (Enterprise only, optional) |\n\n> **Note:** Variable resolution requires Enterprise plan. Set `resolveVariables: false` if not on Enterprise.\n\n## How it works\n\n1. Open your IDE's chat (e.g. agent mode in Cursor).\n2. Paste a link to a Figma file, frame, or group.\n3. Ask Cursor to implement the design.\n4. Cursor fetches **CSS-aligned, LLM-optimized** design data and generates accurate code.\n\nThis MCP server transforms [Figma API](https://www.figma.com/developers/api) data into an LLM-friendly format:\n\n- **CSS property names** (`backgroundColor`, `flexDirection`, `fontSize`) instead of Figma internals\n- **Inline styles** directly in nodes (no separate dictionaries)\n- **Flexbox primitives** for layout (no absolute positioning)\n- **Complete UI data** (colors, typography, spacing, effects)\n- **99.5% size reduction** while preserving all UI-critical information\n\nSee [`V2_CSS_PROPERTY_MAPPING.md`](./V2_CSS_PROPERTY_MAPPING.md) for complete property mapping details.\n\n## Getting Started\n\nMany code editors and other AI clients use a configuration file to manage MCP servers.\n\nThis server requires Node.js 18 or later.\n\nThe `tmegit-figma-to-code-mcp` server can be configured by adding the following to your configuration file.\n\n### MacOS / Linux\n\n```json\n{\n \"mcpServers\": {\n \"Figma To Code MCP\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@tmegit/figma-to-code-mcp\", \"--figma-api-key=YOUR-KEY\", \"--stdio\"]\n }\n }\n}\n```\n\n### Windows\n\n```json\n{\n \"mcpServers\": {\n \"Figma To Code MCP\": {\n \"command\": \"cmd\",\n \"args\": [\n \"/c\",\n \"npx\",\n \"-y\",\n \"@tmegit/figma-to-code-mcp\",\n \"--figma-api-key=YOUR-KEY\",\n \"--stdio\"\n ]\n }\n }\n}\n```\n\nOr you can set `FIGMA_API_KEY` and `PORT` in the `env` field.\n\n## Configuration\n\nThe server reads configuration from CLI flags and environment variables. If both are set, the CLI flag wins.\n\n| Option | CLI | Env | Default |\n| -------------------------- | ------------------------ | ------------------------------------------- | --------------- |\n| Figma API key | `--figma-api-key` | `FIGMA_API_KEY` | required |\n| Figma OAuth token | `--figma-oauth-token` | `FIGMA_OAUTH_TOKEN` | unset |\n| Port | `--port` | `FIGMA_TO_CODE_MCP_PORT` or `PORT` | `3333` |\n| Host | `--host` | `FIGMA_TO_CODE_MCP_HOST` | `127.0.0.1` |\n| Output format | `--json` | `OUTPUT_FORMAT` | `yaml` |\n| Skip image tools | `--skip-image-downloads` | `SKIP_IMAGE_DOWNLOADS=true` | `false` |\n| SVG output dir | `--svg-output-dir` | `FIGMA_SVG_OUTPUT_DIR` | temp dir |\n| Prefetch library variables | `--library-file-keys` | `FIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS` | unset |\n| Cache path | `--library-cache-path` | `FIGMA_MCP_CACHE_PATH` | temp cache file |\n| Cache TTL | `n/a` | `FIGMA_MCP_CACHE_TTL_MS` | `7 days` |\n| Force cache refresh | `n/a` | `FIGMA_MCP_REFRESH_CACHE` | off |\n\nNotes:\n\n- `--library-file-keys` and `FIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS` are comma-separated Figma library file keys.\n- `FIGMA_MCP_CACHE_PATH` may point to either a file or a directory. If it is a directory, the cache file is stored as `figma-mcp-library-cache.json` inside it.\n- The library cache is used only when library file keys are configured.\n- `FIGMA_MCP_REFRESH_CACHE` forces a re-fetch on startup even if a cache file exists.\n\nExample `.env`:\n\n```env\nFIGMA_API_KEY=your_figma_pat\n# prefetch variables (tokens etc) from specific library files on startup to avoid T2 calls during design fetch\nFIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS=abc123,def456\nFIGMA_MCP_CACHE_PATH=./cache\nFIGMA_MCP_CACHE_TTL_MS=604800000\n# Uncomment to force cache refresh on next startup\n# FIGMA_MCP_REFRESH_CACHE=1\n```\n\n## API Calls & Rate Limits\n\nOne execution of `get_figma_design` makes the following API calls:\n\n| Call | Endpoint | Tier | Description |\n| ---- | ----------------------------------------- | ---- | ---------------------------------------------------- |\n| 1 | `GET /v1/files/{fileKey}/nodes` | T1 | Fetch requested nodes (geometry=paths) |\n| 2 | `GET /v1/files/{fileKey}/styles` | T3 | Fetch all styles |\n| 3 | `GET /v1/files/{fileKey}/variables/local` | T2 | Fetch local variables (if resolveVariables=true) |\n| 4 | `GET /v1/components/{key}` | T3 | Resolve component key → library file (up to 3 tries) |\n| 5 | `GET /v1/files/{libFileKey}/components` | T3 | Fetch all components from library |\n| 6+ | `GET /v1/files/{libFileKey}/nodes` | T1 | Fetch component definitions from each library |\n\nAmount of T1 calls: 1 + N (N=number of unique library files)\nAmount of T2 calls: 1 (if resolveVariables=true)\nAmount of T3 calls: 2 + N (styles + component key resolution + N library components)\n\nFor Professional plan with Dev/Full seat: **10 req/min** (Tier 1), **25 req/min** (Tier 2), **50 req/min** (Tier 3).\n\n## Star History\n\n\"Star\n\n## Acknowledgment\n\nThis project was initially inspired by the ideas explored in the original Figma Context MCP by GLips:\nhttps://github.com/glips/figma-context-mcp\n\nWhile 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.\n", "bytes": 8925, "sha": "17e804847860575dbbe38cfa36b05f7d25008ee79b283d259f8298cbfdf2f6da", "repo_slug": "felixanhalt/figma-context-mcp", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_felixanhalt_figma_context_mcp_1e8f91d8/readme" }