← Toutes les formations
$ cat ./formations/figma-avance
Figma avancé : composants, variables et design system
Durée : 5 heuresLangue : FrançaisNiveau : AvancéLogiciels : Figma
Prérequis :Savoir créer des frames, dessiner des formes et poser du texte dans FigmaAvoir déjà fait au moins une maquette d'écran, même sans composantsConnaître les bases : calques, frames, export (on ne revient pas dessus)
Description
Un cours pour designers qui savent déjà dessiner une maquette et veulent industrialiser. On construit, écran après écran, une petite bibliothèque de A à Z : boutons et cartes en auto-layout, composants avec propriétés, tokens de couleur et d'espacement en variables avec un mode clair et un mode sombre, prototypes qui réagissent à des conditions, puis une bibliothèque publiée, versionnée et livrée aux développeurs dans Dev Mode. Chaque leçon donne les manips exactes, les raccourcis et les pièges qui coûtent des heures quand on ne les connaît pas.
Programme
Objectifs
- Construire des composants qui se redimensionnent seuls sans casser
- Modéliser un bouton complet avec variants et propriétés au lieu de dix copies
- Mettre en place des variables de couleur, d'espacement et de rayon avec modes clair et sombre
- Organiser des tokens en primitives, sémantiques et composants sans se perdre dans le nommage
- Créer un prototype qui change d'état selon une condition, pas seulement au clic
- Publier une bibliothèque, gérer ses versions et livrer des specs exploitables aux développeurs
Compétences acquises
Auto-layout avancéSystème de composants et variantsVariables et design tokensPrototypage conditionnelGestion de bibliothèque FigmaHandoff développeur (Dev Mode)
Type de contenu
Leçons écritesDémos commentéesSchémas annotésQuiz interactifsCas pratiques