Dans la fenêtre d’impression, choisissez « Enregistrer en PDF » comme destination.
Réf. DSG-SYS
Design System - Industrialiser la conception des interfaces
UX / UI Design
Durée
14 à 21 heures (2 à 3 jours) selon le format
Modalités
Présentiel, Classe à distance
Reconnaissance
Formation non certifiante (attestation de fin de formation)
Format de vente
Inter-entreprise ou Intra-entreprise
Délai d’accès
Inter : jusqu’à 5 jours ouvrés avant la session ; intra : en moyenne 15 jours ouvrés après l’acceptation du devis
Tarif intra
Sur devis
Pourquoi suivre cette formation
Concevez, documentez et déployez un Design System durable : architecture des composants, tokens, organisation de l'équipe et collaboration fluide entre designers et développeurs.
À l’issue de cette formation, les participants seront capables de
Appliquer la méthode Atomic Design pour organiser une bibliothèque de composants
Créer et gérer une architecture de Design Tokens (couleurs, typographies, espacements)
Synchroniser les maquettes et les composants de code
Documenter efficacement les composants pour maximiser leur adoption par les équipes
Mettre en place une gouvernance et un cycle de vie pour faire évoluer le système
Mesurer le retour sur investissement et les effets concrets du Design System
IMPACTTerrain21 heures (3 jours) · dont une journée en décalé2 175 € HTpar participant (inter-entreprises)
Chaque format reprend le précédent et y ajoute des journées.
Public visé
UI/UX Designers, Product Designers, Développeurs Front-End, Lead Tech, Product Owners et Product Managers désireux d'industrialiser leur flux de production numérique.
Prérequis
Maîtrise opérationnelle d'un outil de design (Figma préconisé) ou de bases en développement Front-End (HTML/CSS, composants web).
Prérequis techniques à distance
La classe virtuelle se tient sur Microsoft Teams : AMBIA fournit à chaque participant un compte pour la durée de la formation. En intra-entreprise, elle peut aussi se tenir sur l’outil que l’entreprise utilise déjà, par exemple Zoom ou Google Meet.
Le participant se connecte depuis un ordinateur équipé d’une caméra, d’un micro, d’un accès à internet et d’un navigateur à jour, dans un lieu calme. Si la formation le demande, le formateur donne accès à un poste de travail à distance, depuis le navigateur.
Pendant la formation, l’assistance technique répond à support@ambia-skills.fr.
Objectifs pédagogiques
Définir les niveaux de la méthodologie Atomic Design.
Expliquer le rôle et la valeur ajoutée des Design Tokens dans l'alignement design-code.
Construire une bibliothèque de composants connectés et documentés.
Diagnostiquer les failles d'alignement et d'accessibilité (WCAG) au sein d'un catalogue d'interfaces.
Arbitrer l'opportunité d'intégrer, modifier ou rejeter un nouveau composant dans le système.
Structurer le modèle de gouvernance et le flux de contribution applicable à une équipe produit multi-disciplinaire.
Programme détaillé
Jour 1ACTION
Matin
Les fondations et l'architecture (Atomic Design et tokens)
Maîtriser les principes de l'Atomic Design pour catégoriser ses composants.
Structurer et normaliser l'usage des Design Tokens au service de l'identité de marque.
Enjeux et ROI d'un Design System : passer de la culture de la page à la culture du composant.
Décryptage de l'Atomic Design : Atomes, Molécules, Organismes, Templates, Pages.
Les Design Tokens : définition, hiérarchie (Global, Alias, Component) et règles de nommage standardisées.
Initialisation du référentiel sous Figma et préparation de la structure sémantique.
Atelier pratique
Décomposition d'une interface existante selon les 5 niveaux de l'Atomic Design et création d'une taxonomie normalisée de Design Tokens (Global, Alias, Component) avec calcul en direct des ratios de contraste WCAG (norme AA/AAA).
Cas métier
Initialisation des tokens d'espacement et de couleur pour une application d'entreprise, en gérant les contraintes d'accessibilité numérique (contrastes WCAG).
Compétence acquise
Être capable de traduire une charte graphique en une structure de tokens rigoureuse et évolutive.
Livrable
Une cartographie normalisée des Design Tokens et une taxonomie d'équipe validée.
Après-midi
Concevoir les composants et les relier au code
Concevoir des composants flexibles sous Figma en exploitant les propriétés avancées.
Comprendre les mécanismes de traduction des tokens vers les formats de développement (JSON, CSS, Saas).
Création de composants complexes avec auto-layout, variantes et propriétés de composants Figma.
Introduction aux outils de conversion de tokens (Style Dictionary, Token Studio).
Alignement technique : comment transformer un fichier de tokens JSON en variables CSS exploitables par l'ingénierie.
Atelier pratique
Configuration d'un composant modulaire dans Figma avec variantes et propriétés booléennes, suivie de l'export de son fichier de tokens JSON et de sa conversion automatique en variables CSS via Style Dictionary.
Cas métier
Conception d'un composant « Card » dynamique sous Figma et vérification de sa parfaite adéquation avec sa structure de propriétés dans un composant de code (React/Vue ou CSS pur).
Compétence acquise
Savoir bâtir un pont automatisé et itératif entre les maquettes de design et le code source.
Livrable
Un mini-kit de composants Figma connectés à un dictionnaire de tokens synchronisé.
Jour 2ACTION
Matin
Centraliser et documenter avec Storybook
Structurer une documentation claire, interactive et accessible à tous les profils produit.
Découvrir l'usage de Storybook pour tester et exposer les composants de code.
Les piliers d'une bonne documentation : principes de design, anatomie du composant, règles d'usage (« Do's & Don'ts »).
Présentation de Storybook comme catalogue de composants de code isolé.
Stratégies d'intégration de la documentation (Zeroheight, Notion ou solutions internes).
Atelier pratique
Structuration d'une page de documentation complète sur Zeroheight (anatomie, directives d'usage « Do's & Don'ts », règles d'accessibilité numérique) connectée en direct à un composant isolé dans Storybook.
Cas métier
Rédaction complète de la spécification fonctionnelle d'un composant de formulaire complexe (« Input Select ») incluant ses états d'erreur et son comportement au clavier.
Compétence acquise
Être capable de formaliser et de centraliser le savoir d'un produit pour en faciliter l'onboarding.
Livrable
Une page de documentation de référence publiée combinant spécifications UI et implémentation technique.
Après-midi
Gouvernance, cycle de vie et adoption
Organiser le flux de contribution pour faire vivre le système sans l'asphyxier.
Piloter l'adoption du Design System auprès des différentes équipes projet.
Les modèles d'organisation (centralisé, fédéré, hybride) : forces et faiblesses.
Le cycle de vie d'un composant : de la demande métier à la mise au rebut (dépréciation).
Mesurer l'adhésion : indicateurs de couverture du code et de satisfaction d'équipe.
Atelier pratique
Modélisation d'un logigramme de contribution (étapes de proposition, revue de design, validation technique et release) et définition d'un tableau de bord de métriques d'adoption (taux de composants détachés, couverture de code).
Cas métier
Simulation d'un comité d'arbitrage (« Design System Guild ») devant statuer sur la demande d'une équipe produit qui souhaite modifier un bouton standard pour un besoin d'urgence commerciale.
Compétence acquise
Savoir animer et faire évoluer une communauté de contributeurs internes pour pérenniser l'outil.
Livrable
Un workflow de contribution formalisé sous forme de logigramme opérationnel.
Jour 3 · en décaléIMPACT
Matin
Diagnostic de la maturité et de l'adoption du Design System
Mesurer le taux d'utilisation effectif des composants officiels dans les projets d'entreprise et identifier les freins d'adoption.
Analyse des maquettes et du code produits depuis la formation : repérage des composants dupliqués ou détachés (« detach instance »), des raisons de ces contournements et ajustement de l'organisation du Design System.
Après-midi
Organiser les rendez-vous d'équipe et la feuille de route
Organiser l'animation de la communauté de design dans la durée et définir la feuille de route des composants prioritaires.
Atelier réunissant responsables produit, designers et développeurs : règles de contribution, revues de composants tous les quinze jours et feuille de route du système pour les deux prochains trimestres.
Les ateliers et cas métier de ce programme pourront être adaptés par le consultant-formateur selon les besoins, le niveau et les prérequis des participants, pour favoriser l’atteinte des objectifs pédagogiques.
Méthodes et moyens pédagogiques
Méthodes mobilisées
Pédagogie active et immersive basée sur des cas métiers complexes. Alternance de partages de frameworks de référence, de travaux pratiques croisés en sous-groupes (Figma & Code), et de revues de conception critiques collectives pour valider la robustesse du système.
Moyens techniques
Postes de travail équipés des licences Figma ou environnements de développement locaux/cloud (StackBlitz, GitHub) ; espace collaboratif numérique (Miro/Mural) ; référentiels de documentation types AMBIA.
Moyens humains
Formation animée par un consultant-formateur expert senior, Designer ou Product Engineer en activité, spécialiste du déploiement de Design Systems à large échelle.
Modalités d’évaluation
Évaluation diagnostique
Questionnaire d'auto-évaluation technique et de recueil des configurations d'outils envoyé 15 jours en amont.
Évaluation formative
Contrôle continu tout au long de la formation via des revues de code/design croisées, la manipulation en direct des jetons et la résolution guidée de cas de crise.
Évaluation sommative
Questionnaire de validation des acquis sous forme de QCM en fin de formation et évaluation qualitative des livrables (composants Figma et configurations JSON) élaborés pendant les ateliers pratiques.
Suivi
Feuilles de présence signées par demi-journée, en présentiel comme à distance.
Attestation de fin de formation remise à chaque stagiaire, mentionnant les objectifs, la nature, la durée et les résultats de l’évaluation.
Certificat de réalisation adressé au client ou au financeur.
Questionnaire de satisfaction remis à l’issue de la formation.
Délai d’accès
Inter-entreprises : L’inscription est possible jusqu’à 5 jours ouvrés avant le début de la session, sous réserve des places disponibles.
Intra-entreprise : La formation débute en moyenne 15 jours ouvrés après l’acceptation du devis.
Ce délai peut être adapté selon la disponibilité des sessions, le positionnement du stagiaire et, le cas échéant, l’instruction du dossier de prise en charge par le financeur.
Accessibilité handicap
Nos parcours sont adaptables aux personnes en situation de handicap. Contactez notre référent pour l'étude des aménagements.
Référent handicap : accessibilite@ambia-skills.fr. Aucune reconnaissance de la qualité de travailleur handicapé ni aucun justificatif médical n’est exigé.
Indicateurs de résultats
Indicateurs publiés à partir de 3 avis.
Mode de calcul : www.ambia-skills.fr/notre-approche#notes
