Figma : réussir sa prise en main


Création, prototypage, animation, collaboration… s’initier à l’utilisation de Figma
2 jours / 15 heures
Prix : 1 300 € HT
Réf. : W07
(14 heures collectives + 1 heure de mentorat distanciel)

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

  • Recontextualiser l’UX/UI
  • Créer des interfaces Web et mobile
  • Maîtriser les components (composants) 
  • Réaliser un prototype interactif
  • Partager et exporter un prototype

Public concerné

Cette formation s’adresse aux Directeurs Artistiques, graphistes, UI/UX/product designers.

Prérequis

Il est nécessaire d’avoir une bonne culture Web ou d'avoir suivi notre formation « Culture Web : environnement de production et tendances ».

Programme

(Re)contextualiser UI et UX

  • Identifier les grands principes du design d’interface
  • Intégrer le vocabulaire utile : navigation, wireframe, prototypage, mockup, guideline, design system, atomic design...
  • Établir un état des lieux des métiers : product designer / UI designer / UX designer...
-> quiz de compréhension et études de cas

Créer des interfaces web et mobile

Découvrir Figma

  • Créer  son compte et gérer son abonnement
  • Chercher et installer des ressources / des plugins depuis Figma Community
  • Se repérer dans l’interface (outils, pages...)
  • Importer et manipuler des assets / des fichiers
  • Distinguer les limites de la version gratuite

Se lancer dans la production

  • Créer et paramétrer un nouveau document
  • Configurer la grille et le layout
  • Organiser sa mise en pages avec les calques
  • Manipuler les blocs texte
  • Distinguer les textes en bloc des textes en ligne
  • Enrichir le texte (famille de police, graisse, interlettrage, interlignage…)
  • Créer, enrichir et partager une bibliothèque (library)
  • Définir, hiérarchiser et appliquer des styles
  • Gérer les mises à jour de style de la bibliothèque
  • Distinguer les containers (group et frame)
  • Expérimenter les frames
  • Hiérarchiser le contenu de la frame grâce à l'auto layout
  • Gérer les contraintes liées au responsive
-> Exercice : créer un menu responsive

Maîtriser les components (composants)

  • Distinguer les différents types de components
  • Construire des components
  • Hiérarchiser ses components avec les variants
  • Prototyper les états de variants
  • Utiliser les propriétés de components 
-> Exercice : Créer un bouton interactif avec effet de hover et des variants avec et sans icons

Réaliser un prototype interactif avec Figma

  • Distinguer les différents types d’animation (Smart Animate/None/Movement)
  • Identifier les déclencheurs et relier les éléments
  • Paramétrer et prévisualiser l’animation
  • Créer un effet de survol sur un bouton avec le Smart Animate
  • Identifier le device et le point de départ du prototype
  • Définir le parcours utilisateur et relier les frames en fonction
  • Appliquer des animations de transition entre les frames
-> Exercice : Prototyper une mini-expérience à partir de frames existantes

Partager et exporter un prototype

  • Collaborer avec les parties prenantes au projet (interne et/ou externe)
  • Créer un lien de partage public ou privé
  • Visualiser un prototype sur mobile
  • Commenter et/ou recueillir les commentaires
  • Personnaliser les options d’exports
  • Exporter ses assets et ses mises en pages en png, jpeg, svg ou pdf
  • Visualiser le code grâce au panneau Inspect
  • Lister quelques plugins indispensables
  • Commenter un prototype
  • Traiter les révisions (historique et comments)
-> Exercice : expérimenter le partage, la co-création et l’export sur les prototypes réalisés

Profil de l’intervenant

Product Designer avec plus de 3 ans d’expérience en animation de formation.

Les + de Swash

Ressources

  • Supports de cours dématérialisés
  • Supports vidéo (enregistrements, pendant la session, d’une sélection de démonstrations réalisées par l’intervenant)
  • Abonnement de 3 mois à tuto.com
  • Abonnement de 6 mois (3 numéros) à étapes:
  • Inscription au forum des swashers

Partager :

Modalités en présentiel

Parcours pédagogique :

Quiz de positionnement ❯ 2 jours présentiels continus ❯ Mentorat distanciel (1 heure en tête à tête avec l'intervenant)

Méthode pédagogique :

Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, feedbacks personnalisés, mentorat

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)  Mentorat distanciel (1 heure en tête à tête avec l'intervenant)

Méthode pédagogique :

Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalisés, mentorat

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

É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 14 mars 2022