Agents, meet the Figma canvas

Design decisions—from color palettes and button padding, to typography and interactivity—have always defined how products take shape. No matter how small, those decisions add up. They make your product and user experience stand out from the rest. To date, AI agents haven't had this context, which is why so many designs created by AI often feel unfamiliar and generic.

With Figma’s MCP server

, agents can now write directly to your Figma files, extending the standards you’ve carefully established over time. Via the use_figma tool, Claude Code, Codex, and other MCP clients can generate and modify design assets that are linked to your design system. No matter where product work starts—with a coding agent, in Figma, or from the command line—Figma is where it all comes into focus. "Teams at OpenAI use Figma to iterate, refine, and make decisions about how a product comes together," says Ed Bayes, design lead at Codex. "Now, Codex can find and use all the important design context in Figma to help us build higher quality products more efficiently.”

You can move fluidly between code and canvas, with agents operating in the same shared context. And skills—a set of instructions, written as markdown files—now directly shape how agents build on the Figma canvas. That expertise guides every piece of output and is more valuable now than ever.

Instruct your agents with skills

Opening the canvas to AI agents unlocks access to your design systems and files. Skills define how agents use that access. They outline how a workflow is executed in Figma: which steps to take, what sequencing to follow, and which conventions to abide by. But beyond the workflow itself, skills ensure that agents have the specialized knowledge and context they need to produce durable, brand-aligned designs—and know what good looks like. They bridge the knowledge gap so agents know how to work in Figma. "The best products come from teams who care deeply about the details," says Cat Wu, head of product for Claude Code. "Many design teams shape their work in Figma and bring those products to life with Claude Code. Skills teach Claude Code how to work directly in the design canvas, so you can build in a way that stays true to your team’s intent and judgment."

Anyone can author a skill and writing one doesn’t require building a plugin or writing code. Several of the skills launching today come from practitioners in the community who are building these workflows and defining what great design looks like in practice. At the core is a foundational Figma skill—/figma-use—which all other skills build on. It gives agents a shared understanding of how Figma works, from its structure to its core principles. Teams can then customize and iterate on this capability to shape how their agents work.

Here are nine example skills that you can explore today:

• /figma-generate-library: Create new components in Figma from a codebase
• /figma-generate-design: Create new designs in Figma using existing components and variables
• /create-voice: Generate screen reader specs (VoiceOver, TalkBack, ARIA) from UI specs (Ian Guisard, Uber)
• /cc-figma-component: Generate Figma components from a structured JSON contract (Nick Villapiano, One North)
• /apply-design-system: Connect existing designs to system components (Chris Goebel, Edenspiekermann)
• /rad-spacing: Apply hierarchical spacing with variables and fallbacks (Nolan Perkins, Rad Collab)
• /edit-figma-design: Orchestrate Figma design workflows using Warp and Oz (Warp)
• /sync-figma-token: Sync design tokens between code and Figma variables with drift detection (Firebender)
• /multi-agent: Run parallel workflows and implement designs in Augment (Augment Code)

Skills don’t just define what you build in concert with agents. They also shape how output is refined through self-healing loops. When an agent generates a screen, it can take a screenshot and iterate on what does not match. Because it’s working with real structure, components, variables, and auto layout, those adjustments interact with the system itself, not just the visual output.

AI models are inherently non-deterministic, so the same prompt can produce different results. Skills make that behavior more predictable by encoding specific steps, guidelines, and code to follow. Your conventions are no longer static documentation. They become rules agents follow as they work—applied through components, variables, and the structure you’ve already defined.

A step toward a more powerful canvas

Since this capability is native to the Figma MCP server, it benefits from Figma’s security and reliability, while opening access to surfaces like Code Connect

, Figma Draw, and FigJam through the Plugin API. Skills also give the Figma community a faster, more accessible path to share what they’ve built or create solutions specific to how they work.

Looking ahead, we’re expanding what agents can do in Figma—making the canvas more powerful with native AI functionality and making skills easier to use and share. We’ll also continue adding more functionality to this tool, working toward parity with the Plugin API, starting with image support and custom fonts. Read our guide to the Figma MCP server to start using this tool, or explore our developer docs to learn how to create a skill. We can't wait to see what you and the agents you use design and build together.

We’re very excited about what this feature means for the future of design. We started this as an expansion of code to canvas

two weeks ago, and already see it unlocking new ways of working internally. This will be a paid API, but we’ll be offering it for free during the beta period as we learn how to account for agentic behavior in our paid seats. It currently works with MCP clients like Augment, Claude Code, Codex, Copilot CLI, Copilot in VS Code, Cursor, Factory, Firebender, and Warp.