Perfectionnement
Variables, composants complexes, collaboration avec les développeurs… Se perfectionner à Figma pour enrichir ses prototypes et accroître sa productivité
2 jours / 14 heures
Prix : 1 600 € HT
Réf. : W08
Prérequis
Il est nécessaire d’avoir suivi la formation “Figma : réussir sa prise en main” ou justifier de compétences équivalentes (interface maîtrisée, auto-layout, propriétés de composants et variants).
Programme
Réviser les fonctions essentielles
- Rappeler les spécificités de Figma
- Rappeler l’intérêt de l’Atomic Design
- Anticiper la conception en auto-layout
- Rappeler le bon usage des librairies
Exercice : créer un composant "card" en auto-layout
Découvrir les variables
- Identifier les différents types de variables et leurs utilisation
- Différencier les styles et les variables
- Organiser ses collections en fonction de ses besoin de production
- Reconnaître les différents niveaux de variables (roots, semantics…)
- Manipuler les collections de variables et les modes
- Créer des variables de couleurs pour son interface
- Gérer le responsive avec les variables de type “number”
- Paramétrer ses sections pour les modes
Exercice : créer un design light et dark responsive avec les variables et les modes
Créer des composants complexes
- Réviser les variants et leurs propriétés
- Comprendre les composants nested
- Utiliser la fonctionnalité « create multiple components »
- Éditer plusieurs composants en même temps
- Fusionner des composants
- Renommer les propriétés de composants
Exercice : créer un composant, avec de nombreux variants, entièrement éditable depuis les propriétés
Prototyper avec les variables
- Organiser les modes et collections pour le prototypage
- Identifier les opérateurs pour le prototypage conditionnel
- Découvrir les variables de types boolean
- Lier les variables textes (string) aux variants
- Manipuler l’interface avec l’opérateur « Set variable »
- Comprendre les bases des conditions et les opérations
- Créer des conditions pour le prototypage
- Penser ses prototypes avec les variables
Exercice : créer un prototype en utilisant les variables et les conditions
Livrer aux développeurs et gérer la documentation
- Présenter son travail avec les modes et les sections
- Anticiper la stack technique du projet
- Organiser son travail pour le dev mode
- Préparer ses variables pour les développeurs
- Évaluer les enjeux d’un design system
- Gérer le Hand-off avec des solutions tierces (Zeroheight, Storybook…)
- Analyser la structure d’une documentation efficace
- Évaluer le potentiel des API Figma
Exercice : partage d’expériences et discussions sur la mise en œuvre d’un plan d’action
Artistes / Auteurs affiliés à la maison des artistes ?
Découvrez nos conditions préférentielles
Ressources
- Supports de cours dématérialisés
- Abonnement de 3 mois à tuto.com
- Accès illimité par mail à la hotline Swash
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com
Modalités en présentiel
Parcours pédagogique :
Quiz de positionnement ❯ 2 jours présentiels continus ❯ Évaluation des acquis
Méthode pédagogique :
Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, feedbacks personnalisés
Moyens techniques :
- 1 poste par participant (Mac ou PC, selon votre choix), équipé de Figma, fourni par nos soins
- Poste de l’intervenant relié à un grand écran ou vidéoprojecteur
Modalités en distanciel
Parcours pédagogique :
Quiz de positionnement ❯ 2 classes virtuelles discontinues (2 x 1 jour) ❯ Évaluation des acquis
Méthode pédagogique :
Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalisés
Moyens techniques :
- Classe virtuelle créée par nos soins
- Chaque apprenant participe à la session avec son ordinateur, connecté à Internet, et équipé :
- d’un micro et d’une caméra
- de l'application Figma
