Figma To Code MCP

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)
• ✅ Compact, CSS-mappable fields (style.background, layout.direction, style.fontSize)
• ✅ Complete UI-building data preserved (layout, styling, text, components)
• ✅ Node-local layout and styles with reusable values in a shared token registry
• ✅ Omits Figma internals - no bounding boxes or constraint metadata
• ✅ 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

get_figma_design exports SVG assets automatically. Its response contains svgAssetsFolder and relative svgPathInAssetFolder filenames; combine them to locate each file. Use svgOutputDir to export directly to a chosen assets directory. It also renders the requested node as a 1x PNG: its response contains renderedDesignNodeAssetsFolder and the file name renderedDesignNodePathInAssetFolder, which you can use to compare the built result with the design. There is no separate registered read_vector_svg tool.

By default get_figma_design returns the components the design uses in componentSets, each with propKeys and propValues (the values each prop takes across the set's members). Every set is written to its own file in componentSetsFolder, as YAML or JSON to match the output format, and componentSets lists each set's file, propKeys and propValues. A set larger than 228 KB becomes a folder named after the set: its file is /index.yaml (index.json in JSON output), which lists the variants, and each variant is its own .yaml beside it, with : replaced by - (for example 7-770.yaml). These examples assume the default YAML output; with JSON output every file ends in .json. A COMPONENT_SET root gets the same treatment: when its variants exceed 228 KB, its children move out, root.file points at /index.yaml, and each variant is a .yaml beside it, since root variants carry no node id. Every file value is relative to componentSetsFolder, so a variant's file is / .yaml, not relative to its set folder. A large SECTION root keeps each frame as a stub in root.children, and each frame's design is in its file in framesFolder (see Resolving frame files). For building components from a component library, pass includeComponentVariants: true to also get every other variant of those components (all sizes, colors, and states), with their props and any visuals that can be fetched. That fetches more from Figma and returns a larger response.

With --skip-image-downloads, only get_figma_design is registered; SVG export remains available, and no node PNG is rendered.

Required Scopes

Create a Figma personal access token with these scopes:

Note: Variable resolution requires Enterprise plan. Set resolveVariables: false if not on Enterprise.

If comment access is unavailable, extraction continues without comments and logs a warning.

How it works

1. Open your IDE's chat (e.g. agent mode in Cursor).
2. Paste a link to a Figma file, frame, or group.
3. Ask Cursor to implement the design.
4. Cursor fetches CSS-aligned, LLM-optimized design data and generates accurate code.

Agents that build a page from a design should follow For LLMs.

This MCP server transforms Figma API data into an LLM-friendly format:

• Compact layout/style fields (layout.direction, style.background, style.fontSize) instead of verbose Figma internals
• Node-local styles with every distinct design value referenced from the tokens registry
• Flexbox primitives for auto-layout, with parent-local positioning for overlays and freeform graphics
• Complete UI data (colors, typography, spacing, effects)
• 99.5% size reduction while preserving all UI-critical information

The current response uses schema v3. V3_CSS_PROPERTY_MAPPING.md describes the older v2 mapping, not the current response contract.

Interpreting visual details in v3

The response includes optional fields for details that cannot be represented by one text style or a simple flex layout:

The existing full text field and node-level style remain present. When textRuns exists, render its runs in order rather than rendering text a second time. Resolve the node's base typography token first, then apply each run's scalar overrides. Run text concatenates to the original full text; plain runs inherit the base style. Explicit normal, none, and zero values reset inherited styling.

For positioned children, keep the emitted containing block, local dimensions, and offsets. Real auto-layout siblings stay in flex flow; overlay notifications, chart curves, and guides can share an absolute coordinate space. A Figma layout mode of NONE is not converted into a flex column.

borderWidths replaces the uniform borderWidth for asymmetric strokes. Apply the shared border color only to the indicated edges; do not invent a surrounding box border. Uniform borders continue using borderWidth.

Gradient handles may lie outside the unit square; do not clamp them or discard them in favor of a default direction.

SVG exports keep original node-local coordinates and include the union of the local canvas and visible geometry. Each exported node's svgViewport matches the file's viewBox. Keep the node's original layout footprint as a wrapper, then place the SVG or image at svgViewport.x / y (a missing one means 0), with the viewport's width / height. Do not stretch this expanded asset to the original node dimensions: chart series can have different ink bounds but must share the same local coordinate system. Preserve ancestor clipping. Solid paint colors are baked into design-exported assets so external images retain their colors too.

For LLMs

Follow this section when you build a page or component from a Figma node with get_figma_design.

Response overview

| componentSetsFolder | Folder with the component set files.