Le contexte
En mars 2023, j’ai rejoint la Wild Code School comme formateur UX/UI, en distanciel. J’étais l’unique formateur du parcours pédagogique pour le titre RNCP, Concepteur Designer UI et j’assurais la conception ainsi que l’animation de l’ensemble du dispositif : cours, ateliers, ressources pédagogiques, évaluations formatives et évaluations sommatives. Le programme alternait des temps de formation et des périodes en entreprise.
À cette période, les design systems étaient déjà implantés dans les grandes organisations, avec des références comme Material Design, Carbon, Lightning ou Polaris. Entre 2021 et 2023, le sujet prenait une place croissante dans les pratiques des Product Designers et des UX/UI Designers. Les échanges ne portaient plus uniquement sur la création d’une bibliothèque de composants dans Figma, mais aussi sur la cohérence à l’échelle, la documentation, la gouvernance et la traduction des décisions de design en tokens exploitables par les équipes de développement.
Il était essentiel d’intégrer ces notions au parcours afin de préparer les apprenants à l’évolution des pratiques et au rapprochement croissant entre design et développement.
Un environnement technique en pleine évolution
L'enseignement s'inscrivait dans un contexte particulièrement mouvant. Lors de ma première session, Figma ne proposait pas encore de variables natives : il fallait passer par le plugin Figma Tokens, devenu depuis Tokens Studio. L'arrivée des variables dans Figma lors de Config 2023 a renforcé la place des design tokens et confirmé la nécessité d'aborder ces sujets dans la formation.
3. Faire du lien avec des notions déjà acquises
Je créais un lien avec la charte graphique, abordée en tout début de parcours. J’expliquais qu’avant l’essor du digital, la charte graphique était historiquement centrée sur l’identité visuelle et les supports imprimés, et qu’elle ne couvrait que très peu les usages numériques.
Le design system apparaissait alors comme un prolongement de cette charte graphique : il pouvait intégrer l’univers visuel, le ton éditorial et certains principes de marque, mais allait plus loin en définissant les composants, leurs règles d’usage, leur documentation et les ressources destinées aux développeurs.
5. Concevoir le design system selon son contexte
Avant d’aborder la construction d’un design system, je précisais qu’il n’existait pas de formule officielle adaptée à tous les contextes.
Un système interne, réservé aux designers et aux développeurs d’une entreprise, ne répond pas aux mêmes besoins qu’un design system public, documenté sur une plateforme accessible aux partenaires et aux contributeurs externes.
La structure, les outils et le niveau de documentation doivent répondre aux usages réels de l’organisation.
8. Aller plus loin : scalabilité et design tokens
Après avoir vu la mise en place d’un design system dans Figma, nous allions plus loin en abordant des solutions adaptées à des contextes de plus grande ampleur.
J’évoquais des plateformes comme Zeroheight ou Storybook, qui permettent de préserver la synchronisation entre design et code, ainsi que les design tokens et leur documentation.
Design tokens
Nous étudiions également les design tokens, leur rôle et leur nomenclature. Je proposais notamment une comparaison entre Polaris, le design system de Shopify, et Lightning, celui de Salesforce, afin de montrer que des organisations différentes pouvaient adopter des conventions distinctes tout en poursuivant des objectifs similaires.
Live démo Zeroheight
Je réalisais ensuite une démonstration dans Zeroheight à partir d’un fichier Figma préparé en amont, contenant des assets et des styles organisés : couleurs, typographies et icônes. L’objectif était de montrer comment initier rapidement la structuration et la documentation d’un design system à partir d’une base existante, puis mettre en place la synchronisation.
Ce que je retiens de cette séquence
Malgré l’ampleur apparente du sujet, les apprenants parvenaient généralement à aller beaucoup plus loin qu’ils ne l’imaginaient en seulement quelques heures. Le travail en groupe réduisait l’appréhension face à la tâche et permettait à chacun de contribuer à partir de ses points forts.
Cette séquence illustre bien ma manière de concevoir une formation : partir des représentations initiales, contextualiser le sujet, montrer des exemples, laisser un temps d’exploration, accompagner la mise en pratique, puis organiser une restitution qui transforme l’exercice en apprentissage collectif.
