Nous faisons le point sur les principales fonctionnalités des Pages Figma. Comment organiser vos pages, en créer de nouvelles, en supprimer, etc. pour structurer vos maquettes web et projets Figma. Voici une vue d'ensemble des pages dans Figma.
Pour créer votre maquette web sur Figma vous utiliserez les pages. Une page Figma est l'espace de design ou vous pourrez intégrer vos Frame, vos Groups et vos Layers.
Les pages ne sont pas infinies, et ont une taille limite de -65 000 à +65 000 en abscisse et en ordonné.
Dans cet article nous faisons le tour des différentes fonctionnalités des pages dans Figma, pour vous aider à mieux organiser vos futurs projets web.
Comment organiser ses pages dans Figma ?
D'un point de vue organisationnel, Figma vous permet de créer plusieurs pages au sein d'un même fichier, pour mieux structurer vos projets de webdesign. Vous pourrez également renommer vos pages, pour les identifier en fonction des étapes du projet, ou des éléments qu'elles contiennent.
Par exemple, vous pourrez créer des pages distinctes pour :
- Séparer différentes phases de votre projet de webdesign : brainstorming, maquette UX, maquette UI, etc.
- Identifier les différents composants et styles de votre projet. Vous pourrez ainsi créer votre style guide sur une page distincte pour y regrouper vos icones, couleurs, typographies, images, composants, etc.
- Tester vos flux utilisateurs, l'UX de votre maquette web. Vous pourrez créer différentes maquettes web UX et les tester dans des pages distinctes. Cela vous permettra d'utiliser le mode "prévisualisation" pour chacune de vos maquettes web.
- Gardez un historique de vos maquettes. Votre projet de maquettage sera souvent amené à évoluer, en fonction des retours clients, en fonction des A/B test, etc. Quand vous challengerez votre interface, plutôt que de supprimer votre travail ou le caller dans un coin de la page, intégrez le dans une page "Historique" / "Data" / "Old" (bref le nom qui vous parle le plus) pour pouvoir venir y récupérer des éléments si besoin.
Comment afficher vos pages dans Figma ?
Les pages sont accessibles lorsque vous êtes dans un fichier Figma. Vous pourrez voir toutes les pages de votre fichier depuis la slidebar située sur la gauche de votre écran.
- Ouvrez la liste de vos pages en cliquant sur la flèche déroulante en haut de le slidebar
- Cliquez sur la page que vous souhaitez afficher.
Comment créer une nouvelle page ?
Lorsque vous avez accédé à vos pages Figma depuis la slidebar de gauche, vous pourrez facilement en ajouter de nouvelles :
- Cliquez en haut à droite sur l'icone "+".
- Une fois la nouvelle page ajoutée, pensez à la renommer.
Votre nombre de page sera limité à 3 pages avec la version Starter de Figma, mais vous pourrez en ajoutant que vous voulez avec les versions Professionnel, Etudiant, Entreprise.
Comment dupliquer une page ?
Dupliquer une page Figma peut être très utile par exemple pour proposer plusieurs versions de votre maquette web, que ce soit au niveau de l'UX et de l'UI. Depuis la slidebar de gauche de votre fichier Figma :
- Faites un clic droit sur la page que vous souhaitez dupliquer
- Cliquez sur "Duplicate". Figma créé une copie de votre page en ajoutant un numéro au nom de la page copiée. Par exemple si vous copiez "Maquette", la copie sera "Maquette 2", puis "Maquette 3", etc.
- Renommez votre nouvelle page
Comment renommer une page ?
Renommer vos pages est un moyen de structurer votre fichier Figma. Que vous soyez seul designer ou à plusieurs, vous retrouvez facilement les éléments de votre fichier en identifiant chacune des pages. Le développeur web aussi pourra mieux s'y retrouver.
Méthode 1
- Faites un clic droit sur la page que vous souhaitez renommer
- Renommez votre page Figma
- Cliquez n'importe ou sur la page
Méthode 2
- Double cliquez sur le nom de la page que vous souhaitez renommer
- Renommez votre page Figma
- Cliquez n'importe ou sur la page
Comment supprimer une page ?
Pour supprimer une page Figma, rendez-vous sur votre page au niveau de la slidebar de gauche :
- Faites un clique droit sur la page à supprimer
- Cliquez sur "Delete"
Comment organiser vos pages ?
Il se peut que l'ordre dans lequel vous avez créé vos pages Figma ne soit pas l'ordre logique du fichier. Vous pourrez pour cela réorganiser vos pages par simple glisser / déposer depuis la slide bar de gauche :
- Choisissez la page à déplacer
- Maintenez un clic gauche sur la page
- Déplacez la page de haut en bas pour réorganiser le fichier
- Lâchez le clic
Comment déplacer un design d'une page à un autre ?
Dans Figma il est possible de déplacer certains éléments comme vos Frame d'une page à l'autre sans avoir à faire de copier / coller ou couper / coller. Vous serez ainsi sûr de prendre l'ensemble des éléments du frame et de préserver sa structure.
- Sélectionnez le Frame à déplacer
- Faite un clic droit et cliquez sur "Move to page"
- Sélectionnez la page ou vous souhaitez déplacer le frame
