Illustration 1 Збільшити

Illustration 1

1. Ce dont vous avez besoin pour commencer

Claude Code peut être connecté directement à Figma pour créer une design system complète de zéro : variables, tokens, composants et écrans prêts à l'emploi. Dans ce guide, nous détaillons le processus étape par étape — de l'installation jusqu'à la finalisation d'un écran de connexion.

Avant de commencer, assurez-vous que vous disposez de :

L'application desktop Claude Code — qui propose trois modes : Chat, Code et Agentic.
Un abonnement Claude actif — un compte gratuit ne convient pas à ce workflow.
Un compte Figma — avec au moins un fichier de travail ouvert.
Du temps — 30 à 45 minutes sans distractions pour suivre le workflow complet.

Avertissement

Ce workflow consomme les quotas d'utilisation de Claude. La génération d'un composant complexe comme un bouton avec plus de 120 variantes peut utiliser une part significative de votre quota horaire. Commencez par des tâches simples pour vous familiariser avec le processus avant de vous attaquer à de grands projets.

Ce dont vous avez besoin pour commencer — illustration 2 Збільшити

Ce dont vous avez besoin pour commencer — illustration 2

2. Installation de Claude Code

Rendez-vous sur claude.ai/download et téléchargez l'application desktop Claude Code pour votre système d'exploitation (macOS ou Windows).

Une fois installée, l'application vous demandera de vous authentifier — connectez-vous avec les identifiants de votre abonnement Claude. L'interface s'ouvrira alors avec trois modes :

Chat — le Claude conversationnel standard.
Code — dédié aux tâches de développement.
Agentic — où se déroule le travail principal avec Figma.

Le mode Agentic est utilisé pour travailler avec Figma : c'est lui qui permet à Claude d'exécuter des actions autonomes, incluant l'interaction directe avec votre canvas Figma.

Ce dont vous avez besoin pour commencer — illustration 3 Збільшити

Ce dont vous avez besoin pour commencer — illustration 3

3. Connexion de Claude à Figma via MCP

C'est l'étape clé qui rend tout le workflow possible. Claude se connecte à Figma via un serveur MCP (Model Context Protocol).

Procédure de connexion :

Dans l'application Claude Code, accédez aux Settings.
Ouvrez la section MCP Servers.
Cliquez sur « Add MCP Server ».
Sélectionnez Figma dans la liste des intégrations disponibles.
Authentifiez-vous via votre compte Figma (flux OAuth).
Une fois connecté, Figma apparaîtra dans la liste des serveurs MCP actifs.

Comment vérifier si tout fonctionne :

Ouvrez n'importe quel fichier Figma dans le navigateur et posez une question simple à Claude :

text

Can you see my current Figma file? What's on the canvas?

Si Claude décrit le contenu de votre fichier, la connexion est établie. Sinon, vérifiez la configuration du serveur MCP et assurez-vous que le fichier Figma est bien ouvert.

Astuce

Avant de commencer, créez un nouveau fichier Figma ou une page dédiée dans un fichier existant. Cela isole vos expérimentations de vos ressources de production.

Étape 3 — Création d'un système de variables complet grâce à l'IA — illustration 4 Збільшити

Étape 3 — Création d'un système de variables complet grâce à l'IA — illustration 4

4. Création d'un système de variables complet grâce à l'IA

Au lieu de créer manuellement des dizaines de variables de couleur, de typographie et d'espacement, Claude assemble toute l'architecture de tokens de manière autonome.

Prompt pour la création du système de variables :

text

In my Figma file, create a complete design token system with the following structure: 1. Primitive Colors — create a full range of colours: grays (50–900), primary blue (50–900), secondary green (50–900), error red (50–900), warning amber (50–900), and success green (50–900). Use industry-standard hex values. 2. Semantic Colors — create a semantic layer that references the primitive colours: background-primary, background-secondary, text-primary, text-secondary, text-disabled, icon-primary, icon-secondary, border-default, border-strong. Also add hover and active state variants for interactive elements. 3. Primitive Dimensions — create a spacing scale: 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80. And a radius scale: 0, 2, 4, 8, 12, 16, 9999 (full round). 4. Semantic Typography — create a typography token system for: display-large, display-medium, heading-1 through heading-4, body-large, body-medium, body-small, caption, and overline. Include font family, font size, line height, and font weight as separate tokens. Also create Figma text styles and map the typography variables to them.

