Les spécificités du logiciel
- Qu'est-ce que FIGMA ?
- Les atouts et les enjeux du logiciel.
- Comparatif avec les autres outils de design.
- Les périmètres fonctionnels : wireframes, design system, style guide, maquette graphique interactive.
Travaux pratiques
Découverte de la manipulation du logiciel.
Découvrir l'interface de FIGMA
- Barre d'outils et panneaux de propriété.
- Le plan de travail FIGMA.
- La superposition des calques.
Travaux pratiques
Manipulation de l’interface à travers un exemple de réalisation.
Préparer le maquettage pour le web avec la fonctionnalité FIGMA
- Présentation de la fonctionnalité FIGMA.
- Les étapes de conception.
- Le design d'interface.
- La cinématique du contenu.
- Les tendances du design.
Travaux pratiques
Création d'un parcours utilisateur sur FIGMA à partir d’un exemple concret.
Interface d'application mobile
- Les spécificités des interfaces d'application mobile.
- Représenter le processus utilisateur.
- Wireflow : voir comment l'utilisateur interagit avec l'application.
Travaux pratiques
Création d’un wireflow avec FIGMA.
Designer avec FIGMA
- Créer un plan de travail.
- Créer et gérer les calques.
- Utiliser les grilles et les repères.
- Gérer les composants et assets.
Travaux pratiques
Création et manipulation d’un composant « champ de saisie ».
Conceptualiser et ajouter des formes
- FIGMA et les vecteurs.
- L’outil crayon.
- Créer, modifier et éditer des formes.
- Créer des éléments vectoriels avec l'outil plume.
- Manipuler les points d'ancrage.
- Les objets texte, les lignes et les bordures.
Travaux pratiques
Création de formes personnalisées avec l’outil plume. Créer une icône.
Réaliser un prototype interactif avec FIGMA
- Définir les contenus.
- Définir 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.