figma-to-react-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Capabilities
Features and capabilities supported by this server
| 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. |
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/sankalp51/figma-to-react-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server