figma-to-react-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| prompts | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| get_figma_designA | Fetch a Figma file or a specific node (from a URL or file key) and return a compact, LLM-friendly tree with layout, style, semantic role hints, and suggested Tailwind classes. Use this FIRST before generating any React code. |
| extract_design_tokensA | Walk a Figma file/node and extract colors, typography, spacing, radii, and shadows. Returns a tailwind.config theme.extend snippet, CSS variables, and an antd ConfigProvider theme. Wire these in before writing components. |
| download_figma_imagesA | Render given node ids to image URLs (svg for icons/vectors, png for raster). Optionally save them to a local directory on the machine running this server. |
| scaffold_react_projectA | Generate a complete React + Vite + antd + AG Grid + ApexCharts + Tailwind project skeleton with the Figma design tokens already wired into tailwind.config, index.css, and the antd ConfigProvider theme, and WRITE it to disk. Returns just the list of files written — no boilerplate in context. Run this once, then add generated pages/components. |
| generate_componentA | Turn a Figma frame/node into a ready-to-use .tsx component: antd components by role, Tailwind for layout, AG Grid for tables (with columnDefs derived from headers), ApexCharts for charts (type + labels derived from the design), and repeated rows expanded to .map(). If outDir is set the file is written to disk (kept out of context); otherwise the code is returned. This is the heavy lifting — refine the result rather than writing from scratch. |
| convert_figma_to_reactA | End-to-end from a whole Figma FILE: fetch the design, extract tokens, enumerate EVERY top-level screen across all pages, scaffold the React + Vite + antd + AG Grid + ApexCharts + Tailwind project, and generate one page component per screen — writing everything to disk. Returns a concise summary only (the whole project stays out of the model's context). If the file contains mobile-only screens (width ≤ 480px) it ASKS whether to also export those as a separate React Native (Expo) app. Pass a bare file key or any file URL — a specific ?node-id= is optional and just narrows the scope. |
| get_conversion_guideA | Return the rules for turning the simplified Figma tree into a React + Ant Design + AG Grid + ApexCharts + Tailwind project (component mapping, table→AG Grid rules, chart→ApexCharts rules, project structure). |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| figma_to_react | Kick off a full conversion of a Figma frame into a React + antd + AG Grid + Tailwind project. |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| conversion-guide | Rules for antd + AG Grid + ApexCharts + Tailwind conversion. |
TDQS
Scored across 7 tools
Each tool has a distinct purpose: guide, fetch, tokens, images, scaffold, single component, full conversion. No overlap, clear boundaries.
All tool names follow a consistent verb_noun snake_case pattern (e.g., get_figma_design, extract_design_tokens).
Seven tools adequately cover the design-to-React workflow without being excessive or insufficient.
The tool set covers the entire process: fetching design, extracting tokens, downloading images, scaffolding, generating components, and full end-to-end conversion.