Claude Code + Figma: 3 MCPs for driving Figma from the terminal

Why connect Claude Code to Figma?

The classic designer/developer workflow is: open Figma, inspect the mockups, copy the colors and spacing, translate that into CSS. Manually. Every iteration.

By connecting Claude Code directly to Figma via the MCP protocol, the game changes. The AI agent can read what's in Figma (components, tokens, styles) and also write to it (create frames, text, shapes). The terminal becomes a remote control for Figma.

But there's no single tool that does it all. I use three, each with its own approach and strengths. Here's the comparison.

Overview: 3 MCPs, 3 roles

In summary: Talk to Figma is the arm that creates, figma-console-mcp is the eye that inspects, and the official MCP is the standardized bridge.

Talk to Figma: real-time creation in Figma

It's the most spectacular tool. Talk to Figma lets Claude Code create and modify elements directly in an open Figma file, in real time. You see rectangles, text, and frames appear in Figma as Claude writes the code.

How it works

The architecture relies on three layers:

1. A Figma plugin - runs in Figma Desktop and listens for commands
2. A WebSocket server - relays on port 3055
3. An MCP server - exposes the tools to Claude Code via the standard protocol

Communication goes through a system of channels. The Figma plugin generates a channel ID (for example et8xi9cl), and Claude Code connects to it with the command join_channel. From there, everything Claude requests is executed instantly in Figma.

What you can do

• Create elements - frames, rectangles, ellipses, polygons, stars, text
• Edit styles - fill colors, borders, effects, rounded corners
• Manage typography - font, size, weight, line height, letter spacing
• Organize - auto-layout, group/ungroup, nest elements, clone
• Work with components - instantiate local or remote components
• Export - export a node as an image (PNG, SVG, etc.)

Setup

# 1. Cloner le repo
git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp

# 2. Installer et builder
bun install && bun run build

# 3. Lancer le serveur WebSocket
bun run dist/socket.js

Then, in Figma Desktop: Plugins → Development → Import plugin from manifest pointing to src/claude_mcp_plugin/manifest.json. Launch the plugin, note the channel ID.

The MCP configuration in ~/.claude.json :

{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "bun",
      "args": ["run", "/chemin/vers/claude-talk-to-figma-mcp/dist/talk_to_figma_mcp/server.js"]
    }
  }
}

When to use it

Talk to Figma excels when you want to generate design from a description. For example: "Create a card component with an image at the top, a title, a description, and a CTA button, using my design system's colors." Claude Code creates everything directly in your Figma file.

It's also useful for quickly prototyping variants of a component or for generating repetitive layouts (card grids, lists, forms).

figma-console-mcp: extract, debug, manage tokens

If Talk to Figma is the arm, figma-console-mcp is the eye. This tool connects to Figma via the REST API and the Chrome DevTools Protocol (CDP) to read the design information - variables, styles, components - and debug the plugins currently running.

What you can do

• Extract design tokens - retrieve all the variables (colors, spacing, typography) from a Figma file
• Manage variables - create, edit, delete variables individually or in batch
• Inspect components - search, read details, generate documentation for a component
• Debug - read console logs, take screenshots, reload a plugin
• Check design/code parity - compare Figma tokens with actual CSS values
• Configure a complete design system - create a collection of variables with modes (light/dark) in a single call

Batch operations: a huge gain

A strength of figma-console-mcp: batch operations. Instead of creating 50 variables one by one (50 MCP calls), you can create them all in a single call with figma_batch_create_variables. That's 10 to 50 times faster because everything runs in a single CDP roundtrip.

The tool figma_setup_design_tokens goes even further: it creates a complete collection (collection + modes + variables) atomically. Ideal for bootstrapping a design system from scratch.

Setup

The setup is simpler than Talk to Figma - no plugin or WebSocket needed:

{
  "mcpServers": {
    "figma-console-mcp": {
      "command": "npx",
      "args": ["figma-console-mcp"],
      "env": {
        "FIGMA_API_KEY": "figd_votre_token_ici"
      }
    }
  }
}

The API token is generated at figma.com/developers/api. Once configured, all the tools are immediately available in Claude Code.

When to use it

figma-console-mcp is essential when you're working on a design system. Extract tokens to convert them into CSS custom properties, check that the code's colors match the Figma values, document components automatically.

It's also the tool of choice for debugging Figma plugins - read console.log output, capture screenshots of the current state, and even re-execute code in the plugin's context.

Official Figma MCP: the Anthropic integration

Anthropic offers its own MCP server for Figma, accessible via a remote HTTP endpoint. Unlike the other two, which run locally, this one connects directly to Figma's servers.

What you can do

• Read Figma files - access a file's content without having Figma open
• Inspect designs - retrieve the structure, styles, and properties of nodes
• Get screenshots - capture renders of components or pages
• Read variables and design tokens - access variable definitions

