Importer ton design system Figma dans Claude Design : le flow complet, du fichier .fig au prototype
Claude Design (Anthropic Labs) génère prototypes, decks et templates avec ta marque. Le flow complet pour importer ton design system Figma — du fichier .fig parsé localement à la première génération.
Claude Design veut faire ce que Figma ne fait pas
Anthropic Labs a sorti Claude Design, un produit en research preview qui génère des prototypes interactifs, des slide decks, des one-pagers et des templates — non pas génériques, mais alignés sur ton design system. Propulsé par Claude Opus 4.8 et accessible aux abonnés Claude Pro, Max, Team et Enterprise, il occupe un terrain que les outils classiques laissaient vide : transformer une intention en pièce visuelle on-brand sans repartir de zéro. L'idée centrale, et c'est elle qui fait la différence : tu configures ton design system une fois, et chaque projet réutilise ensuite tes couleurs, ta typographie et tes composants automatiquement.
La question pratique : comment lui donner ton design system Figma ? C'est l'import du fichier .fig, au cœur de l'onboarding. Voici le flow complet, tel que l'interface le présente — et tel que je l'ai vécu en y branchant mon propre système.
Prérequis : un abonnement Claude payant (Pro, Max, Team ou Enterprise). Claude Design est en research preview — l'interface bouge d'une semaine à l'autre, donc considère les détails ci-dessous comme le portrait du moment.
Étape 1 — Set up your design system
Le point d'entrée est un écran « Set up your design system ». Tu donnes d'abord un nom et un court blurb. Vient ensuite la partie qui compte, « Provide examples of your design system and products », optionnelle mais déterminante pour la qualité de tout ce qui suit. Plusieurs canaux d'entrée, qui ne se valent pas selon l'objectif.
| Source | Ce que ça fait | Quand l'utiliser |
|---|---|---|
| Link code on GitHub | pointe Claude vers ton dépôt | design system déjà codé |
| Link code from your computer | Claude copie des fichiers sélectionnés (pas tout le codebase) | gros codebase : attache un sous-dossier frontend |
| Upload a .fig file | importe ta maquette Figma, parsée localement | ton design system vit dans Figma |
| Add fonts, logos and assets | polices, logos, images de marque | compléter l'identité visuelle |
| Any other notes | palette, voix de marque, contraintes | tout ce que le code ne dit pas |
Pour un gros codebase, l'interface recommande elle-même d'attacher un sous-dossier orienté frontend plutôt que tout le dépôt. Et le champ « Any other notes » n'est pas accessoire : c'est là que tu précises ce qu'aucun fichier ne contient — « palette chaude et terreuse, coins arrondis, voix ludique mais professionnelle ». Un bouton « Continue to generation » lance la suite.
Le cœur du sujet : importer ton .fig
C'est l'option qui répond directement à « importer mon design system Figma ». Tu déposes un fichier .fig, et un détail rassure côté confidentialité : il est parsé localement dans ton navigateur, jamais uploadé. Claude lit la structure de ta maquette sans que le fichier quitte ta machine. Pour l'obtenir, c'est l'export natif de Figma — le fichier du document, pas une image ; si ton système est éclaté, exporte celui qui porte tes composants et tes styles.
L'intérêt par rapport à une capture d'écran est énorme : au lieu de deviner tes intentions à partir de pixels, Claude part de ta structure réelle.
Étape 2 — « Your design system is ready »
Une fois le .fig parsé, Claude affiche un écran « Your design system is ready » et — c'est là que ça devient concret — il a décomposé mon fichier en groupes nommés, exactement ceux de ma maquette. Dans mon PP. Design System, ça donne un « UI Kit — Marketing Site » et une section « Brand » détaillée : Brand — Logo & Glyphes, trois groupes de couleurs (Accent Or, Backgrounds & Borders, Text & Misc), une série de composants (Blog Card, Buttons, Form Inputs, Navigation, Section Header, Service Card, Tags & Pills), les logos et leurs exports SVG, le spacing (Scale 4px, Radius, Motion & Elevation) et la typographie (Display en Playfair, Body & Mono, Type Scale), jusqu'au colors_and_type.css et au README. Vingt-trois assets, lisibles et réutilisables. Deux cases gouvernent l'usage : « Published » et « Default » — coche-les pour que les nouveaux projets de ton équipe partent automatiquement sur ce système. Et tu peux le mettre à jour ensuite directement par le chat, sans repasser par l'onboarding.
Le piège que j'ai rencontré tout de suite : un bandeau « Missing brand fonts — Claude rend la typo avec des polices de substitution ». L'import .fig te donne l'échelle typographique et les styles, mais pas les fichiers de police eux-mêmes. Tant que tu n'as pas cliqué « Upload fonts » pour fournir tes vraies polices, tes générations s'affichent avec des web fonts approximatives. C'est le premier réflexe à avoir après l'import, sinon tout ce qui sort « ressemble » sans être tout à fait juste.
Étape 3 — Générer : prototype, deck, template
Le design system en place, tu crées des projets. L'interface propose quatre types — Prototype, Slide deck, Template, Other — et un panneau « Start with context » rappelle que les designs ancrés dans du vrai contexte sortent meilleurs : tu peux rattacher le Design System, ajouter une capture, attacher un codebase ou glisser un fichier Figma, puis décrire ce que tu veux dans le chat. Tu choisis ton design system dans le menu — pour moi « PP. Design System — pascalpotvin.com », marqué défaut d'organisation — et tu génères. Pour un slide deck, une option « Use speaker notes » ajoute les notes du présentateur. Chaque projet est privé par défaut jusqu'à ce que tu le partages.
Ce que produit chaque type vise un usage réel : les prototypes interactifs se partagent pour récolter du feedback et tester sans revue de code ni pull request ; les decks s'exportent en PPTX ou s'envoient vers Canva. Le design system étant lié au projet, tout sort déjà aux bonnes couleurs et à la bonne typo — à condition d'avoir réglé le détail des polices.
Raffiner sans repartir de zéro
La génération n'est qu'un premier jet ; l'itération fait la différence. On affine par conversation, par commentaires en ligne, par édition directe, ou via des curseurs personnalisés qui font varier un paramètre du design. On enrichit le contexte en cours de route : uploader des documents — DOCX, PPTX, XLSX — ou utiliser l'outil de capture web pour récupérer des éléments directement depuis son site existant. Cette boucle rapide est exactement ce qui manquait entre « j'ai une idée » et « j'ai une maquette on-brand à montrer ».
Mon avis : où Claude Design gagne, et où il ne remplace pas Figma
Je vais être net. Claude Design n'est pas un remplaçant de Figma pour gérer un design system de production — la gouvernance des tokens, le versioning des bibliothèques, le handoff dev fin restent du ressort de Figma. Là où il gagne, c'est la vitesse de mise en forme on-brand : explorer dix directions en une heure, sortir un deck client conforme à la charte, livrer un prototype testable sans mobiliser un dev.
Mais le principe que je répète à chaque mandat s'applique ici aussi, et l'écran « design system is ready » le rend visible : la qualité de ce que Claude Design génère est plafonnée par la propreté de ce que tu importes. Un .fig bien structuré — composants nommés, échelle de spacing claire, type scale explicite — ressort en groupes propres et réutilisables. Des polices manquantes, et tu obtiens du « presque ». Importer son design system Figma dans Claude Design n'est pas un bouton magique : c'est l'aboutissement d'un système déjà propre. Le bouton ne fait que révéler l'état réel de ta maison.
Claude ne devine pas ta marque — voici comment lui donner ton design system et ta voix (2026)
« Fais-le moderne et premium » donne du générique. Le vrai levier, c'est de donner à Claude ton vrai système : tokens via MCP, voix par l'exemple, et un CLAUDE.md qui sert de contrat. Le guide d'un praticien.
Ton design system parle maintenant à une IA : ce qui change vraiment dans Figma en 2026
En 2026, un design system n'est plus une bibliothèque de composants : c'est la couche que l'IA lit pour comprendre ton produit. Ce que Figma a réellement livré en 2025, et comment bâtir sans usine à gaz.
Theming dans Figma : le multi-marques ne demande plus de dupliquer tes collections (ce que Schema 2025 a changé)
Variables, modes, Extended collections : gérer light, dark et plusieurs marques dans Figma sans dupliquer un seul composant — et ce que les annonces de Schema 2025 ont changé pour le theming.