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. |
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