Formation Figma, concevoir un design system

Cartographier la navigation : sitemap, pages de niveaux, boîtes de dialogue et popups, tri par cartes pour concevoir un menu principal
Zoning : placement et dimensionnement, hiérarchie visuelle, ligne de flottaison, dévoilement progressif
Prise en main de Figma : pages et calques, outils de dessin, formes, contours, effets
Zoning dans Figma : placement absolu, grilles de mise en page, défilement
Composants et instances dans Figma

Enjeux du responsive design
Contraintes (constraints)
Auto-layout
Tour d’horizon des composants graphiques
Variants et propriétés
Plugins

Design visuel : repères, tendances, notion d’affordance
Charte graphique : couleurs, iconographie, illustrations
Styles de couleurs et variables
Design tokens : conventions de nommage, variables primitives/sémantiques, dimensions et espacements (tailles “T-Shirt”)
Décliner un design en thèmes : exemple du dark mode
Images & iconographie : exemples (Unsplash, Iconify)

Définition d’un design system
Différences entre charte graphique, UI kit et design system
Atomic Design : atomes, molécules, organismes, templates, pages
Exemples de design systems
Figma et design system : librairies, publication, versioning, structuration et bonnes pratiques

Vers un guide de style
Typographie : police, taille, graisse…
Microcopie : libellés de boutons, erreurs, aide en ligne
Hiérarchie visuelle et échelle typographique
Contenus : accroche, pyramide inversée
Styles typographiques dans Figma

Préparer un cycle de maquettage : recrutement, préparation et animation d’atelier
Idéation avec FigJam : divergence puis convergence
Outils clés de maquettage
Figma : repères sur l’historique et l’adoption
Prototypage interactif : transitions, variants, animations, overlays
Export et partage d’un prototype
Collaboration designers / développeurs / utilisateurs
Vers le Design Ops avec le Dev Mode