Figma Ui Mcp
Connect Figma to your agent so it can place UI on the canvas and read frames back when you ship web or mobile interfaces faster.
Overview
figma-ui-mcp is an MCP server for the Build phase that bidirectionally syncs AI-authored UI with Figma—draw on canvas and read designs back.
What is this MCP server?
- Bidirectional Figma MCP: AI draws UI on canvas and reads designs back
- npm package figma-ui-mcp at version 2.5.8 with stdio transport
- Server version 2.5.8 aligned with package for design-sync workflows
- Suited to solo builders bridging Figma and code in one agent session
- Open source at GitHub TranHoaiHung/figma-ui-mcp
- npm package version 2.5.8
Community signal: 206 GitHub stars.
What problem does it solve?
Copying between Figma and your editor by hand slows solo builders who want the agent to both design screens and implement them.
Who is it for?
Solo builders shipping UI-heavy SaaS or apps who live in Figma and want Claude Code or Cursor in the loop.
Skip if: Teams with no Figma workflow or projects that only need static mockup images without live canvas integration.
What do I get? / Deliverables
After setup, your agent can push UI to Figma and pull design context into the same thread where you write frontend code.
- Agent-driven UI elements created on Figma canvas
- Structured design readback into the coding session
- Repeatable Figma ↔ agent loop for frontend implementation
Recommended MCP Servers
Journey fit
Build / frontend is the primary shelf because bidirectional Figma drawing and readback directly supports implementation-aligned UI work. frontend captures design-to-code loops where the agent both authors and inspects Figma UI structures.
How it compares
Live bidirectional Figma MCP, not a one-way screenshot or HTML export skill.
Common Questions / FAQ
Who is figma-ui-mcp for?
It is for indie developers and designers who use Figma and want their AI agent to draw UI on the canvas and read frames back via MCP.
When should I use figma-ui-mcp?
Use it during Build frontend work—or early Validate prototypes—when you want design and code co-evolving in one agent session.
How do I add figma-ui-mcp to my agent?
Install the npm package figma-ui-mcp, configure stdio MCP in your host, authenticate to Figma per the repo instructions, and restart the agent.