Figma Context MCP

by glips

Design-to-code actually works now. And the community shipped it before Figma did.glips/figma-context-mcp is the MCP server that pipes Figma layout data — node trees, properties, design tokens, styles — straight into Claude Code, Cursor, Copilot, and any MCP-compatible agent. You point your agent at a Figma frame. The agent reads the structure. The agent writes the React, SwiftUI, or Flutter code.Why It MattersFigma shipped an official VS Code MCP integration on March 6, 2026. That is great if you live in VS Code. It is useless if you work in Claude Code, Claude Desktop, Cursor, or Windsurf.glips/figma-context-mcp ships for all of them. It predates Figma's official server by six months, and the community kept using it because:It works with any MCP client, not just VS Code.It uses the standard Figma REST API, so no Dev Mode seat required.It is lighter — TypeScript, self-hostable, no bundled editor.It supports MCP v2.1 with OAuth 2.1 and streamable HTTP, so you can host it behind your team's SSO and share across developers.What You Can Actually BuildTell Claude Code: "Read Figma frame X and generate a React component that matches, using our Tailwind config." The agent calls the MCP server. The server returns the layout tree and tokens. Claude writes the JSX. You review and commit.The quality of design-to-code depends on how clean the Figma file is — auto-layout frames convert well, one-off absolute-positioned groups convert poorly. But for a design-system-driven team, this is the first workflow that reliably hits 70-80% usable code on first generation.Installgit clone https://github.com/glips/figma-context-mcp cd figma-context-mcp npm install cp .env.example .env # add FIGMA_API_KEY npm run build npm startAdd to your MCP client config (Claude Desktop, Cursor .cursor/mcp.json, or Claude Code .mcp.json) and point it at http://localhost:3333 or your hosted URL.Related ResourcesArticle: GPT-5.5 just shipped — the agentic model that pairs with Figma Context MCP for design-to-code.Tool: Android Studio Panda 4 — pipe Figma designs into Panda 4 for native Android mobile UI generation.Repo: Microsoft MarkItDown — convert design specs and PDFs into Markdown for the same Claude session.Skill: Awesome Claude Code Toolkit — skills and agents to extend the Figma-to-code pipeline.

FAQ