Skip to main content
Glama
sankalp51

figma-to-react-mcp

by sankalp51

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault

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

CapabilityDetails
tools
{
  "listChanged": true
}
prompts
{
  "listChanged": true
}
resources
{
  "listChanged": true
}

Tools

Functions exposed to the LLM to take actions

NameDescription
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

NameDescription
figma_to_reactKick 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

NameDescription
conversion-guideRules for antd + AG Grid + ApexCharts + Tailwind conversion.

Latest Blog Posts

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