Un design system construit avec l’IA.
Un projet personnel pour apprendre à travailler avec Claude dans Figma : l’IA exécute, je décide. Et une méthode pour que le résultat n’ait pas l’air généré.
Jusqu’où l’IA peut aller dans Figma.
Je voulais tester l’IA sur un vrai fichier, pas sur une démo : des tokens à trois niveaux, des composants avec leurs propriétés, une documentation complète, les thèmes clair et sombre dès le départ, puis le web et le mobile.
Claude écrit dans Figma via le MCP. Je fixe les règles, je valide chaque étape et je corrige ce qui ne va pas.
L’IA exécute, je garde le jugement.
Petits pas, lecture avant écriture, capture après chaque modification, audit automatique en fin d’étape. Les specs sont générées depuis les variables : la doc ne peut pas dériver du système.
Le cadre est né d’un incident : en rangeant les icônes, un script a supprimé 53 composants maîtres. Je les ai restaurés depuis l’historique de versions. Depuis, une sauvegarde avant toute opération de masse, et jamais de suppression sans vérification.
Écrire le goût, pas seulement les tokens.
Le système était propre et bien documenté, mais il avait l’air généré : dégradé bleu, cartes partout, accent sur tout.
J’ai écrit des skills pour l’IA (direction visuelle, écrans, interactions, écriture, études de cas) et un audit qui note un écran sur 10. Une première version de ce portfolio obtenait entre 2 et 4 ; celle-ci dépasse 9.
- AvantDégradé, carte flottante, accent partout.
- Après« Un outil qui se tait » : encre, filets, accent en trait.
Le système dans de vrais écrans.
Dix écrans types assemblés uniquement avec les composants et les tokens : un kanban sur le web, trois écrans mobiles en thème sombre.
Ce que j’en retiens.
L’IA va vite sur l’exécution et la documentation. Le goût, elle ne l’a pas par défaut : il faut l’écrire, le mesurer, et savoir dire non.
Livré : le fichier Figma Astra System, l’export des tokens (CSS et JSON), un kit de départ pour le code et 7 skills réutilisables sur d’autres projets.
Retour au début · 01 / 03Garder les visuels dans le produitLire l’étude de cas Agorapulse 30 minutes sur votre produit et ce qui bloque.
Etienne Chevalier · 30 min