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, autolayout, propriétés de composants et variants).
Programme
Réviser les fonctions essentielles
- Rappeler les spécificités de Figma
- Anticiper la conception en auto-layout
- Rappeler le bon usage des librairies
Découvrir les variables
- Identifier les différents types de variables et leurs utilisation
- Différencier les styles et les variables
- Convertir les styles en variables
- Organiser ses collections en fonction de ses besoin de production
- 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
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
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
- Documenter son design et ses composants
- Préparer ses composants pour une intégration dans un design system
- Gérer le Hand-off avec des solutions tierces (Zeplin, Zeroheight, Storybook…)
- Déployer son design sur des plateformes nocode ou lowcode (Bubble, Bravo Studio…)
- Évaluer le potentiel des API Figma
Artistes / Auteurs affiliés à la maison des artistes ?
Ressources
- Supports de cours dématérialisés
- Abonnement de 3 mois à tuto.com
- Accès illimité par mail à la hotline Swash
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