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 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...
-> Études de cas

Découvrir l'environnement Figma

  • Expliquer le principe de “teams” et la gestion des espaces de travail
  • Créer son compte et gérer son abonnement
  • Chercher et installer des ressources / des plugins depuis Figma Community
  • Distinguer les limites de la version gratuite

-> Échanges

Se lancer dans la production

  • Se repérer dans l’interface (outils, pages...)
  • Créer et paramétrer les documents de librairie et de production
  • Configurer la grille et le layout
  • Manipuler les blocs texte
  • Distinguer les différentes typologies de bloc texte
  • 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
  • Distinguer les styles et les variables
  • Gérer les mises à jour de style de la bibliothèque
  • Distinguer les containers (Group/Frame/Section)
  • Expérimenter les frames
  • Hiérarchiser le contenu de la frame grâce à l'auto layout
  • Distinguer les différents types d’auto-layout et leurs cas d’utilisation
  • Gérer les contraintes liées au responsive
  • Importer et manipuler des assets / des fichiers
-> Exercice : créer un menu responsive

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
  • Construire des composants avec les propriétés
  • Hiérarchiser ses composants avec les variants
  • Distinguer les différents types d’animation (Smart Animate/None/Movement)
  • Prototyper les états de variants
  • Créer un effet de survol sur un bouton avec le Smart Animate
-> Exercice : Créer un bouton interactif avec effet de hover et des variants avec et sans icons

Réaliser un prototype interactif avec Figma

  • Créer un composant adaptatif pour le responsive
  • Appréhender l’auto-layout en wrap
  • Jouer sur les contraintes pour le responsive design
  • Identifier les déclencheurs et relier les éléments
  • Définir le parcours utilisateur et relier les frames en fonction
  • Prototyper un parcours utilisateur en liant les frames
  • Gérer les variants de composants en fonction du parcours
  • Créer des animations basiques pour améliorer l’expérience utilisateur
-> 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é
  • 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
  • Découvrir le dev mode
  • 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

Artistes / Auteurs affiliés à la maison des artistes ?

Découvrez nos conditions préférentielles

Évaluation

Cette formation a reçu la note de
4.5
/5
Moyenne des notes reçues pour cette formation

Profil de l’intervenant

UI Designer avec plus de 10 ans d’expérience en animation de formation.

Ressources

  • Supports de cours dématérialisés
  • Abonnement de 3 mois à tuto.com
  • Accès illimité par mail à la hotline Swash
Image
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com

Partager :

Image

Découvrez Swash #2, notre nouveau magazine !

Retours d'expérience, interviews et nouvelles formations à découvrir : 40 pages pour explorer notre univers.

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 14 février 2024