Initiation
Création, prototypage, animation, collaboration… s’initier à l’utilisation de Figma
2 jours / 14 heures
Prix : 1 400 € HT
Réf. : W07
Compétences visées
Définir la place de Figma dans le processus de design d’un site Web ou d’une appli et mettre en œuvre un flux de production efficace pour concevoir, partager et modifier des prototypes interactifs.
Objectifs
- (Re)contextualiser UX et UI
- Découvrir l'environnement Figma
- Se lancer dans la production
- Maîtriser les composants, propriétés et variants (components)
- Réaliser un prototype interactif avec Figma
- Partager et exporter un prototype
Public concerné
Cette formation s’adresse aux DA, graphistes, UI/UX/Product designers, PO…
Prérequis
Il est nécessaire d’avoir une bonne culture Web et / ou produit pour suivre cette formation.
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
- Mettre en place un Design Token grâce aux variables
-> 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
- Gagner en efficacité grâce à l’IA (Relume - Galiléo)
-> Exercice : réaliser une mise en pages responsive
Nos prochaines sessions
les 10 et 11 décembre 2025
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 26 et 27 mars 2026
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 18 et 19 juin 2026
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 21 et 22 septembre 2026
Session garantie*
Je m'inscris à cette session !
S’inscrire
les 10 et 11 décembre 2026
Session garantie*
Je m'inscris à cette session !
S’inscrire
Artistes / Auteurs affiliés à la maison des artistes ?
Découvrez nos conditions préférentielles
Évaluation
L'atteinte des objectifs
a été évaluée par les apprenants à
a été évaluée par les apprenants à
4.6
/5
Moyenne des résultats obtenus depuis
début 2023
début 2023
Profil de l’intervenant
UI Designer avec plus de 10 ans d’expérience en animation de formation.
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
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
Méthodes d'évaluation
- Validation des acquis pendant la formation grâce à des quiz et à la réalisation d’exercices pratiques
- Suivi d'acquisition des objectifs pédagogiques par l'intervenant
- Évaluation à chaud (remplie en fin de formation) et à froid (à 60 jours)
