MCP · Design

Figma

The Figma MCP exposes Dev Mode. Claude reads design structure, tokens, variants. Useful to generate frontend code that respects the design system without copy-pasting CSS.

Official docs ↗Requires Figma Professional+

Use cases

›Generate a React component from a Figma frame
›Check drift between design and code
›Extract color/spacing tokens

Installation

1.Requires Figma Professional or higher and Figma Desktop (the MCP runs through the desktop app, not web). Enable Dev Mode on the target file.

2.One line, one terminal

$ # Ouvre Figma Desktop → Preferences → Enable Dev Mode MCP Server

Once enabled, Claude Code auto-detects the local server (port 3845 by default). No token to copy-paste.

Need to install Claude Code first? See the Claude Code page · Official docs

Concrete examples

›

"Regarde le frame sélectionné dans Figma et génère-moi le composant React correspondant, en respectant nos tokens Tailwind."

Read Figma structure (layers, auto-layout, variants) + code generation aligned with your design system.

Sample output

→ Reading Figma selection: "Card/ProductTile (variant: default)"
→ Extracting: 1 frame, 3 auto-layout groups, 5 text styles, 2 color tokens

Generated: components/ProductTile.tsx

export function ProductTile({ title, price, image }: Props) {
  return (
    <article className="flex flex-col gap-3 rounded-xl bg-bg-alt p-4
                       hover:border-orange/30 transition">
      <img src={image} alt={title} className="aspect-video rounded-lg" />
      <h3 className="text-text font-semibold text-[15px]">{title}</h3>
      <p className="text-orange font-medium">{price}</p>
    </article>
  );
}

Notes
- The #FF6B00 color from the design = your bg-orange token. Mapped.
- Spacing 12/16/24 matches your Tailwind grid. No magic pixels.
- The frame's "hover" variant isn't rendered. Let me know if you want
  a hover state added.

›"Extrais tous les tokens de couleur et de spacing du fichier Design System et génère un fichier tokens.css."

Global audit + export. Useful to sync your Figma tokens with your code without copy-paste.

Sample output

→ Reading Design System file... 47 color variables, 12 spacing variables

Generated: src/styles/tokens.css

:root {
  /* Colors */
  --color-primary-500: #FF6B00;
  --color-primary-600: #E05D00;
  --color-bg: #FAFAF7;
  --color-bg-alt: #F3F2EE;
  --color-text: #1C1C1C;
  /* ...42 more */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  /* ...9 more */
}

Diff with your existing file
- 3 new tokens: --color-warning-400, --color-warning-500, --space-14
- 1 rename: --color-brand → --color-primary-500 (aligns with design system)
- No tokens deleted

Read the MCP article →