Initiation

Figma : réussir sa prise en main


Création, prototypage, animation, collaboration… s’initier à l’utilisation de Figma
2 jours / 14 heures
Prix : 1 400 € HT
Réf. : W07

Compétences visées

Définir la place de Figma dans le processus de design d’un site Web ou d’une appli et mettre en œuvre un flux de production efficace pour concevoir, partager et modifier des prototypes interactifs.

Objectifs

  • (Re)contextualiser UX et UI
  • Découvrir l'environnement Figma
  • Se lancer dans la production
  • Maîtriser les composants, propriétés et variants (components) 
  • Réaliser un prototype interactif avec Figma
  • Partager et exporter un prototype

Public concerné

Cette formation s’adresse aux DA, graphistes, UI/UX/Product designers, PO…

Prérequis

Il est nécessaire d’avoir une bonne culture Web et / ou produit pour suivre cette formation.

Programme

(Re)contextualiser UI et UX

  • Rappeler les métiers du design d’interface : product designer / UI designer / UX designer...
  • Intégrer le vocabulaire utile : navigation, wireframe, prototypage, design system, atomic design...
-> Échanges

Découvrir l'environnement Figma

  • Comprendre le principe de « Team »
  • Chercher et installer des ressources / des plugins depuis Figma Community
  • Se repérer dans l’interface (Layers, Pages, Assets, modes Design et Prototype…)

-> Échange et manipulation

Se lancer dans la production

  • Créer des formes (outils)
  • Importer une image et vidéo
  • Manipuler les blocs texte
  • Enrichir le texte (famille de police, graisse, interlettrage, interlignage…)
  • Gérer les masques
  • Manipuler les Boolean Groups
  • Ajouter des effets
  • Définir, hiérarchiser et appliquer des styles
  • Distinguer les containers (Group/Frame/Section)
  • Hiérarchiser le contenu de la frame grâce à l'auto layout
  • Configurer les grilles
-> Exercice : créer des écrans d’application

Maîtriser les composants, propriétés et variants (components)

  • Distinguer les différents types de composants
  • Différencier les propriétés et les variants
  • Importer et manipuler des assets
  • Prototyper les états de variants
  • Créer un effet de survol sur un bouton avec le Smart Animate
-> Exercice : créer une série de boutons interactifs (effet de hover, variants, icons)

Réaliser un prototype interactif avec Figma

  • Identifier les déclencheurs et relier les éléments
  • Définir le parcours utilisateur
  • Prototyper un parcours utilisateur en liant les frames
  • Créer des animations simples pour améliorer l’expérience utilisateur
  • Gérer les scrolls
-> Exercice : ajouter de l’interactivité et de l’animation sur des frames existantes

Partager et exporter un prototype

  • Créer un lien de partage public ou privé
  • Commenter et / ou recueillir les commentaires
-> Exercice : expérimenter le partage, la co-création et l’export sur les prototypes réalisés

Aller plus loin

  • Optimiser son flux de production
  • Créer, enrichir et partager une Librairie externe (bibliothèque)
  • Expérimenter le responsive design
-> Exercice : réaliser une mise en pages responsive

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 3 septembre 2024