Perfectionnement

Figma : gagner en efficacité


Se perfectionner à Figma pour enrichir ses prototypes et accroître sa productivité
2 jours / 14 heures
Prix : 1 600 € HT
Réf. : W08

Compétences visées

Créer des prototypes avancés grâce à une utilisation experte des variables et des modes. Optimiser le hand off avec le dev mode.

Objectifs

  • Réviser les fonctions essentielles
  • Découvrir les variables
  • Prototyper avec les variables
  • Livrer aux développeurs et gérer la documentation

Public concerné

Cette formation s’adresse aux UI/UX/product designers.

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
-> 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
  • 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
-> Exercice : créer un design light et dark responsive avec les variables et 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
→ 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
  • 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
→ Partage d’expériences et discussions sur la mise en œuvre d’un plan d’action
 

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

Méthodes d'évaluation

  • Validation des acquis pendant la formation grâce à des quiz et à la réalisation d’exercices pratiques
  • Suivi d'acquisition des objectifs pédagogiques par l'intervenant
  • Évaluation à chaud (remplie en fin de formation) et à froid (à 60 jours)

Dernière mise à jour le 5 septembre 2024