Figma to Code MCP
Supports UIby vincegx
Transform Figma designs into pixel-perfect React + Tailwind components with visual validation.
What it does
This server bridges the gap between design and development by converting Figma layouts into high-quality React and Tailwind CSS code. It uses a multi-phase pipeline involving AST transformations and Puppeteer-based visual validation to ensure the output matches the original design.
Tools
figma-analyze: Extracts metadata and chunks from Figma and generates code.figma-merge: Combines multiple screens (Desktop, Tablet, Mobile) into a single responsive component.figma-reprocess: Regenerates files for an existing export without new MCP calls.figma-validate: Performs visual fidelity checks between Figma and the web render.
Installation
Run via Docker Compose:
docker-compose up --build
Ensure Figma Desktop is running on port 3845. Add to claude_desktop_config.json:
{
"mcpServers": {
"figma-to-code": {
"command": "docker",
"args": ["run", "-i", "--rm", "vincegx/figma-to-code"]
}
}
}
Supported hosts
- Claude Desktop
Quick install
docker-compose up --buildInformation
- Pricing
- free
- Published
- 6/15/2026
- stars
- 0
Categories
Choose your AI client and follow the steps below.
Claude Desktop
Requires Figma Desktop running on port 3845. Use Docker for deployment.Related Apps
DiffSitter MCP
MCP ServerAI-powered structural code navigation using tree-sitter ASTs for semantic understanding across 14+ languages.
OpenAI Apps SDK Examples
MCP AppOfficial example gallery of interactive MCP widgets for ChatGPT — 3D viewers, maps, carousels, shopping carts, and more.
Human MCP
MCP ServerGive AI agents human-like senses: visual analysis, image/video generation, speech synthesis, browser automation, and advanced reasoning — 29 MCP tools in one se
Shopify MCP Server
MCP ServerDirect interaction with Shopify store data via GraphQL API for managing products, customers, and orders.
Git MCP Server
MCP ServerFull-featured Git MCP server exposing 28 tools for AI agents to clone, commit, branch, diff, merge, rebase, and more via STDIO or Streamable HTTP.
CodexPotter
MCP ServerAutonomous reconciliation loop that drives Codex to align your codebase with instructed states.
Smart Coding MCP
MCP ServerSemantic code search for AI assistants using local embeddings — find code by meaning, not just keywords.
Snowflake MCP Server
MCP ServerDirect Snowflake database interaction via MCP, enabling AI to run SQL queries, explore schemas, and manage data insights.