Nous voilà dans un fichier de design. C’est ici que vous allez passer l’essentiel de votre temps.
L’interface d’un fichier de design Figma se découpe en cinq zones :
- A – La barre de navigation. Ses onglets donnent accès aux différents espaces du fichier : les calques et les pages, les composants, les plugins et les shaders, les variables et les notifications.
- B – La barre latérale gauche. Elle prolonge la barre de navigation : son contenu change selon l’onglet actif. L’onglet « File », par exemple, affiche vos pages et vos calques.
- C – Le canevas. Votre espace de travail, au centre. C’est là que vivent vos maquettes.
- D – La barre latérale droite. Les propriétés de ce que vous sélectionnez, les réglages de prototypage, et les actions qui concernent le fichier : partage, export.
- E – La barre d’outils. En bas de l’écran, au centre. Elle réunit les outils de création et permet de basculer entre les différents modes du fichier : Design, Draw, Motion et Dev.
Pour savoir en un coup d’œil si vous avez le droit de modifier un fichier, regardez la barre d’outils. Si elle est réduite à quelques icônes et accompagnée d’un bouton « Ask to edit », vous êtes en lecture seule.
Le canevas
Le canevas désigne votre espace de travail. C’est ici que vous allez placer et organiser vos différents éléments graphiques afin de créer des maquettes. Cet espace est immense : savoir s’y déplacer est donc la première chose à maîtriser.
Zoomer et dézoomer
Utilisez le zoom pour voir de plus près une création ou, au contraire, prendre du recul. Le niveau de zoom en cours s’affiche en haut à droite de l’écran. Maintenez CTRL ou CMD et utilisez la molette de votre souris. Sur le pavé tactile, rapprochez deux doigts pour un zoom arrière et éloignez-les pour un zoom avant.
Trois raccourcis utiles à retenir :
Shift + 1 pour voir tout le contenu de la page
Shift + 2 pour zoomer sur la sélection
Shift + 0 pour revenir à 100 %
Se déplacer dans l’espace
Maintenez la barre espace enfoncée, puis cliquez et faites glisser pour vous déplacer sur le canevas. Sur le pavé tactile, faites glisser deux doigts dans n’importe quelle direction pour déplacer la zone de travail.
Vous pouvez également sélectionner l’outil main dans la barre d’outils, ou appuyer sur H . Il ne vous reste plus qu’à cliquer et faire glisser pour vous déplacer, sans risquer de modifier quoi que ce soit.
La barre d’outils
La barre d’outils flotte en bas de l’écran, au centre. C’est votre point central pour interagir avec le canevas et y ajouter des objets : créer des frames, des formes, ajouter une image, du texte. Ces éléments constitueront la base de vos créations.
Elle abrite également l’outil commentaire et le menu d’action, qui regroupe les outils IA, la recherche, les plugins et widgets, ainsi que les commandes courantes de Figma.
Enfin, vous y retrouverez le sélecteur de modes, qui fait basculer le fichier entre Design, Draw, Motion et Dev.
La commande la plus utile de Figma est probablement CTRL ou CMD + /. Elle ouvre la recherche d’actions : tapez ce que vous voulez faire et Figma trouve la commande. La recherche suit la langue de votre interface : si votre Figma est en anglais, formulez votre demande en anglais.
La barre de navigation
C’est la fine colonne verticale, tout à gauche de l’écran. Elle ne contient pas d’outil à proprement parler : chacun de ses onglets change simplement ce que la barre latérale gauche affiche à côté.
- A – Retour à l’accueil. Le logo Figma vous ramène à votre tableau de bord.
- B – Menu Figma. Les réglages de l’application et les actions générales du fichier.
- C – Onglet « File » (Fichier). Vos pages et vos calques, autrement dit la structure de votre document.
- D – Onglet « Agents ». L’agent IA de Figma : générer des écrans, créer des plugins, déléguer les tâches répétitives.
- E – Onglet « Assets ». Les composants de votre fichier, mais aussi ceux qui proviennent de kits ou de bibliothèques externes.
- F – Onglet « Tools » (Outils). Les plugins, widgets et shaders qui étendent les capacités de Figma.
- G – Onglet « Variables ». Les variables stockent des valeurs réutilisables, couleurs ou espacements par exemple, que vous appliquez ensuite à vos éléments de design.
- H – Notifications. Les alertes propres au fichier : mises à jour de bibliothèques, polices manquantes.
La barre latérale gauche
La barre latérale gauche prolonge la barre de navigation : son contenu dépend entièrement de l’onglet que vous avez sélectionné.
Sélectionnez l’onglet « File », par exemple, et vous y trouverez le menu du fichier, vos pages et vos calques (Layers).
- A – Menu du fichier. Les actions propres au fichier : le renommer, consulter l’historique des versions, le déplacer, l’exporter.
- B – Recherche. Parcourez l’ensemble du fichier d’un coup pour y retrouver un texte, une image, un cadre ou un composant.
- C – Réduire l’interface. Masque la barre de navigation et la barre latérale gauche, pour travailler sur un canevas dégagé.
- D – Ajouter une page (« Add new page »).
- E – Liste des pages. Toutes les pages du fichier, dans l’ordre où vous les avez rangées.
- F – « Layers » (Calques). Tous les éléments présents sur la page en cours.
Les pages
Les pages vous permettent d’organiser votre fichier en séparant, par exemple, les différentes étapes du projet. Chaque page dispose de son propre canevas.
Voici les pages que je crée habituellement dans le cadre d’un projet de webdesign :
- 📱 UI Mobile
- 🖥️ UI Desktop
- 🔬 Tests home
- 📰 Wireframes
- 🌈 Assets
- 📦 Archives
Un fichier Figma crée par mes soins contenant tous les essentiels (pages, grilles, icônes…) pour démarrer sereinement un projet.
Renommer une page
Par défaut, tout nouveau fichier contient une seule page, appelée « Page 1 ». Double-cliquez sur son nom pour qu’il passe en surbrillance bleue. Renommez-la « Par ici » et appuyez sur Entrée, ou cliquez en dehors, pour valider.
Ajouter une page
Maintenant que nous savons renommer nos pages, ajoutons-en une nouvelle. Cliquez sur le bouton + (« Add new page ») en haut à droite de la section Pages. Renommez la nouvelle page « Non, c’est par là ».
Réorganiser les pages
C’est très simple : cliquez sur le nom de la page, maintenez le bouton enfoncé et faites glisser vers le haut ou vers le bas. Une barre noire vous indique où la page va se positionner. Relâchez, et c’est fait.
Vous pouvez aussi créer un séparateur entre vos groupes de pages : ajoutez une page et renommez-la « — ».
Supprimer ou dupliquer une page
Faites un clic droit sur la page concernée, puis sélectionnez l’action souhaitée dans le menu qui s’ouvre.
Partager une page précise
Toujours par un clic droit sur son nom, choisissez « Copy link to page ». La personne qui ouvrira ce lien arrivera directement sur la bonne page.
Les calques
Chaque élément que vous ajoutez à votre fichier, qu’il s’agisse de texte, d’une forme ou d’une image, est un calque (layer). Vous en voyez la liste complète dans la barre latérale gauche, onglet « File ».
Cela vous permet d’avoir une meilleure vue d’ensemble de vos éléments graphiques et de modifier les propriétés de chacun individuellement. Pour en savoir plus, rendez-vous à l’épisode consacré aux calques.
La barre latérale droite
C’est le panneau des propriétés. Son contenu change en fonction de ce que vous avez sélectionné.
En haut de la barre latérale droite se trouvent les outils pour partager vos créations et collaborer en temps réel. Vous y voyez les avatars des personnes présentes dans le fichier, et vous pouvez lancer un appel audio, partager le fichier, ou encore cliquer sur le bouton de présentation pour lancer votre prototype en plein écran.
L’onglet Design
Il donne accès à l’ensemble des propriétés de votre design. Lorsqu’un calque est sélectionné, vous pouvez y modifier sa position, ses dimensions, ses couleurs, sa typographie, ses effets.
Quand rien n’est sélectionné, ce panneau affiche à la place les réglages du fichier : couleur du canevas, styles locaux et variables locales.
L’onglet Prototype
Il vous permet d’activer toutes les fonctions liées au prototypage : création d’interactions, de transitions et de flux utilisateurs.
Raccourcis clavier
N’hésitez pas à apprendre quelques raccourcis clavier pour gagner en rapidité. Le raccourci CTRL ou CMD + Shift + ? ouvre la liste complète ; vous la retrouverez aussi dans le menu d’aide, via l’icône « ? » en bas à droite du fichier. Le panneau qui s’ouvre est interactif : les raccourcis que vous utilisez s’y colorent au fur et à mesure, vous pourrez ainsi repérer ceux que vous n’exploitez pas encore.
En résumé
- Le fichier de design se compose de cinq zones : la barre de navigation, la barre latérale gauche, le canevas, la barre latérale droite et la barre d’outils
- La barre de navigation et le panneau gauche gèrent la structure : pages, calques
- Le panneau droit gère les propriétés de ce que vous sélectionnez
- CTRL ou CMD + / est votre meilleur allié quand vous cherchez une fonction
Le tour est fait, nous allons pouvoir commencer à designer. Et cela commence par la brique de base de tout ce que vous créerez dans Figma : le calque.