Figma AI Agents: Set Up Claude Code to Design on Your Canvas

The gap between design and code just got a lot smaller.

On March 24, Figma launched open beta for AI agents that can design directly on the Figma canvas. Not generate images. Not make suggestions. Actually create and edit components, apply your design system variables, set up auto layout — the real stuff that designers do by hand.

And the tool that makes it work? An MCP server that connects to Claude Code, Cursor, Codex, and other coding agents.

Post by @figma

If you use Claude Code and Figma, this is worth setting up. Here’s how — and what to expect once you do.

What Figma AI Agents Actually Do

Before getting into setup, let’s be clear about what this is and isn’t.

What it does:

Creates frames, components, and design elements directly on your Figma canvas
Reads your existing design system (components, variables, tokens)
Applies auto layout, spacing, and typography from your tokens
Generates designs that follow your team’s conventions (if you teach it)
Works with any MCP-compatible agent — Claude Code, Cursor, Codex, Copilot CLI, Augment, Warp

What it doesn’t do (yet):

Replace a designer’s judgment on layout, hierarchy, or visual balance
Handle complex responsive design patterns reliably
Work with prototype interactions or animations
Generate production-ready designs without human review
Work offline or without a Figma account

This is a power tool, not a replacement. Think of it as having a fast junior designer who knows your design system perfectly but needs direction on the bigger picture.

How to Set It Up with Claude Code

There are two ways to connect Figma’s MCP server to Claude Code. The plugin method is faster.

Method 1: Plugin Install (Recommended)

Open your terminal and run:

claude plugin install figma@claude-plugins-official

That’s it. The plugin installs the MCP server settings and includes Agent Skills for common design workflows.

Verify it’s connected by running /mcp in Claude Code. You should see Figma listed as an active server.

Method 2: Desktop MCP Server

If you prefer the manual route:

Open the Figma desktop app (make sure it’s updated to the latest version)
Click the Figma menu in the upper-left corner
Go to Preferences
Select Enable Dev Mode MCP Server
You’ll see a confirmation that the server is running at http://127.0.0.1:3845/sse

Then add this server URL to your Claude Code MCP configuration.

Heads up: Free Figma users get about 6 uses per month with the desktop MCP method. If you’re building something real, you’ll hit that limit fast.

Two Ways to Work With It

Once connected, you interact with Figma through Claude Code in two modes:

Selection-Based (Best for iteration)

Open a Figma file and select any frame or component
In Claude Code, ask: “Use my current Figma selection and improve the spacing”
Claude reads the selection via get_design_context, which returns a structured representation of your design
Claude writes changes back to the canvas

This is great for refining existing designs — tweaking spacing, swapping components, adjusting typography.

Link-Based (Best for new designs)

Copy a Figma file URL or frame link
Paste it in Claude Code with a prompt: “Look at this Figma design and create a dark mode variant”
Claude fetches the design context from the link and generates the variant

This works well when you want to reference one design and create something new from it.

Teaching Agents Your Design System with Skills

This is the part that nobody’s talking about enough.

Figma introduced “skills” — markdown files that teach agents how to behave on your canvas. They encode your team’s conventions: which components to use, how to handle edge cases, what spacing rules to follow.

Here’s what a simple skill looks like:

# Button Design Skill

## When creating buttons:
- Always use the `Button/Primary` component from the design system
- Apply `--spacing-sm` (8px) for internal padding
- Use `--color-brand-primary` for the background
- Never create custom button styles — use variants

## Edge cases:
- Icon-only buttons: Use `Button/Icon` variant with 40x40px minimum
- Long labels: Allow text truncation, never wrap

You write these in plain markdown. No plugin development. No code. Just document how your team designs, and the agent follows the rules.

Figma has a skills library at figma.com/community/skills with 9 community-built skills already, including /figma-generate-design, /apply-design-system, and /sync-figma-token.

Real Example: Creating a Card Component

Here’s what a practical workflow looks like. Say you want to create a product card.

Your prompt in Claude Code:

“Create a product card in my Figma file. Use the existing design system. The card should have a product image, title, price, and an ‘Add to Cart’ button. Apply auto layout with 16px padding.”

What happens:

Claude reads your design system via the MCP server (components, variables, tokens)
Creates a new frame with auto layout
Adds a placeholder image area
Inserts text layers for title and price, using your typography tokens
Adds a button from your component library
Applies spacing from your variables

What you’ll need to fix:

Image proportions might be off
Visual hierarchy between title and price usually needs adjusting
Button placement might not match your preferred card pattern
The overall “feel” will need a designer’s eye

It gets you about 70-80% of the way there in seconds. The remaining 20% is the part that actually requires design skill.

What It Can’t Do Well

Being honest about the limitations saves you frustration:

Responsive design — It creates designs at one size. You’ll need to manually create responsive variants or teach it via skills (and even then, it’s hit-or-miss).

Visual hierarchy — It understands that headings are bigger than body text. But the subtle stuff — how much weight to give the CTA vs. the price, where the eye should land first — that’s still very much a human skill.

Brand nuance — It can follow your color tokens and typography rules, but “making it feel premium” or “giving it more energy” aren’t instructions it handles well.

Complex layouts — Grids with asymmetric columns, overlapping elements, or unconventional spacing? You’ll spend more time debugging the output than designing it yourself.

Interactions and prototypes — The MCP server handles static design only. No prototype connections, animations, or transitions.

Figma AI Agents vs Google Stitch

If you’ve been following AI design tools, you might wonder how this compares to Google Stitch, which launched its own major update five days earlier.

The short answer: they’re solving different problems.

	Figma AI Agents	Google Stitch
Approach	Agents work inside your existing design system	AI generates designs from scratch
Best for	Teams with established design systems	Prototyping and exploring new ideas
Design system	Reads your components, variables, tokens	Creates its own components
Output	Editable Figma designs	Exportable code + DESIGN.md
Cost	Free during beta (paid API coming)	Free (350 standard + 200 pro generations/month)
Coding tools	Claude Code, Cursor, Codex, etc.	Claude Code via MCP, Cursor

For a deeper comparison, we wrote about Google Stitch’s March update and the Stitch + Claude Code workflow.

Figma’s approach is better if you already have a design system and want AI to work within it. Stitch is better if you’re starting from zero and want to explore ideas quickly.

Who Should Set This Up

Yes, do it if:

You use Claude Code (or Cursor/Codex) and Figma in the same workflow
Your team has an established design system with components and tokens
You frequently create variations of existing patterns (cards, forms, tables)
You want to speed up the handoff between design and development

Skip it if:

You don’t use an MCP-compatible coding tool
You’re a solo designer who prefers full manual control
Your designs are highly custom with few reusable patterns
You’re on Figma’s free plan and the 6 uses/month limit would frustrate you

Getting Started Today

Run claude plugin install figma@claude-plugins-official in your terminal
Verify with /mcp in Claude Code
Open a Figma file with your design system
Start simple: “Read my Figma design system and list the available components”
Try a small task: “Create a simple header component using my design system”
Write your first skill: document one design pattern your team uses repeatedly

The beta is free. The setup takes five minutes. And even if the output needs tweaking, watching an AI agent create Figma components from your design system in real time is genuinely impressive.

Just don’t expect it to replace your designer. Not yet.

Sources: