Évènement
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
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
Nos prochaines sessions
les 23 et 24 octobre 2023
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 27 et 28 novembre 2023
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 24 et 25 janvier 2024
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 28 et 29 mai 2024
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 25 et 26 septembre 2024
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 12 et 13 novembre 2024
Session garantie*
Je m'inscris à cette session !
S’inscrire
Artistes / Auteurs affiliés à la maison des artistes ?
Découvrez nos conditions préférentielles
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
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com
Découvrez notre magazine !
Interviews, avis d'experts, inspiration : 40 pages pour explorer notre univers et nos domaines de compétences.
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
