Atelier UX/UI Design System de 5 jours pour étudiants en Master 2 (Figma & Zeroheight/Supernova)

Cet atelier porte sur la création d’un design system dans Figma, en mettant l’accent sur les composants, les tokens et les variables. Il vise à permettre aux étudiants de comprendre comment intégrer et adapter le système à leurs projets individuels. Un volet essentiel de l’atelier concerne la documentation du design system à l’aide de Zeroheight ou Supernova.

Public cible : Étudiants en Master 2 UX/UI

Logiciels utilisés

Figma
Zeroheight/Supernova (au choix de l’instructeur – idéalement, les étudiants seront exposés à l’un des deux)

Objectifs de l’atelier

Comprendre les principes et les avantages des design systems.
Maîtriser les fonctionnalités de Figma pour créer et gérer un design system, notamment les composants, les tokens et les variables.
Développer des compétences pratiques dans la création d’une bibliothèque de composants réutilisables.
Apprendre à appliquer des design tokens pour garantir une cohérence visuelle.
Savoir intégrer un design system dans des projets individuels.
Évaluer de manière critique la pertinence des éléments d’un design system pour des besoins spécifiques.
Apprendre à documenter un design system efficacement avec Zeroheight ou Supernova.
Programme détaillé

Jour 1 : Introduction aux design systems & fondamentaux de Figma

Matin :
Introduction aux design systems : définition, objectifs et avantages (cohérence, évolutivité, efficacité).
Exploration de design systems existants (Material Design, Human Interface Guidelines, etc.).
Présentation de l’interface de Figma : outils et fonctionnalités clés pour les design systems.
Mise en place d’un fichier Figma dédié au design system.

Après-midi :
Travail sur les frames et les layouts.
Introduction aux composants : création, modification et utilisation des instances.
Exercice pratique : création de composants de base (boutons, icônes, champs de formulaire).

Jour 2 : Composants avancés et variantes

Matin :
Techniques avancées sur les composants : imbrication, overrides et propriétés.
Introduction aux variantes de composants : création de variations pour différents états (hover, actif, désactivé, etc.).
Bonnes pratiques pour l’organisation et la nomenclature des composants.

Après-midi :
Atelier pratique : construction de composants complexes avec variantes (ex. : cartes, menus de navigation, modals).
Revue par les pairs et feedback sur la conception des composants.

Jour 3 : Design tokens & variables

Matin :
Introduction aux design tokens : définition, utilité et types (couleurs, typographie, espacement, etc.).
Implémentation des design tokens dans Figma avec les variables (locales et globales).
Configuration des palettes de couleurs et styles typographiques à l’aide des variables.

Après-midi :
Atelier pratique : application des design tokens aux composants créés les jours précédents.
Exploration des différentes méthodes de gestion des design tokens (ex. : utilisation de plugins).
Discussion : relation entre design tokens et propriétés des composants.

Jour 4 : Création d’une bibliothèque de design system & introduction à la documentation (Zeroheight/Supernova)

Matin :
Organisation des composants et des tokens dans une bibliothèque structurée sous Figma.
Publication de la bibliothèque du design system pour le partage et la collaboration.
Introduction à Zeroheight/Supernova : présentation de la plateforme, fonctionnalités clés et avantages pour la documentation des design systems.
Mise en place d’un nouveau projet sur Zeroheight/Supernova.

Après-midi :
Connexion de Figma à Zeroheight/Supernova (si applicable).
Atelier pratique : documentation des composants de base sur Zeroheight/Supernova avec focus sur les descriptions, les guidelines d’utilisation et les exemples visuels.
Exploration des fonctionnalités d’auto-mise à jour depuis Figma.

Jour 5 : Intégration, adaptation et documentation avancée

Matin :
Exercices pratiques : intégration des composants et des tokens du design system dans des projets individuels.
Surcharge et personnalisation des composants selon les besoins des projets.
Bonnes pratiques pour la gestion des mises à jour et des évolutions du design system.

Après-midi :
Présentations de groupe : chaque étudiant présente son projet et explique comment il a utilisé le design system, y compris la documentation sur Zeroheight/Supernova.
Discussion : identification des éléments pertinents et non pertinents d’un design system selon les contextes de projet.
Fonctionnalités avancées de Zeroheight/Supernova : exploration des principes de design, extraits de code et guidelines d’accessibilité.
Clôture de l’atelier : récapitulatif des concepts clés, session de questions/réponses.

Évaluation
Participation active aux ateliers et discussions.
Qualité et complétude de la bibliothèque de design system dans Figma.
Intégration efficace du design system dans un projet individuel.
Qualité, exhaustivité et utilité de la documentation du design system dans Zeroheight/Supernova.