Figma - Niveau 3

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :

• Construire et maintenir un design system complet et scalable dans Figma.
• Optimiser les composants complexes, les variantes et l’auto-layout pour un usage pro.
• Créer des prototypes fonctionnels avancés avec variables, logique et transitions.
• Collaborer efficacement avec les équipes produit et dev.

PROGRAMME

MATINÉE
1. Design systems pro dans Figma

• Structuration d’un design system à grande échelle.
• Pages dédiées (foundations, components, templates, doc…).
• Tokens, styles partagés, variables de design (couleurs, tailles, espacements).
• Bonnes pratiques de naming et conventions (BEM-like, Atomic Design, etc.).

Objectifs Opérationnels : Savoir formaliser un design system dans Figma
Moyen d’évaluation : QCM

2. Composants avancés & logique dans Figma

• Variables (locales, globales) : qu’est-ce que c’est, cas d’usage.
• Utilisation conditionnelle (if/else) dans les composants interactifs.
• Components “intelligents” : boutons dynamiques, menus déroulants, toggles, etc.
• Cas spécifiques : dark mode, multi-langue, responsive complexe.

Exercice pratique : Créer un composant interactif multi-états avec logique conditionnelle et variables.
Objectifs Opérationnels : Approfondir ces connaissances sur le fonctionnement des composants dans Figma
Moyen d’évaluation : QCM
 

APRÈS-MIDI
3. Prototypage ultra-dynamique

• Intégrer la logique utilisateur avec les variables de prototypage.
• Navigation conditionnelle, systèmes à étapes, formulaires simulés.
• Astuces : overlays modaux, animations, effets visuels fluides.
• Démo de prototypes presque "fonctionnels".

Exercice pratique : Créer un prototype de formulaire à étapes avec navigation conditionnelle (et erreurs simulées).
Objectifs Opérationnels : Approfondir ses connaissances sur le prototypage fonctionnel avancé dans Figma
Moyen d’évaluation : QCM
 

4. Collaboration produit / dev poussée

• Dev Mode : export précis, redlines, tokens, inspecteurs de code.
• Connecter Figma à des outils comme Storybook, Zeroheight, Zeplin, GitHub.
• Stratégies de synchronisation design ↔ développement.
• Hand-off parfait : comment livrer, documenter, suivre les évolutions.

Objectifs Opérationnels : Améliorer la collaboration entre Design et Développeur
Moyen d’évaluation : QCM

5. Industrialisation & maintenance

• Stratégies pour maintenir un fichier Figma
• Organisation multi-fichiers / multi-produits.
• Outils de supervision : Analyses Figma, audits d’usage, nettoyage de design system.

Objectifs Opérationnels : Savoir maintenir un design system complet et scalable dans Figma.
Moyen d’évaluation : QCM

Informations pratiques

• Théorie 30%
• Pratique 70%
• Logistique : Avoir un compte Figma (formule professionnel payante minimum)
• Lieu au choix (présentiel recommandé) : Centre de formation bewizyu, Nantes / Dans vos locaux / Classe à distance

Formateur

UI Designer et Product Designer, intervient à toutes les étapes d’un produit ou service imaginé selon une démarche centrée utilisateur.

Personnes en situation de handicap‍

Nos formations sont accessibles aux personnes en situation de handicap. Afin de nous permettre d’organiser le déroulement de la formation dans les meilleures conditions possibles, contactez-nous. Un entretien avec notre référent.e handicap pourra être programmé afin d’identifier les besoins et aménagements nécessaires.

Programme et catalogue peuvent être envoyés sur simple demande