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
  • Créer des interfaces Web et mobile
  • Maîtriser les composants (components) 
  • 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 composants (components)

  • Distinguer les différents types de composants
  • Construire des composants
  • Hiérarchiser ses composants avec les variants
  • Prototyper les états de variants
  • Utiliser les propriétés de composants
-> 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

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
Moyenne des notes reçues pour cette formation

Profil de l’intervenant

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

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
  • Inscription au forum des swashers
Image
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com

Partager :

Image

Découvrez notre magazine !

Interviews, avis d'experts, inspiration : 40 pages pour explorer notre univers et nos domaines de compétences.

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 25 août 2023