Initiation
Création, prototypage, animation, collaboration… s’initier à l’utilisation de Figma
2 jours / 14 heures
Prix : 1 400 € HT
Réf. : W07
Programme
(Re)contextualiser UI et UX
- Rappeler les métiers du design d’interface : product designer / UI designer / UX designer...
- Intégrer le vocabulaire utile : navigation, wireframe, prototypage, design system, atomic design...
-> Échanges
Découvrir l'environnement Figma
- Comprendre le principe de « Team »
- Chercher et installer des ressources / des plugins depuis Figma Community
- Se repérer dans l’interface (Layers, Pages, Assets, modes Design et Prototype…)
-> Échange et manipulation
Se lancer dans la production
- Créer des formes (outils)
- Importer une image et vidéo
- Manipuler les blocs texte
- Enrichir le texte (famille de police, graisse, interlettrage, interlignage…)
- Gérer les masques
- Manipuler les Boolean Groups
- Ajouter des effets
- Définir, hiérarchiser et appliquer des styles
- Distinguer les containers (Group/Frame/Section)
- Hiérarchiser le contenu de la frame grâce à l'auto layout
- Configurer les grilles
-> Exercice : créer des écrans d’application
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
- Importer et manipuler des assets
- Prototyper les états de variants
- Créer un effet de survol sur un bouton avec le Smart Animate
-> Exercice : créer une série de boutons interactifs (effet de hover, variants, icons)
Réaliser un prototype interactif avec Figma
- Identifier les déclencheurs et relier les éléments
- Définir le parcours utilisateur
- Prototyper un parcours utilisateur en liant les frames
- Créer des animations simples pour améliorer l’expérience utilisateur
- Gérer les scrolls
-> Exercice : ajouter de l’interactivité et de l’animation sur des frames existantes
Partager et exporter un prototype
- Créer un lien de partage public ou privé
- Commenter et / ou recueillir les commentaires
-> Exercice : expérimenter le partage, la co-création et l’export sur les prototypes réalisés
Aller plus loin
- Optimiser son flux de production
- Créer, enrichir et partager une Librairie externe (bibliothèque)
- Expérimenter le responsive design
-> Exercice : réaliser une mise en pages responsive
Nos prochaines sessions
les 10 et 11 février 2025
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 12 et 13 mai 2025
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 18 et 19 septembre 2025
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 10 et 11 décembre 2025
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
- 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
