MCP · Design

Figma

Le MCP Figma donne accès au Dev Mode. Claude lit la structure du design, les tokens, les variants. Utile pour générer du code front qui respecte le design system sans copier-coller les CSS.

Documentation officielle ↗Requiert Figma Professional+

Cas d'usage

›Générer un composant React depuis un frame Figma
›Vérifier l'écart entre design et code
›Extraire les tokens de couleur/spacing

Installation

1.Requiert Figma Professional ou plus et Figma Desktop (le MCP passe par l'app desktop, pas le web). Active Dev Mode sur le fichier ciblé.

2.Une ligne, un terminal

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

Une fois activé, Claude Code détecte automatiquement le serveur local (port 3845 par défaut). Pas de token à copier-coller.

Besoin d'installer Claude Code d'abord ? Voir la fiche Claude Code · Documentation officielle

Exemples concrets

›

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

Lecture de la structure Figma (layers, auto-layout, variants) + génération de code aligné sur ton design system.

Résultat type

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

Généré : 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
- La couleur #FF6B00 du design = ton token bg-orange. Remplacé.
- Le spacing 12/16/24 match ton grid Tailwind. Pas de pixel magique.
- Le variant "hover" du frame n'est pas rendu, dis-moi si tu veux que
  j'ajoute un état.

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

Audit global + export. Utile pour synchroniser tes tokens Figma avec ton code sans copier-coller.

Résultat type

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

Généré : 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 autres */

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

Diff avec ton fichier existant
- 3 nouveaux tokens : --color-warning-400, --color-warning-500, --space-14
- 1 renommage : --color-brand → --color-primary-500 (aligne avec le design system)
- Aucun token supprimé