Générer un design system avec l'IA dans Figma et Framer : les 6 corrections à faire
• 9 minutes de lecture • Par Virgil Caffier
En bref
L'IA génère une base de design system plausible en quelques minutes, mais ne vérifie ni les contrastes, ni le nommage, ni la cohérence des échelles.
Un bon prompt impose la couleur de marque, demande des tokens primitifs et sémantiques, et exige le ratio de contraste de chaque couple texte/fond.
Les WCAG 2.2 exigent 4,5:1 pour le texte courant : l'indigo #6366F1, fréquent dans les sorties IA, plafonne à 4,47:1 sur blanc.
Six corrections systématiques : contrastes, couche sémantique, échelle typo, espacements sur grille, états focus et désactivé, mode sombre recalculé.
Dans Framer, le système corrigé devient des color styles clair/sombre, des text styles par breakpoint et des composants qui n'utilisent que ces styles.
Tu demandes à une IA un design system pour un client. Trente secondes plus tard, tu as une palette, une échelle typographique, des espacements et des boutons. Ça a l'air propre. Puis ton premier texte gris sur fond blanc est illisible. Tu passes en mode sombre, et la moitié des couleurs ne veut plus rien dire.
Générer un design system avec l'IA te fait gagner la première heure du travail, pas la dernière. L'IA produit une base plausible. Elle ne vérifie ni le contraste, ni la logique de nommage, ni la cohérence des échelles. Ce guide te montre comment obtenir une base exploitable dans Figma ou Framer, puis les six corrections à faire systématiquement avant de construire la moindre page.
Qu'est-ce qu'un design system pour un webdesigner freelance ?
Un design system est l'ensemble des règles visuelles réutilisables d'un site. Pour un site vitrine ou une landing page, il se résume à quatre fondations et quelques composants : des couleurs nommées par rôle, une échelle typographique, une échelle d'espacements, des rayons et ombres, puis les composants qui les utilisent (bouton, champ, carte, navigation). Pas besoin de la bibliothèque d'une grande entreprise.
Ces valeurs portent un nom : les tokens. Dans Figma, ce sont des variables et des styles. Dans Framer, ce sont les color styles et les text styles. Le format standard pour les échanger existe : le Design Tokens Community Group du W3C a publié la première version stable de sa spécification (2025.10) le 28 octobre 2025. Ce n'est pas un standard W3C officiel, mais c'est le format vers lequel les outils convergent.
L'intérêt pour toi est double. Tu modifies une couleur à un seul endroit au lieu de cinquante. Et tu donnes à l'IA un cadre : un outil qui connaît tes tokens les applique, un outil qui ne les connaît pas invente.
Quels outils génèrent un design system avec l'IA en 2026 ?
En 2026, trois familles d'outils génèrent un design system : Figma Make, un LLM généraliste comme Claude ou ChatGPT, et les plugins Framer. Aucun ne livre un système prêt pour la production sans relecture.
Outil | Ce qu'il génère | Limite à connaître |
|---|---|---|
Figma Make | Fondations et composants décrits en langage naturel, avec un fichier de directives (Guidelines.md) qui encadre les générations suivantes | Une seule bibliothèque active à la fois ; les composants d'une bibliothèque importée ne sont pas extraits, seulement ses styles CSS |
Un LLM généraliste (Claude, ChatGPT) | Un fichier de tokens JSON ou CSS complet, primitives et sémantique comprises, si ton prompt le demande | Il faut ensuite importer le fichier (plugin type Tokens Studio, ou serveur MCP Figma pour un agent) |
Plugins Framer | re:Style crée des styles de couleur, de typo et d'espacement depuis une URL, une image ou un prompt ; Styleguide pose un set de styles prêt à l'emploi | Fonctionnalités annoncées par leurs éditeurs : teste sur un projet jetable avant un projet client |
Si ton client a déjà une charte dans Figma, un plugin d'import comme Design Sync la transforme en styles Framer natifs. La génération sert surtout quand tu pars d'un logo et de deux couleurs.
Le prompt qui donne une base exploitable
Un prompt vague (« crée-moi un design system moderne ») produit le même indigo (souvent #6366F1, l'indigo-500 de Tailwind), les mêmes cartes arrondies et la même police sans empattement que tout le monde. Un prompt utile donne le contexte, les contraintes et le format de sortie. Exemple de prompt structuré :
Tu es designer de design systems. Client : cabinet d'architecture à Lyon, cible particuliers aisés, ton sobre et chaleureux. Couleur de marque : #1F4D3A. Génère : 1) une palette primitive (marque, neutres, succès, erreur) en 10 nuances de 50 à 900 ; 2) des tokens sémantiques (text/primary, text/muted, surface/default, border/default, action/primary…) qui pointent vers les primitives, en mode clair et sombre ; 3) une échelle typographique de 6 niveaux avec taille, interlignage et graisse, en desktop et mobile ; 4) une échelle d'espacements sur une base de 4 px. Pour chaque couple texte/fond, indique le ratio de contraste WCAG. Sortie : JSON au format Design Tokens.
Trois éléments font la différence : la couleur de marque imposée, la séparation primitives/sémantique demandée explicitement, et l'obligation de calculer les contrastes. Même avec ce prompt, vérifie les ratios toi-même : un modèle de langage peut annoncer un ratio faux. Pour aller plus loin sur la rédaction de prompts, lis le workflow IA du webdesigner freelance.
Les 6 erreurs que l'IA laisse dans un design system
Un design system généré par IA contient six défauts typiques : des contrastes insuffisants, des couleurs sans couche sémantique, une échelle typographique arbitraire, des espacements hors grille, des états de composants manquants et un mode sombre obtenu par simple inversion. Chacun se corrige en quelques minutes avant la première page, en plusieurs heures après.
1. Des contrastes sous le seuil WCAG
Les WCAG 2.2 (critère 1.4.3, niveau AA) exigent un ratio de 4,5:1 pour le texte courant et 3:1 pour le grand texte (18 pt, ou 14 pt en gras). Les palettes générées échouent souvent de peu. Voici des ratios que j'ai calculés avec la formule de luminance relative des WCAG, sur fond blanc :
Couleur sur blanc | Ratio | Texte courant (4,5:1) |
|---|---|---|
Gris #9CA3AF | 2,54:1 | Échoue |
Indigo #6366F1 | 4,47:1 | Échoue de 0,03 |
Ambre #F59E0B | 2,15:1 | Échoue |
Gris #6B7280 | 4,83:1 | Passe |
Indigo #4F46E5 | 6,29:1 | Passe |
La correction : teste chaque token de texte contre chaque surface sur laquelle il peut apparaître. Si un gris « muted » échoue, descends d'une ou deux nuances. Garde les couleurs claires pour les fonds et les bordures décoratives.
2. Des primitives sans couche sémantique
L'IA nomme souvent ses couleurs green-700 et s'arrête là. Résultat : tes composants pointent directement vers des valeurs brutes, et le jour où tu ajoutes un mode sombre, tu dois tout reprendre. La correction : deux niveaux. Les primitives (green/700) décrivent une valeur. Les tokens sémantiques (text/primary, surface/raised) décrivent un rôle et pointent vers une primitive. Les composants n'utilisent que les tokens sémantiques.
3. Une échelle typographique arbitraire
Des tailles comme 15, 17, 19 et 21 px sont trop proches pour créer une hiérarchie lisible. Choisis un ratio (1,2 ou 1,25 pour un site vitrine) et recalcule l'échelle à partir de ta taille de texte courant. Vérifie aussi l'interlignage : autour de 1,5 pour le texte, plus serré (1,1 à 1,2) pour les gros titres. Et prévois les tailles mobiles : un H1 de 64 px ne tient pas sur un écran de 390 px.
4. Des espacements hors grille
Un 18 px ici, un 22 px là. Impose une base de 4 ou 8 px et une liste fermée (4, 8, 12, 16, 24, 32, 48, 64, 96). Toute valeur hors liste est une erreur à corriger, pas une exception à documenter.
5. Des états de composants manquants
Le bouton généré a un état par défaut, parfois un survol. Il manque souvent le focus clavier, l'état désactivé et l'état de chargement. Le focus compte pour l'accessibilité : un indicateur visible avec un contraste d'au moins 3:1 contre les couleurs adjacentes (critère 1.4.11 pour les composants d'interface). Ajoute ces états dans les variantes avant d'utiliser le composant.
6. Un mode sombre obtenu par inversion
Inverser les nuances (le 100 devient le 900) donne des fonds trop noirs et des couleurs trop saturées. En sombre, prends un gris très foncé plutôt qu'un noir pur, et remonte la couleur d'action d'une ou deux nuances. Recalcule les contrastes : un couple valide en clair n'est pas forcément valide en sombre.
La checklist de correction en 30 minutes
Avant de dessiner la première section, passe le système généré dans cet ordre :
Supprime les couleurs inutiles : un site vitrine tient en une couleur de marque, des neutres et deux couleurs d'état.
Crée la couche sémantique et branche-la sur les primitives, en clair et en sombre.
Teste chaque couple texte/surface avec un vérificateur de contraste, et corrige ce qui passe sous 4,5:1.
Recalcule l'échelle typographique sur un ratio unique, avec ses tailles mobiles.
Ramène tous les espacements à la liste fermée.
Ajoute focus, désactivé et chargement aux composants interactifs.
Renomme tout avec une convention unique (
catégorie/rôle/variante), puis note les règles dans un fichier de directives que l'IA relira aux générations suivantes.
Ce dernier point change la suite du projet. L'aide de Figma juge le fichier Guidelines.md essentiel pour que Make applique correctement ta bibliothèque. Le même principe vaut avec un agent comme Claude : un système documenté est appliqué, un système implicite est réinventé à chaque prompt. Si tu veux apprendre ce process avec un vrai projet, c'est ce qu'on fait dans la formation IA x Design avec Framer et Figma.
Comment passer ton design system dans Framer
Pour passer un design system corrigé dans Framer, il te faut trois éléments natifs :
Des color styles qui reprennent tes tokens sémantiques, avec une valeur claire et une valeur sombre pour chacun. Nomme-les comme dans Figma pour garder une seule source de vérité.
Des text styles pour chaque niveau de l'échelle, avec leurs tailles par breakpoint. C'est là que tes tailles mobiles servent.
Des composants (bouton, carte, navigation) construits uniquement avec ces styles, jamais avec une couleur saisie à la main.
Si tu pilotes Framer avec un agent IA, ces styles deviennent sa référence : il les réutilise au lieu de créer de nouvelles couleurs. On détaille la connexion dans Claude + Framer : quand l'IA pilote ton site, et la reproduction d'une maquette existante dans du screenshot au site Framer. Débute sur Framer ? Le tuto Framer en français pose les bases des styles et des breakpoints.
Questions fréquentes
L'IA peut-elle créer un design system complet toute seule ?
Elle crée une base complète en apparence, mais ne garantit ni les contrastes WCAG, ni une couche sémantique cohérente, ni les états d'accessibilité. Compte une demi-heure de correction avant de l'utiliser sur un projet client.
Faut-il générer le design system dans Figma ou dans Framer ?
Si tu maquettes dans Figma, génère et corrige dans Figma, puis importe les styles dans Framer. Si tu construis directement dans Framer, un plugin ou l'agent peut créer les styles sur place. L'essentiel est d'avoir une seule source de vérité, pas deux systèmes qui divergent.
Quel ratio de contraste viser pour un site client ?
Le niveau AA des WCAG 2.2 : 4,5:1 pour le texte courant, 3:1 pour le grand texte et pour les composants d'interface.
Conclusion : l'IA démarre, toi tu valides
Générer un design system avec l'IA vaut le coup : tu passes d'une page blanche à une base structurée en quelques minutes. Mais la valeur que ton client paie se trouve dans les corrections, pas dans la génération : des contrastes qui passent, des noms qui tiennent quand le site grandit, un mode sombre pensé, des composants accessibles au clavier.
Les outils évoluent tous les mois. La méthode, elle, reste la même : générer, vérifier, documenter, puis laisser l'IA appliquer. Si tu veux la pratiquer de bout en bout, du prompt jusqu'au site publié, rejoins la formation IA x Design de Frames Académie.
Automatiser le CMS Framer avec l'IA : contenu, meta et schema sans erreur
L'IA peut remplir ton CMS Framer à ta place : contenu, meta-title, meta-description et schema JSON-LD. Voici comment préparer la collection, quelles règles donner à l'agent et les pièges qui cassent une automatisation.
Animations Framer avec l'IA : ce que l'agent fait bien, ce qui rame encore
L'agent Framer pose en quelques secondes des effets d'apparition, de survol ou de défilement, mais il rate le rythme. Voici quoi lui déléguer, comment rédiger ton prompt d'animation et quoi vérifier avant de livrer.
Générer un design system avec l'IA dans Figma et Framer : les 6 corrections à faire
L'IA te sort une palette, une échelle typo et des composants en quelques secondes. Voici le prompt qui donne une base exploitable, et les six corrections à faire avant de construire la moindre page.