Développement Web & No-Code
Figma : concevoir et prototyper des interfaces d'applications web et mobiles
Intermédiaire
À propos de cette formation
Figma s'est imposé comme l'outil de référence du design d'interface collaboratif. Cette formation de 2 jours guide les graphistes et webdesigners dans la maîtrise complète de Figma : prise en main de l'interface, conception de maquettes web et mobile, création de wireflows, design avec des composants, formes vectorielles et prototypage interactif. Aucun prérequis de code n'est nécessaire.
Objectifs de la formation
- Appliquer la démarche UX design dans un projet web avec Figma
- Maîtriser les méthodes et techniques de conception d'interface
- Concevoir et prototyper une interface avec Figma
- Réaliser des parcours de navigation répondant aux besoins des utilisateurs
- Appliquer les bonnes pratiques du design d'interface et d'interaction
Programme détaillé
Module 1 — Spécificités et présentation de Figma
- Qu'est-ce que Figma ? Atouts et comparatif avec les autres outils de design
- Périmètres fonctionnels : wireframes, design system, style guide, maquette interactive
- Travaux pratiques : découverte et manipulation du logiciel
Module 2 — Découvrir l'interface Figma
- Barre d'outils et panneaux de propriété
- Le plan de travail et la superposition des calques
- Présentation de la fonctionnalité de prototypage Figma
- Travaux pratiques : manipulation de l'interface à travers un exemple de réalisation
Module 3 — Préparer le maquettage pour le web
- Les étapes de conception et le design d'interface
- La cinématique du contenu et les tendances actuelles du design
- Représenter le processus utilisateur via des wireflows
- Créer un plan de travail, gérer les calques, utiliser les grilles et les repères
- Gérer les composants et les assets
- Travaux pratiques : création d'un parcours utilisateur sur Figma
Module 4 — Interface d'application mobile
- Spécificités des interfaces mobiles
- Créer un wireflow pour visualiser les interactions utilisateur
- Travaux pratiques : conception d'un wireflow complet avec Figma
Module 5 — Designer avec Figma
- Design d'interface avec les composants Figma
- Travaux pratiques : création et manipulation d'un composant « champ de saisie »
Module 6 — Vecteurs et formes avancées
- Figma et les vecteurs
- L'outil crayon et l'outil plume
- Créer, modifier et éditer des formes vectorielles
- Manipuler les points d'ancrage
- Les objets texte, les lignes et les bordures
- Travaux pratiques : création de formes personnalisées et conception d'une icône
Module 7 — Prototype interactif avec Figma
- Définir les contenus et les écrans du parcours utilisateur
- Création de maquettes fil de fer (wireframes)
- Créer des liens entre les plans de travail
- Exploiter les interactions et les transitions
- Travaux pratiques : création d'un prototype interactif complet
Prérequis
Avoir une bonne culture web. La pratique de logiciels de PAO constitue un atout.