Figma's own file structure is absolute positions and nested vectors — usable to render, awkward to code from — so the work here is in the middle layer: layouts inferred as Flexbox or Grid, styles emitted as CSS, and icons merged into one asset instead of dozens of fragments. Two things to plan around: pull a specific node with a depth limit rather than a whole file when the file is large, and remember responses are cached for a day, so a design changed minutes ago may not be what comes back.
A Figma reader built for code generation. Rather than returning raw Figma JSON, it simplifies the file into layout, styles and text, infers Flexbox and Grid from absolute positions, and merges scattered vector layers into single exportable icons.
- get_figma_data returns layout and style information for a file or a single node — CSS styles, text content and export info — with a depth limit for how far down the tree to go
- Layout detection that turns absolute positioning into Flexbox and Grid, which is the difference between generated code that reflows and code full of fixed offsets
- Icon merging, so a set of vector layers comes back as one exportable icon rather than a pile of fragments
- download_figma_images pulls SVG and PNG assets to a local path, covering both rendered node images and image fills, cached locally to avoid re-downloading
- Results cached for 24 hours to keep Figma API calls down, with an in-memory and on-disk cache behind it
- Design-to-code prompt templates and a lightweight resources interface for low-token access to the same data
A Figma account with API access and a personal access token in FIGMA_API_KEY. Node.js 18.0.0 or higher; installed from npm as @yhy2001/figma-mcp-server, through Smithery, or run from source over HTTP on port 3333. What the token can see in Figma is what the tools can read. It is a fork of Figma-Context-MCP with reworked data structures and layout inference.
One command plus a key — npm install -g @yhy2001/figma-mcp-server, then supply credentials