À propos de ce cours
Cette leçon présente Figma, l'outil de référence pour concevoir des interfaces, et son plan Éducation gratuit pour les étudiants. Elle décrit les quatre zones de l'interface (pages et calques, canevas, barre d'outils, propriétés), les outils et raccourcis essentiels, la différence entre cadre, groupe et section, l'auto layout et l'organisation d'un fichier (pages, noms, versions). Trois activités font créer le fichier de CantineCampus et une carte de plat en auto layout.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure (cours et 3 activités) | Débutant, chapitre « Digitaliser le produit avec les outils d'UI » | TP 13 : Concevoir l'architecture de l'information et les parcours d'une application ; un compte Figma (plan Éducation conseillé) | Vous savez vous repérer dans Figma, créer des cadres, utiliser l'auto layout et organiser un fichier propre |
-
Objectifs
- Situer Figma parmi les outils d'UI et obtenir un compte adapté.
- Se repérer dans les quatre zones de l'interface.
- Utiliser les outils et les raccourcis essentiels.
- Distinguer cadre, groupe et section, et utiliser l'auto layout.
- Organiser un fichier : pages, noms, versions.
-
Figma, l'outil de référence
- Figma est un outil de conception d'interfaces qui fonctionne dans le navigateur (et en application de bureau). Plusieurs personnes travaillent en même temps sur le même fichier, comme dans un document partagé.
- Il réunit dans un même fichier la conception des écrans, le prototype interactif, les commentaires et l'espace des développeurs (Dev Mode). FigJam, son tableau blanc, sert aux ateliers.
- Le plan Starter est gratuit mais limité. Les étudiants et les enseignants peuvent demander le plan Éducation, gratuit, qui donne accès aux fonctions du plan Professionnel, Dev Mode compris, après vérification du statut.
- Ce chapitre utilise Figma pour tous les exercices. Les leçons sur Adobe XD et InVision expliquent pourquoi, et ce qu'il faut savoir de ces deux outils.
-
Les quatre zones de l'interface
- Le panneau de gauche: les pages du fichier, l'arbre des calques et les ressources (composants des bibliothèques).
- Le canevas: la surface infinie au centre, où l'on dessine les cadres (les écrans).
- La barre d'outils: en bas du canevas depuis la nouvelle interface de 2024 : déplacer, cadre, formes, plume, texte, commentaire, et l'accès au Dev Mode.
- Le panneau de droite: les propriétés de l'élément sélectionné (onglet Design) et ses interactions (onglet Prototype).
- En haut à droite : le bouton Partager, la présentation du prototype (▶) et le passage au Dev Mode.
-
Les outils et les raccourcis
- Une dizaine de raccourcis suffisent : V déplacer, F cadre, R rectangle, O ellipse, T texte, P plume, C commentaire, Espace (maintenu) pour se déplacer.
- Maj + A ajoute un auto layout, Ctrl + Alt + K (⌘ ⌥ K sur Mac) crée un composant, Ctrl + D duplique.
- Ctrl + / (⌘ / sur Mac) ouvre la recherche des actions : on tape ce qu'on veut faire, sans chercher dans les menus.
- Le zoom : Maj + 1 pour tout voir, Maj + 2 pour zoomer sur la sélection.
-
Cadre, groupe, section
- Un cadre (frame) est un conteneur avec ses propres propriétés : taille, fond, rognage, grille, auto layout. Un écran est un cadre; une carte, un bouton sont aussi des cadres.
- Un groupe rassemble des éléments sans propriétés propres. Il sert à déplacer plusieurs éléments ensemble, mais il structure mal un écran.
- Une section range plusieurs écrans sur le canevas (un parcours, une version) et peut porter un statut, comme « Prêt pour le développement ».
- Les cadres d'écran ont des tailles prédéfinies (par exemple 390 × 844 pour un téléphone, 1 440 × 1 024 pour un ordinateur) et reçoivent une grille de mise en page (leçon sur la grille).
-
L'auto layout
- L'auto layout transforme un cadre en conteneur intelligent : ses éléments s'empilent (verticalement ou horizontalement), avec un espacement et des marges internes fixes.
- Quand un texte s'allonge, le cadre grandit ; quand on supprime un élément, les autres se resserrent. On ne repositionne plus rien à la main.
- Chaque élément choisit son comportement en largeur et en hauteur : s'adapter au contenu (hug), remplir le parent (fill) ou taille fixe (fixed).
- Utilisez des espacements de l'échelle de 8 px (8, 16, 24) : la maquette sera cohérente avec le code.
-
Organiser le fichier
- Des pages claires : Couverture, Design system, Écrans mobile, Écrans ordinateur, Prototype, Archive.
- Des noms pour tout : « 03 · Panier », « Carte / Plat du jour », « Barre d'action », jamais « Frame 284 » ou « Group 7 ».
- Une couverture qui indique le nom du projet, la version, le statut (en cours, en revue, validé) et les auteurs.
- L'historique des versions enregistre tout ; nommez les versions importantes (« v1.0 · validée par le directeur ») pour pouvoir y revenir.
🍽 Exemple : CantineCampus
- Le fichier « CantineCampus · Maquette » a six pages. La page « Écrans mobile » contient une section par parcours : « Commander », « Ajouter de l'argent », « Mon compte ».
- Chaque écran est un cadre de 390 × 844 avec la grille de 4 colonnes du TP 12, et toute la mise en page est en auto layout.
⚠ Piège : dessiner un écran avec des éléments posés « à la main », sans cadres ni auto layout, donne une maquette qui se casse à la première modification de texte.
-
Aide-mémoire
-
Activités
Activité 1Prendre en main Figma · ⏱ 15 min
- Créez votre compte Figma et demandez le plan Éducation (statut étudiant).
- Créez un fichier « CantineCampus · Maquette » avec les six pages recommandées.
- Sur la page de couverture, ajoutez le nom du projet, votre binôme, la date et le statut « En cours ».
📁 Résultat attendu : le lien du fichier (droit de lecture) et une capture de la liste des pages.
Activité 2Une carte en auto layout · ⏱ 20 min
- Créez la carte d'un plat : photo, nom, prix, badge « Végé », bouton « + ».
- Mettez-la en auto layout (horizontal, espacement 12, marges 12), puis le bloc texte en auto layout vertical.
- Changez le nom du plat par un nom très long : la carte doit s'adapter sans rien casser.
📁 Résultat attendu : la carte avant / après le nom long, et l'arbre des calques nommés.
Activité 3Les raccourcis · ⏱ 10 min
- Reproduisez un écran simple (titre, trois cartes, un bouton) en n'utilisant que le clavier pour choisir les outils.
- Notez les cinq raccourcis que vous avez le plus utilisés.
📁 Résultat attendu : l'écran et la liste des raccourcis.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Calques « Frame 284 », « Group 7 » | Rien n'est nommé | Nommer chaque écran et chaque bloc |
| Texte qui déborde de la carte | Pas d'auto layout | Auto layout, largeur « remplir » ou « s'adapter » |
| Écran construit avec des groupes | Mauvais conteneur | Un écran = un cadre ; groupes rarement |
| Tout sur une seule page | Fichier non organisé | Pages : couverture, design system, écrans, prototype |
| Impossible de revenir à la version validée | Versions non nommées | Nommer les versions importantes |
-
Bilan
- Figma réunit conception, prototype, commentaires et Dev Mode, et fonctionne à plusieurs en temps réel.
- L'interface a quatre zones: calques et pages, canevas, barre d'outils, propriétés.
- Un écran est un cadre; les sections rangent, l'auto layout organise.
- Quelques raccourcis font gagner beaucoup de temps.
- Un fichier rangé et nommé se comprend sans son auteur.
Un bon fichier Figma ressemble à une bonne cuisine : chaque chose à sa place, et on y travaille à plusieurs sans se gêner.