Formation Figma
Maîtriser le logiciel de conception Figma
Objectifs
À l’issue de la formation, vous pourrez :
- Prendre en main l’outil Figma.
- Créer des styles de couleur et de texte sur Figma.
- Créer des composants sur Figma.
- Optimiser les maquettes pour faciliter les déclinaisons responsive : gérer les contraintes,
utiliser les grilles et la fonctionnalité d’auto layout.
- Créer un prototype interactif avancé : utiliser les différents modes d’interaction et d’animation.
- Préparer les exports et transmettre les éléments graphiques aux développeurs.
Durée du stage
2 jours (soit 14 heures)
Lieu du stage
Locaux Usabilis (18 rue de Saisset 92120 Montrouge) ou Paris ou à distance
Public et pré-requis
Public :
Concepteurs, webdesigners, graphistes print, webmasters, développeurs, chefs de projet, responsables
marketing
Pré-requis :
Aisance générale avec l’informatique.
Nombre de stagiaires par session
Entre 8 et 10 stagiaires maximum
Moyens pédagogiques et techniques
Profil du formateur :
Profil du formateur : consultant spécialisé en UI design et en design orienté objet.
Moyens pédagogiques :
- La formation vous apporte les principes clés de l’utilisation de Figma, sa philosophie et le
potentiel de l’outil.
- Mise en application via des exercices guidés puis via des exercices semi-guidés.
- Le stage est 80% pratique, 20% théorique.
Moyens techniques :
- Séance de formation en salle ou à distance
- Le support pédagogique est fourni à chaque participant, ainsi qu’un exemplaire du livre «UX
Design & Ergonomie des interfaces » - 7ᵉ édition
- Votre ordinateur portable
- Licence Figma gratuite, vérifiez que votre ordinateur et votre système sont compatibles avec
Figma
[Link]
9t=Figma%20is%20predominantly%20browser%2Dbased,of%20using%20Figma's%20Deskto
p%20Apps.
Suivi et évaluation
L'évaluation des compétences acquises est faite en continu pendant la formation lors des exercices
pratiques.
Programme formation Figma
Jour 1
1- Prendre en main l’outil Figma
● Créer et nommer une frame
● Ajouter et éditer un texte
● Ajouter et éditer une forme
● Ajouter des commentaires
● Partager le fichier et ajouter des collaborateurs
Exercice pratique : créer des wireframes en utilisant l’ensemble des fonctionnalités de Figma
2 - Créer des styles sur Figma
● Créer et éditer des styles de couleur
● Créer et éditer des styles de texte
3 - Créer des composants sur figma
● Créer des composants
● Créer et éditer des instances
● Redimensionner des composants
● Nommer les composants
4 - Optimiser les maquettes pour faciliter les déclinaisons responsive : gérer les contraintes, utiliser
les grilles et la fonctionnalité d’auto layout
● Gérer les contraintes
● Utiliser l’auto layout
● Ajouter une grille
Exercice pratique : créer une librairie de composants en utilisant les fonctionnalités avancées de
Figma.
Jour 2
5 - Créer un prototype interactif avancé : utiliser les différents modes d’interaction et d’animation
● Faire des connexions entre les frames
● Comprendre les différentes interactions : smart animate
● Paramétrer et partager un prototype interactif
6 - Préparer les exports et transmettre les éléments graphiques aux développeurs
● Faire des exports
● Télécharger / importer un fichier
● Inspecter sur figma
● Partager une librairie et créer une team
Exercice pratique : décliner les différents écrans et créer un prototype avancé