Figma AI Agents: MCP Setup, Skills, and the 85% Rule

On March 24, Figma opened its canvas to AI agents. Not “AI suggests a layout” — agents can now write directly to your Figma files. Create components, apply design system variables, build entire screens. The announcement hit 10,000 likes and caused a lot of excitement.

Three days later, the reality is more nuanced than the hype. And nobody has written the honest guide yet.

So here’s what Figma AI agents actually do, how to set them up with Claude Code in about 5 minutes, what they’re good at, and — importantly — what they’re not.

Two Different AI Features (Don’t Confuse Them)

Figma now has two separate AI systems, and mixing them up is the most common source of confusion:

Figma Make — The built-in, in-app AI tool. Select a frame, describe what you want in text, Figma generates it. No coding agent needed. Think of it as a quick mockup generator inside Figma itself.

Figma MCP (Agent Access) — External AI agents (Claude Code, Cursor, VS Code, etc.) connect to your Figma canvas through the MCP protocol and can read AND write to your files. This is the new thing. This is what got 10,000 likes.

Feature	Figma Make	Figma MCP
Where it runs	Inside Figma	In your coding agent (Claude Code, Cursor, etc.)
Setup needed	None	MCP server connection
Uses design system	No (hardcodes values)	Yes (if instructed)
Design quality	Quick but messy	Better with Skills
Best for	Fast exploration	Production-ready screens
Cost	Included with Figma plan	Figma plan + LLM subscription

The short version: Make is for quick ideas. MCP is for real work.

Setting Up Figma MCP with Claude Code

This takes about 5 minutes.

Step 1: Install the Plugin

Open your terminal and run:

claude plugin install figma@claude-plugins-official

This installs the Figma MCP connection plus bundled Skills for design implementation and Code Connect setup.

Alternative (manual):

claude mcp add --transport http figma https://mcp.figma.com/mcp

Use --scope user to make it available across all projects.

Step 2: Authenticate

Start a new Claude Code session
Type /mcp to manage servers
Select “figma” → “authenticate”
A browser window opens — authorize Claude to access your Figma account
You’ll see: “Authentication successful. Connected to figma”

That’s it. No API keys to copy, no tokens to manage. OAuth handles everything.

Step 3: Verify the Connection

Paste a Figma file URL into your Claude Code conversation:

What's in this Figma file? https://www.figma.com/design/[your-file-id]/[your-file-name]

Claude should read the file structure and list your pages, frames, and components. If it does, you’re connected.

Works With Other Agents Too

Figma MCP isn’t Claude-only. It works with Cursor, VS Code, GitHub Copilot, Gemini CLI, Codex, and 10+ other MCP-compatible agents. The setup for each varies slightly — check Figma’s MCP client guide for specifics.

Your First Agent-Generated Design

Let’s build something. Share a Figma file URL with Claude Code and try this prompt:

In my Figma file [URL], create a login form on the first page:
- Frame called "Login Screen" at 390x844 (iPhone 14 size)
- Center a white card with 24px padding
- "Welcome Back" heading, 24px bold
- "Sign in to your account" subtext, 14px gray
- Email input field, password input field (16px gap between)
- Full-width blue submit button labeled "Sign In"
- "Forgot password?" text link, centered below

The agent creates each element step by step — frame, card, heading, inputs, button — writing directly to your canvas. You can watch it happen in real time.

What 85% Accuracy Looks Like

Set realistic expectations. After extensive testing, designers report agent output is roughly 85% accurate on well-structured files. That means:

Usually correct: Layout structure, element hierarchy, text content, basic color application, spacing close to spec (within 2-4px).

Usually needs fixing: Fine spacing adjustments, font weight inconsistencies, corner radius on specific elements, layer naming conventions, visual hierarchy and “feel.”

One developer built a complete prediction market dashboard — dark theme, market cards, portfolio section — in a single prompt. Another connected Material 3 and generated a real Android screen with proper tokens in one click.

But here’s the flip side: a designer tried extracting a full design system from a website in one prompt. Variables were created correctly, but “none of the components are correct. Not even the buttons.” Colors were misread from screenshots.

The rule: Start with individual components, not entire systems. Build up, not all at once.

The #1 Problem: Hardcoded Values

Left to its own devices, the agent hardcodes everything. Colors become hex values. Spacing becomes pixel numbers. Your design system variables? Ignored completely.

This is the difference between useful output and throwaway junk.

Without design system reference:

Create a blue button

→ Agent creates a button with hardcoded #2563EB, hardcoded 16px padding, hardcoded Inter font. Works now. Breaks the moment you update your brand.