Setup

{
  "mcpServers": {
    "figma-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp", "--figma-api-key=figd_votre_token_ici"]
    }
  }
}

When to use it

The official MCP is the best choice when you want to read a Figma file without having Figma Desktop open. This is useful in CI/CD mode, on a server, or simply when you're working on a machine that doesn't have Figma installed.

It's also the simplest to set up - a single NPX package, no plugin, no WebSocket. Ideal for a quick setup or for collaborators who just want to inspect designs.

My day-to-day workflow

In practice, I don't use all three at the same time. The choice depends on what I'm doing:

Most often, it's the duo Talk to Figma + figma-console-mcp that's running. Talk to Figma to create, figma-console-mcp to check and extract. The official MCP comes into play mainly when I'm working on a project where Figma Desktop isn't available.

A concrete example

Generally, I receive a Figma mockup from a designer or a client. Before starting code generation, there's preparation work that's essential. This is where the MCPs come into play:

1. Mockup audit - I use figma-console-mcp to inspect the file: do the layers have semantic names? Are the colors variables or hardcoded hex values? Are there reusable components?
2. Restructuring if necessary - via Talk to Figma, I rename the layers using BEM convention, turn groups into Auto Layout, and replace absolute positions with Hug/Fill. It's the cleanup before coding.
3. Token extraction - once the file is clean, figma-console-mcp extracts the variables (colors, spacings, radii) and I convert them into CSS Custom Properties
4. Code generation - Claude Code reads the Figma structure via MCP and generates semantic HTML + responsive CSS. Since the file is well structured, the generated code is directly usable.
5. Parity check - during development, figma_check_design_parity compares the CSS values with the Figma tokens. If the designer changes a color, I see it immediately.

The key point: the better configured the Figma file is, the cleaner and more maintainable the code generated by Claude Code will be. The investment in preparing the Figma file pays off tenfold in code quality.

Full configuration

Here's the global configuration in ~/.claude.json to have all three MCPs available in all your projects:

{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "bun",
      "args": ["run", "/chemin/vers/claude-talk-to-figma-mcp/dist/talk_to_figma_mcp/server.js"]
    },
    "figma-console-mcp": {
      "command": "npx",
      "args": ["figma-console-mcp"],
      "env": {
        "FIGMA_API_KEY": "figd_votre_token_ici"
      }
    },
    "figma-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp", "--figma-api-key=figd_votre_token_ici"]
    }
  }
}

Prerequisites for Talk to Figma:

1. Install Bun (fast JavaScript runtime)
2. Clone and build the Talk to Figma repo
3. Start the WebSocket server: bun run dist/socket.js
4. Import the plugin into Figma Desktop and connect it

Prerequisites for the other two:

1. Generate a Figma Personal Access Token
2. Add it to the MCP configuration

That's it. Claude Code automatically detects MCP servers at startup and makes their tools available.

Properly configuring Figma so the AI can read it

I teach web layout to students, and an entire module of my course is dedicated to this: preparing Figma so that Claude Code can read it and translate it into clean HTML/CSS. Because the quality of the generated code depends directly on the quality of the Figma file.

A poorly structured Figma file - with layers named "Frame 47", "Rectangle 2", no Auto Layout, no components - will produce rigid CSS, absurd class names, and code that's impossible to maintain. A well-configured Figma file is the opposite: semantic HTML, consistent CSS variables, responsive that actually works.

Layer naming: the foundation of everything

This is the first thing I explain to my students. When Claude Code reads a Figma file via MCP, it uses the layer names to generate CSS class names and HTML structure. A layer named section-products will become <section class="section-products">. A layer named Frame 1 will become... .frame-1.

The convention I teach is inspired by BEM (Block Element Modifier) :

section-products           → <section class="section-products">
├── section-header         → <div class="section-header">
│   ├── section__title     → <h2 class="section__title">
│   └── section__subtitle  → <p class="section__subtitle">
├── filters                → <div class="filters">
│   ├── filter-tag         → <button class="filter-tag">
│   └── filter-tag         → <button class="filter-tag">
├── products-grid          → <div class="products-grid">
│   ├── Card/Product       → <article class="card-product">
│   └── Card/Product       → <article class="card-product">
└── Button/Primary         → <a class="btn btn-primary">

The rule: each layer must have a name that makes sense in HTML/CSS. If the name doesn't make sense to a developer, it won't make sense to the AI either.

Auto Layout = Flexbox

This is the most important concept for the Figma → CSS transition. Figma's Auto Layout is the exact equivalent of Flexbox in CSS. When my students understand this, everything becomes clear:

When a Figma file uses Auto Layout everywhere (instead of manually positioning elements), Claude Code generates responsive Flexbox instead of position: absolute with hardcoded pixels. That's the difference between a site that adapts and a site that breaks.