Ce que Claude génère en résultat :

Claude commence à travailler de manière autonome dans le fichier Figma. En quelques minutes, le panneau Variables affiche :

Primitive Colors — un jeu complet d'échelles de couleurs, correctement organisées en collections.
Semantic Colors — tous pointent vers la collection primitive (pas de valeurs hexadécimales codées en dur, mais de vraies références).
Tokens d'interface — fond, texte, icônes et bordures avec les états hover et active.
Système typographique — styles de texte liés aux variables correspondantes.
Tokens de taille — échelles d'espacement et de rayons, prêtes à l'emploi.

Les tokens sémantiques sont correctement aliasés vers les primitives, ce qui signifie qu'une modification d'une couleur primitive se propage automatiquement dans tout le système. C'est ainsi qu'une design system robuste est construite manuellement, sauf qu'ici, cela prend des minutes plutôt que des heures.

Astuce

Après la génération, vérifiez les valeurs de couleur selon les guidelines de votre marque. L'IA choisit des défauts raisonnables, mais la teinte spécifique de votre marque diffère probablement de celle générée. Modifiez les primitives — et toute la couche sémantique se mettra à jour automatiquement.

5. Création d'un composant bouton complexe : plus de 120 variantes

Le vrai stress-test du workflow est un composant bouton non simplifié, mais respectant la rigueur complète d'une design system.

Prompt pour la création du composant :

text

Create a button component in my Figma file with the following specifications: Variants: - Type: Primary, Secondary, Tertiary, Danger - Size: Small (32px height), Medium (40px height), Large (48px height) - State: Default, Hover, Active, Disabled - Layout: Label only, Label + Leading icon, Label + Trailing icon, Icon only, Label + Leading icon + Trailing icon Requirements: - Use the variable tokens we just created for all colours, spacing, and radius - Apply proper auto-layout with appropriate padding and gap values from our dimension tokens - Use the correct text styles from our typography system - For icons, use a simple placeholder icon (16x16 for small, 20x20 for medium, 24x24 for large) - Make sure component properties are properly set up for easy variant switching - Add proper naming convention: Button/[Type]/[Size]/[State]/[Layout]

La génération prend nettement plus de temps et utilise une part significative du quota d'utilisation. Le résultat est un ensemble complet de composants avec plus de 120 variantes.

Ce qui fonctionne parfaitement :

Structure auto-layout correcte : padding et gap appropriés, issus des tokens de taille.
Couleurs assignées précisément : les boutons primary utilisent les couleurs primary, danger utilise les rouges d'erreur, le tout issu des tokens sémantiques.
Styles de texte : appliqués correctement à toutes les variantes.
Propriétés du composant : configurées pour faciliter le changement d'état.
Convention de nommage : entièrement respectée.

Ce qui nécessitera des ajustements manuels :

Icônes : Claude a du mal à générer de vraies icônes. Des formes de remplissage sont créées, mais pas toujours précises. Il vaut mieux spécifier une forme simple précise (« use a star shape » ou « use an arrow ») ou remplacer le vecteur manuellement.
État de chargement (Loading state) : le positionnement du spinner peut être décalé à cause de l'absolute positioning — un ajustement manuel rapide est nécessaire.
Légères divergences de padding : certaines variantes peuvent avoir des valeurs d'espacement différentes (la correction prend 2 à 3 minutes).

Pour un composant dont l'assemblage manuel depuis zéro prend généralement 2 à 3 heures — avec variantes, tokens et auto-layout — Claude effectue environ 85 % du travail correctement. Les 15 % restants nécessitent une finition manuelle rapide.

6. Assemblage d'un écran basé sur la design system

Test final : Claude peut-il assembler un écran complet en utilisant la design system qu'il vient de créer ? La condition clé est de ne pas tout régénérer, mais d'utiliser les composants et variables existants.

Prompt pour la création de l'écran de connexion :

text