With design system reference:

Create a button using my design system:
- Background: use variable colors/primary
- Padding: use variable spacing/md
- Font: use text style Body/Medium
- Corner radius: use variable radii/md

→ Agent creates a button linked to your tokens. Update colors/primary and every AI-generated button updates automatically.

As one Japanese designer put it: “AI output quality depends on the Skill — not the prompt, but the quality of the design specification.”

Skills: Teaching AI Your Team’s Rules

Skills are the real unlock. They’re markdown files — plain text, no code — that teach agents your design conventions. Think of them as a CLAUDE.md file but for design.

# My Team's Button Skill

## Rules
- Always use `Button/Primary/Default` component
- Background: `colors/primary` variable (never hardcode hex)
- Text: `text-styles/button` (never manual font settings)
- Padding: `spacing/sm` horizontal, `spacing/xs` vertical
- Corner radius: `radii/md`

## Naming
- Layer name format: "Button / [Label Text]"
- Never use "Frame 1" or auto-generated names

## Don't
- Never hardcode colors, spacing, or typography
- Never create a rectangle when a component exists

Save this as a .md file and reference it in your prompts. The agent follows these rules consistently, reducing the “fix everything” frustration.

Nine community Skills are available at launch, including Edenspiekermann’s design system skill and Uber’s accessibility spec generator. Browse them at figma.com/community/skills.

The Partial-Based Workflow (What Actually Works)

The most important technique from the first week of real-world use: don’t try to generate full pages in one shot.

It fails. Every time.

Instead, break your design into partials:

Header — generate separately
Hero section — generate separately
Feature cards — generate separately
Footer — generate separately

Keep a readme file that describes how the partials connect. Build each as its own scoped task. Assemble the full page manually.

This approach works dramatically better than “build me a landing page in one prompt.”

The Pricing Reality

Figma Plan	MCP Calls	Monthly Cost
Free (Starter)	6/month	$0
Professional	200/day	$12/mo per editor
Organization	200/day	$45/mo per editor
Enterprise	600/day	Custom

The free tier is effectively unusable — 6 MCP calls per month. A single design-to-component session uses more than that. Professional at $12/month is the realistic minimum.

And here’s the hidden cost: the LLM side. Multiple users reported upgrading to Claude Max plans because Figma MCP burns through tokens fast. One developer called the cost escalation “becoming a wall.” Budget for both Figma Professional and a capable LLM subscription.

What Figma MCP Can’t Do

No image support — can’t work with photos, illustrations, or custom fonts yet
No prototyping — can’t create or read interactions, transitions, or animations
No version history — can’t compare to previous design versions
No comments — can’t read or create design comments
Non-deterministic — same prompt gives different results each time
Responsive design is weak — agents don’t prioritize mobile adaptation
Large files break — complex designs exceed AI context windows

Figma MCP vs Google Stitch

Everyone’s asking about this. Google Stitch launched its 2.0 update five days before Figma MCP — with voice input, infinite canvas, and free pricing. Figma stock dropped 12%.

Feature	Figma MCP	Google Stitch
Price	$12+/mo (Figma) + LLM costs	Free
Voice input	No	Yes
Uses your design system	Yes (the key advantage)	No
Output quality	Higher (with Skills)	Good for first drafts
Requires coding agent	Yes	No
Best for	Teams with existing design systems	Starting from scratch

The emerging power combo in the community: Stitch for design + Claude Code for development — no Figma subscription needed. But if you have a mature design system, Figma MCP produces better, more consistent output because it works with your existing components and variables.

As one user put it: “Stitch designed a full mobile app faster than I could describe what I wanted.” But another noted: “Claude via Figma MCP results are better than Stitch visually.” Speed vs. quality — pick your priority.

The Bottom Line

Figma AI agents are real, functional, and genuinely useful — but not magic. The 85% accuracy on well-structured files saves meaningful time. The Skills system is a smart approach to consistency. And the design system integration is the genuine differentiator over Stitch and other tools.

But the early experience is rough. Rate limits break flow. Token costs add up. Documentation is thin. And the agent doesn’t auto-detect your design system — you have to tell it every time (or write a Skill).

The designers getting the most value right now aren’t using AI for everything. They’re using it for the repetitive assembly work — generating component variants, building standard screens, creating pattern libraries — and spending their freed-up time on the creative decisions no AI can make.

That’s the real shift. Not “AI replaces designers.” More like: “AI handles the assembly. You handle the thinking.”

Sources: