Skip to content
Design System avec Claude Code
Expérimentation IA2025Shipped

Design System avec Claude Code

Designer & Implémenteur

Connecter deux workflows qui ne se parlaient pas : la rigueur d'un design system Figma et la vitesse du prototypage assisté par IA. Claude Code pilote désormais les deux via Figma MCP Console.

Design System avec Claude Code

Pendant un an, j'ai travaillé avec deux approches parallèles qui ne se parlaient pas. D'un côté, l'approche classique dans Figma : librairie de marque, librairie de composants, fichiers de conception connectés, parcours détaillés pour le handoff avec les développeurs. Rigoureux, mais complexe à produire et à faire évoluer. De l'autre, le prototypage avec Claude Code : des interfaces HTML réalistes générées en quelques minutes, utilisables en test utilisateur, mais complètement déconnectées du design system en place dans Figma. Utiles pour converser, inutiles pour livrer en production.

Figma MCP Console a changé la donne. Claude Code peut maintenant générer un fichier Figma complet : un design system avec ses tokens, ses variables, ses composants, puis implémenter les écrans décrits en spécification, connecter les parcours entre eux et poser les transitions. En sortie, on récupère un fichier Figma autonome, interactif, avec une application complète à l'intérieur.

J'ai conçu une application mobile pour le secteur médical de cette façon. 10 écrans, un UI kit complet avec styles, tokens, variables et une vingtaine de composants principaux. En deux heures. L'écart entre le design voulu et le résultat implémenté était quasi nul sur les composants atomiques.

Ce qui m'intéresse le plus dans cette évolution, ce n'est pas la vitesse de production. C'est la possibilité de maintenir un design system à jour au fil de l'eau, de mettre à jour les composants et les variables en itérant directement avec Claude Code, sans avoir à reprendre chaque écran à la main. Et de garder ce design system comme source de vérité partagée, côté design et côté développement.

Il reste des corrections manuelles, et l'ensemble n'est pas encore sans friction. Mais la direction est claire pour les designers qui créent des systèmes et prototypent des parcours.

Livrables

Design System (Tokens + Variables)Figma MCP ConsoleApp Médicale 10 ÉcransWorkflow Claude CodePrototypes Interactifs

Projets similaires

Victor Soussan

Victor Soussan

Lead Product Designer

Envie de collaborer sur un projet similaire ? Discutons.