Figma React
- MananSingh2001/figma-react
figma-react MCP is an MCP server that converts Figma designs into React code through your coding agent.
About
figma-react is a stdio MCP server that converts Figma designs into React code so developers can move from validated UI mocks to implementable components without manually redrawing every frame. SaaS and mobile-web products often stall at the design-to-code cliff: you have Figma clarity but lose hours translating spacing, variants, and component names into JSX and CSS modules. Registering this server in your agent lets natural-language tasks target Figma-derived structure while you stay in the frontend lane alongside your app router, state, and API hooks. The registry manifest identifies npm package @manansiingh/figma-react-mcp-server at version 1.0.3 with stdio transport, aligning with typical Claude Code and Cursor MCP setups. Expect to refine generated React for accessibility, design tokens, and your component library conventions—the server accelerates the first pass, not pixel-perfect production parity. It is an integration surface for Figma plus React, not a substitute for design critique skills or a complete component system; pair it with your token strategy and review pass before ship.
- MCP server focused on converting Figma designs into React code
- Published as npm package @manansiingh/figma-react-mcp-server at manifest version 1.0.3
- Stdio transport for Claude Code, Cursor, and other MCP clients
- Shortens the handoff from design exploration to component files in-repo
- Design-to-code MCP—not a Figma plugin marketplace or visual regression test suite
Figma React by the numbers
- Data as of Jul 7, 2026 (Skillselion catalog sync)
claude mcp add figma-react -- npx -y @manansiingh/figma-react-mcp-serverAdd your badge
Show developers this MCP server is listed on Skillselion. Paste this into your README.
| Package | @manansiingh/figma-react-mcp-server |
|---|---|
| Transport | STDIO |
| Auth | None |
| Repository | MananSingh2001/figma-react ↗ |
What it does
Bridge design and implementation by letting your agent convert Figma frames into React components while you build the UI shell of your product.
Who is it for?
Best when you're shipping React or React Native–adjacent web UIs and live in Figma for validate/prototype visuals and want agent-assisted codegen in the same repo.
Skip if: Skip if you're on Vue/Svelte-only stacks, design systems that forbid codegen, or flows that need full Figma Dev Mode parity without human edit passes.
What you get
Your agent can generate React starting points from Figma via MCP so you spend review time on tokens, a11y, and wiring—not redrawing static layouts.
- React component scaffolding derived from Figma designs
- Configured stdio MCP server for design-to-code tasks
- Faster first-pass UI implementation aligned to approved frames
By the numbers
- Manifest version 1.0.3
- 1 npm stdio package (identifier @manansiingh/figma-react-mcp-server)
- Stdio transport type per published server schema
Recommended MCP Servers
0piFree, 2hr expiry agent storage to cache contexts, bridge workflows, or dump data.
100Hires AI ATS & Recruitment SoftwareOfficial 100Hires MCP: AI ATS & Recruitment Software for candidates, jobs, applications, interviews.
123elec McpInterface MCP officielle du site marchand 123elec, catalogue, stock, panier, commandes.
1stayHotel booking MCP server.2
2D Assets MCPMCP server for generating advanced mock 2D PNG assets for game prototypes.43D MeshWeaverMesh spatial optimizer reducing geometric overhead in 3D assets.How it compares
Figma-to-React MCP bridge—not a UI brainstorming skill and not a deployment or testing MCP.
FAQ
Who is figma-react MCP for?
frontend developers using Figma for UI who code in React and want Claude Code or Cursor to draft components from designs via MCP.
When should I use figma-react MCP?
Use it in the build frontend subphase after you have Figma frames for key screens and need JSX scaffolding before you hook data, routing, and design tokens.
How do I add figma-react MCP to my agent?
Install and register the npm stdio server @manansiingh/figma-react-mcp-server per the GitHub repository instructions, configure Figma access as documented there, restart your MCP client, and run design-to-React tasks from your session.