Initiation
Création, prototypage, animation, collaboration… s’initier à l’utilisation de Figma
2 jours / 15 heures
Prix : 1 350 € HT
Réf. : W07
(14 heures collectives + 1 heure de mentorat distanciel)
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
Artistes / Auteurs affiliés à la maison des artistes ?
Découvrez nos conditions préférentielles
Les + de Swash
- Maintien garanti de la session (voir nos conditions d'aménagement)
- 1 heure en tête à tête avec votre intervenant expert pour aller au delà de l'expérience collective
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 (2 numéros) à étapes:
- Inscription au forum des swashers
étapes:
Chaque participant bénéficie de 6 mois d'abonnement à étapes (2 numéros)
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 ❯ 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
