Vous avez une idée de site ou d’application, mais vous ne savez pas comment la transformer en écrans concrets ? En deux jours, cette formation vous accompagne pas à pas dans la prise en main de Figma. Vous apprendrez à organiser vos idées, créer une maquette lisible, relier vos écrans et présenter votre projet à des collègues ou à un client.
La méthode privilégie la pratique : chaque notion est mise en application sur un exemple simple, puis réinvestie dans un mini-projet. Vous découvrirez les fonctions utiles sans vous perdre dans des options avancées, avec une attention particulière portée à la clarté et au travail collaboratif.
Module 1 — Découvrir Figma et préparer son projet
Repérer les outils essentiels
Vous prenez en main l’espace de travail : fichiers, pages, panneaux, zoom et déplacement dans la zone de conception. Vous apprenez à créer un fichier, à le nommer et à retrouver les commandes utiles. Nous abordons aussi la différence entre une maquette, qui représente une interface, et un prototype, qui permet d’en simuler les interactions.
Structurer avant de dessiner
Avant de placer des éléments à l’écran, vous définissez le besoin, le public et l’action principale de votre interface. Par exemple, pour une page de prise de rendez-vous, l’objectif est de permettre à la personne de comprendre l’offre puis de choisir un créneau. Cette étape évite de produire des écrans séduisants mais difficiles à utiliser.
Exercice pratique : créer un fichier pour un petit projet, ajouter des pages et noter l’objectif ainsi que les besoins de l’utilisateur.
Module 2 — Construire une maquette d’interface
Créer des écrans et placer les éléments
Vous créez un écran adapté au contexte du projet et découvrez comment ajouter des formes, du texte, des images et des boutons. Vous apprenez à déplacer, redimensionner et aligner les objets avec précision. Les repères et l’alignement vous aident à obtenir une composition ordonnée, sans devoir tout positionner à l’œil.
Soigner la hiérarchie visuelle
Une interface doit permettre de comprendre rapidement ce qui compte. Vous travaillez les titres, les espaces, les tailles de texte et les contrastes pour guider le regard. Nous discutons de choix concrets : un bouton d’action doit se distinguer des liens secondaires, et une page d’accueil ne doit pas présenter toutes les informations avec la même importance.
Exercice pratique : réaliser une première maquette de page d’accueil comprenant un titre, une image, une courte présentation et un bouton clairement identifiable.
Module 3 — Organiser et réutiliser les éléments
Garder un fichier lisible
Vous découvrez les calques, les groupes et les noms d’éléments. Une organisation cohérente facilite les modifications, surtout lorsqu’une autre personne reprend le fichier. Vous apprendrez à structurer les écrans et à éviter les calques difficiles à reconnaître, comme « Rectangle 12 » ou « Groupe 4 ».
Créer des composants simples
Un bouton ou une barre de navigation peut être réutilisé sur plusieurs écrans. En créant un composant, vous gagnez du temps et réduisez les différences involontaires entre les pages. Nous verrons également comment modifier un élément réutilisé et vérifier que le résultat reste cohérent dans l’ensemble de la maquette.
Exercice pratique : transformer un bouton en composant, le réutiliser sur plusieurs écrans et organiser les calques avec des noms explicites.
Module 4 — Concevoir un prototype interactif
Relier les écrans
Vous reliez les éléments de l’interface aux écrans correspondants pour simuler un parcours. Un bouton « En savoir plus » peut mener à une page de détail ; un bouton « Retour » peut ramener à l’écran précédent. Vous paramétrez les interactions utiles et lancez la prévisualisation pour tester le parcours comme le ferait une personne utilisatrice.
Vérifier les étapes du parcours
Un prototype sert à repérer les incompréhensions avant de passer au développement. Vous testez les liens, vérifiez que les actions attendues sont possibles et repérez les impasses. Par exemple, après une confirmation de réservation, l’utilisateur doit pouvoir comprendre que son action a réussi et savoir quelle étape suivre.
Exercice pratique : relier trois écrans d’un parcours de réservation, puis tester le prototype et corriger une interaction manquante ou peu claire.
Module 5 — Collaborer, partager et présenter son travail
Faciliter les retours
Vous découvrez les options de partage et les commentaires pour recueillir des retours sur une maquette. Vous apprenez à formuler une demande précise : plutôt que « Qu’en pensez-vous ? », demandez si l’action principale est visible ou si le parcours est facile à comprendre. Les commentaires deviennent ainsi plus utiles pour faire évoluer le projet.
Préparer une présentation claire
Avant de partager un fichier, vous vérifiez son organisation, le nom des pages et le fonctionnement du prototype. Vous préparez une courte présentation qui explique le besoin, les choix effectués et les points à valider. Cette démarche est utile lors d’une réunion avec une équipe, un client ou un partenaire, notamment lorsque toutes les personnes ne connaissent pas Figma.
Exercice pratique : préparer le partage de votre projet, ajouter une question de validation dans un commentaire et présenter le parcours réalisé.
À retenir
Figma permet de passer d’une idée à une maquette testable, puis de travailler sur le même fichier avec d’autres personnes. Une bonne interface repose autant sur des choix visuels simples que sur une organisation claire et un parcours facile à comprendre. À la fin de la formation, vous disposerez d’un mini-projet à poursuivre et d’une méthode réutilisable pour vos prochaines maquettes.
Pour aller plus loin
Après la formation, vous pourrez enrichir votre projet avec de nouveaux écrans, recueillir des retours et améliorer votre prototype. Pour progresser, entraînez-vous à partir d’un besoin concret : simplifier une page existante, préparer le parcours d’une inscription ou imaginer une interface pour un service de votre activité.