The 3 resizing modes

This is where beginners make the most mistakes. Figma offers three resizing modes for each element within an Auto Layout:

The classic mistake: leaving everything as Fixed. The result? Claude Code generates CSS with pixel widths everywhere - nothing is responsive. The rule I teach: use Fill for the main containers, Hug for content elements, and Fixed only for icons and avatars.

Components and variants

In Figma, a component is the equivalent of a reusable class in code. The main component (purple diamond) is the definition, and each instance (empty diamond) is a use. When Claude Code detects component instances, it generates code DRY - a single reused CSS class, not duplicated code.

The naming convention with slashes organizes components into categories:

• Button/Primary, Button/Secondary, Button/Ghost
• Card/Product, Card/Article, Card/Testimonial
• Input/Text, Input/Email, Input/Password

The variants add multiple properties to a component: state (Default, Hover, Active, Disabled), size (Small, Medium, Large), style (Primary, Secondary, Ghost). A button with 3 styles × 2 sizes × 2 states = 12 variants, all generated from a single component. Claude Code translates this into modular CSS classes (.btn--primary, .btn--sm, .btn--disabled).

Design tokens: Figma Variables → CSS Custom Properties

This is the most direct link between Figma and code. The Figma variables (colors, spacing, radii) become CSS Custom Properties :

/* Variables Figma extraites par figma-console-mcp */
:root {
  --color-dark: #1B234B;
  --color-white: #FFFFFF;
  --color-light-gray: #F1F2F4;
  --color-bg: #EDF0F2;
  --color-text-dark: #262626;
  --color-text-muted: #737880;
  --color-accent: #969F7D;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 24px;
  --gap-lg: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

When a Figma file uses variables instead of hardcoded colors, Claude Code generates CSS with var(--color-accent) instead of #969F7D. Changing a color in Figma automatically propagates through all the CSS - that's the promise of the design system.

Checklist: is your Figma ready for AI?

Here's the checklist I use with my students before starting code generation:

• Everything is in Auto Layout - no manually positioned elements
• Layers have semantic names - not "Frame 47" or "Rectangle 2"
• Components are used - repetitive elements are instances, not copies
• Resizing modes are correct - Fill for container width, Hug for content
• Colors are variables - no hardcoded hex values in elements
• Spacing is consistent - a gap system (8, 12, 16, 24, 32, 40)
• Components follow the naming convention - Category/Name
• The layout is responsive - cards wrap as the width decreases

If these eight points are met, Claude Code will generate semantic HTML and maintainable CSS. If even one is missing, code quality suffers proportionally.

Teaching the Figma → AI → Code workflow

In my course, the module unfolds in two parts:

1. Session 3: Figma Auto Layout & Components - students learn to properly structure a Figma file, with progressive exercises (simple card → components → variants → full page)
2. Session 4: AI as a CSS assistant - they connect their Figma to Claude Code via MCP and generate code from their mockups

The final exercise of session 3 is revealing: create a complete "Our Products" section with a centered header, tag-style filters, a grid of 6 product cards that wrap (3 per row), and a CTA button. Everything in Auto Layout, everything with components.

In the next session, students run the MCP extraction on that same file. Those who structured their Figma well get clean code. The others get a pile of .frame-1 and position: absolute. The lesson is immediate and concrete: the quality of the Figma file determines the quality of the code.

The "AI vs Reality" exercise

Another exercise I do at the start of the module: students receive an identical brief (a landing page for an electric scooter service) and have to code it in 1h15 with AI assistance. Then we collectively analyze the AI's typical mistakes:

• Verbose code - the AI generates more code than necessary
• Mobile-first forgotten - responsiveness is rarely right the first time
• Generic class names - .card, .btn without context
• No CSS variables - hardcoded hex colors everywhere
• Non-semantic HTML - <div> everywhere instead of <header>, <section>, <footer>

The point isn't to show that AI is bad - it's to show that AI is only as good as the instructions it's given. A well-structured Figma + a good prompt = quality code. A chaotic Figma + a vague prompt = code to throw away.

What this changes

Before these MCPs, the workflow between design and code was linear and manual: design in Figma, inspect, copy, code. Now it's a two-way dialogue. Claude Code reads the design, generates matching code, and can even modify the design if needed.

The three MCPs cover different but complementary needs:

• Talk to Figma - for creatives who want to generate design from the terminal
• figma-console-mcp - for developers who want to extract and sync tokens
• Official Figma MCP - for those who want a simple setup that's readable everywhere

The MCP protocol makes all this possible because it provides a communication standard between the AI agent and external tools. Each MCP is a specialized module you plug in based on your needs. That's the advantage of an open ecosystem: you combine tools instead of waiting for a single one to do everything.