D'un UI Kit à un Design System AI-ready.
Deux jours pour construire les fondations d'un Design System, l'industrialiser dans le code et le rendre exploitable par les agents IA.
Un langage commun entre design, code et IA.
Cette formation s'adresse à des équipes pluridisciplinaires (designers, développeurs, product managers, marketing) qui doivent construire ou consolider un Design System, l'industrialiser dans les outils et le code, et le préparer à l'usage croissant des agents d'intelligence artificielle (assistants de code, génération d'interfaces).
Elle alterne apports théoriques, démonstrations et ateliers pratiques sur Figma, autour d'un cas fil rouge ou de l'audit d'un Design System existant, en groupes pluridisciplinaires de 3 à 5 personnes.
Le résultat : un Design System structuré, gouverné, connecté au code et exploitable de façon fiable par vos agents IA.
2 modules pour passer à la pratique
1 jourComprendre et concevoir un Design System
Comprendre et concevoir un Design System
- Design System, style guide, bibliothèque de composants : définitions et bénéfices business (cohérence, vitesse, qualité, scalabilité)
- Anatomie d'un DS : fondations, tokens, composants atomiques, composants composés, gabarits
- Atelier audit de l'existant : cohérence réelle d'un DS en place, ou objectivation du besoin pour une organisation qui n'en a pas encore
- Construire les fondations : catégories de tokens et architecture en 3 niveaux (primitifs, sémantiques, spécifiques composant)
- Atelier Figma : créer ses tokens avec les Variables (collections, modes clair/sombre, styles typographiques et effets)
- Concevoir les premiers composants atomiques : variants, gestion des états, bonnes pratiques d'accessibilité
1 jourIndustrialiser, gouverner et rendre son Design System AI-ready
Industrialiser, gouverner et rendre son Design System AI-ready
- De la conception à l'industrialisation : Dev Mode, synchronisation des tokens avec le code, publication versionnée, intégration CI/CD
- Atelier Code Connect : relier un composant Figma à son implémentation réelle en code sur le cas fil rouge
- Gouvernance et adoption : modèles (centralisé, fédéré, hub & spoke), processus de contribution, versioning, rôles et indicateurs
- Les 3 piliers d'un Design System AI-ready : tokens machine-readables, exposition via serveur MCP, composants à propriétés typées
- Atelier : auditer et préparer son Design System pour l'IA à l'aide d'une checklist dédiée
- Feuille de route par équipe : quick wins à 30 jours, chantiers structurants à 3-6 mois, vision cible à 12 mois
Envie de programmer cette formation ?
On cadre le contexte de vos équipes et on adapte le programme avant de démarrer.