Claude Code just got write access to your Figma files

On March 24, 2026, Figma — the design platform used by most product teams worldwide — made a change that affects every designer who works alongside AI tools: AI agents can now write directly to your Figma canvas. Claude Code, Cursor, Codex (OpenAI), GitHub Copilot CLI, and six other AI tools can now do more than read your design files. They can create components, edit layouts, apply design tokens (reusable style variables like colors and spacing), and build within your design system — without you touching the canvas.

This is the first time a major design platform has given AI agents true write access to its core editing environment. The feature launched in public beta, free to use, with no upgrade required for existing Figma accounts.

What Changed — and Why It Is a Big Deal

Until now, AI tools had a fundamental limitation with design files: they could look but not touch. A developer using Claude Code could ask "make this button match our design system," and the AI would describe what to change while you made the edits manually. The AI was an advisor, not a collaborator.

That workflow is now gone. Figma has opened its canvas through the use_figma MCP — where MCP stands for Model Context Protocol, the open standard (similar to how a USB port lets many different devices connect to a computer) that lets AI tools connect to external services and take direct actions within them.

With write access enabled, Claude Code can now receive a prompt like "build a settings page using our existing components" and execute it directly inside Figma — placing components from your library, applying your variables, following your established patterns. The design appears on the canvas without a human moving a single element.

9 AI Tools That Can Now Edit Your Figma Files

Figma granted write access to nine AI tools on launch day. All of them use the same underlying MCP connection:

All nine tools interact with Figma files through the same MCP server, meaning you can switch between tools without losing context or having to reconfigure your design file connection.

The Skills System — Teaching AI Your Team's Design Rules

The most significant part of this launch is not write access itself — it is the Skills system. A skill is a plain-text markdown file (a simple document anyone can write in any text editor, requiring zero coding) that tells AI agents how to behave when working in your Figma files.

For example, a skill might read:

When creating a new card component:
- Use Card/Base from the component library
- Apply the primary/600 color token for interactive states
- Include shadow-md from the shadow scale
- Check for an existing similar component before creating a new one
- Never hard-code hex colors — always use design tokens

This skill encodes your team's conventions into AI behavior. When Claude Code or Cursor touches your Figma file, they follow your actual design system rules — not generic AI assumptions about what “good design” looks like.

The crucial detail: anyone can write a skill. No plugin development. No code required. A designer who has never written a line of code can create a skill file in plain English, and the AI reads and follows it exactly.

Pricing — Free Now, Paid Later

The Figma AI Canvas feature is currently in public beta and completely free to use. This includes the MCP integration, write access for all nine AI tools, and the Skills system. Figma has confirmed this will eventually become a usage-based paid feature, though no pricing tiers have been announced yet.

This is the same pattern Figma used for features like Dev Mode (free in beta, paid later). Getting in now means you can build workflows and skills while the feature is cost-free and relatively uncrowded.

How to Connect Claude Code to Figma Right Now

If you have Claude Code installed, adding Figma write access takes about two minutes:

claude mcp add figma

After connecting, open Claude Code and try:

"Open my Figma file at [paste your file URL] and create a user profile page
using our existing components. Follow the design patterns in the current file."

For Cursor: go to Cursor Settings → MCP → Add Server → enter the Figma MCP server URL → connect your Figma account via OAuth (the “Sign in with Figma” button that appears). Once connected, Cursor can read and write to any file you share.

What You Can Actually Build With This

Here are real workflows now possible that were not possible two weeks ago:

• If you are a designer: Describe a new screen in plain English and have Claude Code build it using components from your library — no manually placing elements. Review the result and iterate with follow-up prompts.
• If you are a developer: After making code changes, ask Claude Code to update the corresponding Figma frame to match — keeping design and code in sync without manual work.
• If you manage a design system: Create a skill file encoding all your component usage rules, then let any AI tool work in your Figma files without violating team conventions.
• If you are building solo: Go from a text description to a Figma prototype to working code in a single Claude Code session — no context-switching between apps required.

This is the most significant expansion of AI's role in the design workflow since design tools first started integrating AI in 2023. The official Figma blog post has full documentation, skills examples, and a getting-started guide.

Related Content — Get Started with Easy Claude Code | Free Learning Guides | More AI News