Initiation
Création, prototypage, animation, collaboration… s’initier à l’utilisation de Figma
2 jours / 14 heures
Prix : 1 400 € HT
Réf. : W07
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
Ressources
- Supports de cours dématérialisés
- Abonnement de 3 mois à tuto.com
- Accès illimité par mail à la hotline Swash
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com
Découvrez Swash #2, notre nouveau magazine !
Retours d'expérience, interviews et nouvelles formations à découvrir : 40 pages pour explorer notre univers.
Télécharger
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
