Figma Opens the Canvas to Agents: MCP Server Lets Claude Code and Cursor Create and Edit Designs Directly

Figma released its MCP server in open beta, and this one matters more than most MCP launches. AI agents can now read, create, and edit components directly on the Figma canvas using your design system variables. The use_figma tool works with Claude Code, Cursor, Codex, Copilot CLI, and any MCP-compatible client.

I've been waiting for this. My design background is the reason I can ship products that don't look like developer projects, but the gap between design intent and code output has always been a manual bridge. Figma's MCP server is the first real attempt to let agents cross that gap natively.

The skills system is what makes it actually useful. Figma published figma-use, a markdown-based skill file that teaches agents how to behave on the canvas. If you've written a CLAUDE.md file, you already understand the pattern. Install it, and the agent knows how to create frames, apply auto layout, reference design system tokens, and build components that respect your constraints. Without the skill, agents produce garbage on the canvas. With it, they produce usable designs.

Setup is simple: claude mcp add --transport http figma https://mcp.figma.com/mcp. Or claude plugin install figma@claude-plugins-official. The API will eventually be paid, but it's free during beta while Figma works out agentic seat pricing.

For builders who've been running design-to-code workflows manually, this changes the loop. You can now describe a component in natural language, have Claude Code create it in Figma, review it visually, then generate the React/CSS from the actual design. The design file becomes the source of truth instead of a reference screenshot. Combined with Google Stitch's DESIGN.md export that gives coding agents design system awareness, we're getting close to a real design-to-code pipeline that doesn't require a human copying hex values.