Design a login screen in my Figma file using the design system we've created. Use the following specifications: - Frame: 1440x900 desktop size - Layout: Split screen — left side with a branded visual/illustration area, right side with the login form - Right side form includes: Logo placeholder at top, "Welcome back" heading (use heading-2 text style), email input field, password input field with show/hide toggle, "Forgot password?" text link, primary login button (use our button component — large size, primary type), "Or continue with" divider, social login buttons (Google, Apple), "Don't have an account? Sign up" text at bottom - Use our variable tokens for all colours, spacing, and typography - Apply proper auto-layout throughout - Left side: Use background-secondary colour with a centered placeholder for illustration

Ce que Claude assemble en résultat :

Un écran de connexion prêt avec une structure correcte. La mise en page globale est cohérente — split-screen approprié, formulaire bien organisé, les design tokens sont utilisés partout sur l'écran.

Ce qui impressionne :

Réutilisation du système : Claude utilise le composant bouton créé précédemment, au lieu de dessiner un nouveau rectangle stylisé comme un bouton.
Hiérarchie typographique : heading styles, body text, caption — tout provient du système de tokens.
Espacements cohérents : respectés exactement selon l'échelle de taille.
Composition générale : professionnelle et prête pour le handoff au développement.
Auto-layout appliqué correctement : rend l'écran responsive.

Ce qui nécessitera des ajustements :

Finition visuelle des boutons de connexion sociale.
L'illustration de remplissage sur le panneau gauche est basique (ceci est attendu).
Légers alignements à corriger dans les espacements internes du formulaire.

Le résultat n'est pas un prototype jetable, mais une base solide pour le développement futur du produit.

7. Analyse honnête : là où l'IA excelle et là où elle faiblit

Là où Claude + Figma fonctionne exceptionnellement bien :

Systèmes de variables et de tokens : ici, l'IA donne le meilleur d'elle-même. Une architecture de tokens complète, qui prendrait des heures à construire manuellement, est assemblée en quelques minutes, avec une structure correcte.
Scaffolding de composants : la génération du squelette de composants complexes avec un auto-layout correct, des properties configurées et des tokens fait gagner un temps considérable.
Assemblage d'écrans : la création de layouts structurés utilisant les composants et tokens existants de la design system donne un résultat réellement utile.
Cohérence de la design system : puisque les règles sont définies dans le prompt à l'avance, Claude maintient une cohérence plus stricte que la plupart des designers ne le font manuellement.

Là où l'IA ne tient pas encore ses promesses :

Nuances visuelles : l'IA n'a pas de sens artistique. Les résultats sont structurellement corrects, mais dépourvus des subtiles retouches qui rendent un design véritablement raffiné.
Icônes et illustrations : Claude gère mal la génération d'icônes propres. Fournissez toujours des icônes de référence ou utilisez des plugins spécialisés.
Quotas d'utilisation : les composants complexes épuisent rapidement les limites de Claude. Planifiez vos sessions à l'avance.
Positionnement : l'absolute positioning et la gestion de l'overflow nécessitent parfois un nettoyage manuel.

Note

En résumé : ce workflow ne remplace pas la réflexion design. Mais il comprime radicalement la phase d'exécution. Claude prend en charge 70 à 85 % du travail mécanique d'assemblage de la design system, libérant du temps pour les décisions qui comptent vraiment : stratégie, scénarios utilisateurs, edge cases et finition visuelle.

8. Conseils de prompting : les patterns qui fonctionnent

Après avoir pratiqué ce workflow, certains patterns donnent constamment de meilleurs résultats :

Indiquez explicitement l'utilisation des tokens : écrivez toujours « use the variable tokens we created », sinon Claude risque de coder les valeurs en dur.
Définissez la convention de nommage : Claude suit n'importe quel pattern de nommage que vous définissez. Soyez précis, sinon vous obtiendrez des noms incohérents.
Divisez les tâches complexes en étapes : ne demandez pas de créer les variables, les composants et les écrans en un seul prompt. Faites-le séquentiellement.
Référez-vous aux éléments existants : écrivez « use our button component » plutôt que « create a button » si vous souhaitez réutiliser ce qui a déjà été créé.
Spécifiez les dimensions explicitement : « 40px height with 12px vertical padding and 16px horizontal padding » fonctionne mieux que « medium size ».
Vérifiez toujours le résultat : inspectez le panneau Variables, le panneau Layers et les propriétés des composants. L'IA construit correctement la structure, mais les détails nécessitent un regard humain.