Utilisation des fichiers de design
Ce guide explique comment utiliser les fichiers de design Figma. Vous pouvez le consulter à tout moment.
Pour faire simple (et réduire le nombre de mots 😉), nous les appellerons fichiers de design dans ce guide.
Quelle est la différence entre les fichiers de design et les fichiers FigJam ? Pour le savoir, consultez notre guide Qu'est-ce que Figma ?.
Que sont les fichiers de design ?
Les fichiers de design fournissent les outils dont vous avez besoin pour créer, partager et tester vos designs. Ils sont utilisés par les designers, les chefs de produit, les rédacteurs et les développeurs, mais sont accessibles à toute personne cherchant à créer ou à communiquer visuellement !
Créez des fichiers de design pour résoudre des problèmes spécifiques ou gérer le processus de design dans son intégralité. Vous pouvez esquisser vos idées de votre côté ou les partager avec d'autres personnes pour créer ensemble et obtenir du feedback.
Les fichiers Figma sont actifs et toujours à jour. Plusieurs utilisateurs peuvent travailler sur le même fichier simultanément. Le fait de disposer d'un fichier actif permet à l'ensemble des utilisateurs d'afficher la même page sans avoir besoin d'enregistrer, de télécharger ni d'avancer ou de reculer sur le document.
Chaque fichier dispose de son propre historique des versions, qui vous permet de suivre l'évolution de vos designs. Explorez les précédentes itérations ou créez de nouvelles versions pour conserver une trace des grandes étapes.
Fichiers de design dans le navigateur de fichiers
Les fichiers de design Figma s'accompagnent de l'icône sur la carte du fichier, dans le navigateur de fichiers.
Familiarisation
Si vous n'avez jamais utilisé Figma, il est tout à fait normal que vous vous sentiez un peu perdu(e) lorsque vous ouvrez un fichier pour la première fois. Nous vous guidons pas à pas pour que vous puissiez vous repérer et commencer à collaborer avec votre équipe.
Les fichiers de design présentent quatre régions distinctes : une barre d'outils, une barre latérale gauche, une barre latérale droite et le canevas. Nous avons simplifié la mise en page pour vous présenter les éléments actifs de chaque région.
Barre d'outils
La barre d'outils propose une sélection d'actions et d'outils importants, répartis en quatre groupes : outils, actions, collaboration et options d'affichage.
Outils
Passez d'un outil à l'autre pour explorer le fichier, sélectionner et déplacer des calques ou les redimensionner .
Trouvez des outils pour créer des cadres, des formes, du texte et d'autres calques ↓, qui seront les éléments constitutifs de vos designs.
Utilisez le menu pour accéder à d'autres fonctions, actions et paramètres ou ajustez vos préférences, comme le mode sombre ou les options de défilement.
Actions
Accédez aux actions niveau fichier, comme les bibliothèques et l'historique des versions.
Vous pouvez également sélectionner des calques et accéder aux fonctions de combinaison, comme l'application de masques, la création de composants ou la modification des formes.
Collaboration
Trouvez des outils pour partager vos designs et collaborer en temps réel. Partagez le fichier, découvrez qui l'utilise simultanément, discutez via la fonctionaudio et bien plus encore.
Options d'affichage
Affichez les prototypes ou ajustez votre zoom personnel et vos options d'affichage. Les modifications que vous apportez ici ne s'appliquent qu'à votre vue.
Barre latérale gauche
La barre latérale gauche vous donne accès aux calques, aux pages et aux ressources. Affichez une liste des pages dans le fichier, sélectionnez une page à afficher, puis explorez les calques du canevas.
Utilisez le panneau des ressources pour afficher les composants locaux ou trouvez des composants à partir des bibliothèques (nécessite un accès éditeur).
Barre latérale droite
La barre latérale droite vous donne accès à davantage d'informations sur vos designs. Si rien n'est sélectionné, vous pouvez afficher les ressources locales comme la couleur ou le style de texte.
Lorsqu'un calque est sélectionné, vous pouvez explorer les propriétés de votre sélection actuelle. Vos autorisations déterminent les options auxquelles vous avez accès dans la barre latérale et les actions que vous pouvez exécuter.
Accès en lecture seule
- Commentaires : permet d'afficher et de rechercher des commentaires.
- Propriétés : permet d'afficher les propriétés de votre sélection.
- Exporter : permet d'exporter les ressources depuis le fichier.
Accès éditeur
- Design : permet d'afficher et de modifier les propriétés de design des calques.
- Prototype : permet d'afficher et de modifier les interactions, les flux et les paramètres des prototypes.
Explorer la barre latérale droite →
Inspection des designs avec le Dev Mode
Visualisez-vous le fichier dans le cadre du processus de transfert ? Le Dev Mode est une interface dédiée aux développeurs qui permet d'examiner des designs et de les parcourir.
Grâce à cette interface, vous pouvez identifier les designs prêts pour le développement et accéder aux informations nécessaires pour transformer les designs en code. Guide d'utilisation du Dev Mode →
Canevas
Le canevas désigne l'espace de travail dans lequel vous disposez des calques pour créer vos designs. Vous y trouverez beaucoup de place pour explorer et itérer vos idées.
Fonction panoramique pour obtenir une vue d'ensemble
Effectuez un panoramique pour vous déplacer dans le fichier et découvrir les autres éléments du canevas.
Souris : [icône du clic gauche] maintenez la barre Espace enfoncée, puis cliquez et faites glisser l'écran pour vous déplacer dans le canevas.
Pavé tactile : [icône de glissement des doigts] avec deux doigts, faites glisser l'écran dans n'importe quelle direction pour obtenir une vue panoramique du canevas. Figma utilise les paramètres de sens de défilement par défaut de votre ordinateur.
Zoom avant et zoom arrière
Effectuez un zoom avant pour voir un élément de plus près et un zoom arrière pour obtenir une vue d'ensemble. Affichez le niveau de zoom actuel en haut à droite de l'écran.
Souris : maintenez les touches ⌘ Commande/Ctrl et Espace enfoncées, puis faites défiler l'écran vers le bas pour effectuer un zoom avant et vers le haut pour effectuer un zoom arrière.
Pavé tactile : rapprochez deux doigts pour effectuer un zoom arrière et écartez-les pour effectuer un zoom avant.
Explorez en toute sérénité
Si c'est la toute première fois que vous explorez un fichier ou y accédez, vous pouvez vous sentir inquiet à l'idée d'interagir avec les éléments du canevas. Les utilisateurs craignent souvent de déplacer, modifier ou supprimer un élément involontairement.
Nul besoin d'avoir de grandes responsabilités pour bien faire. Sélectionnez l'[outil main] dans la barre d'outils ou appuyez sur H sur votre clavier. Vous pouvez désormais cliquer, faire glisser et zoomer sur un fichier sans craindre les modifications involontaires.
Pour résumer
Et maintenant, un petit récapitulatif s'impose ! La barre d'outils fournit les outils et les fonctions dont vous avez besoin pour créer et combiner des calques. Vous pouvez ensuite les organiser dans le canevas pour créer vos designs.
La barre latérale gauche vous permet d'explorer et d'organiser vos calques. La barre latérale droite permet quant à elle d'afficher leurs propriétés.
Approfondissons maintenant deux concepts fondamentaux : les pages et les calques.
Pages
Les pages vous aident à organiser vos fichiers de design. Chaque page dispose de son propre canevas, qui vous offre encore plus d'espace pour créer et explorer vos idées. On utilise les pages pour :
- gérer les designs par étape ou par statut ;
- organiser les composants ;
- conserver une ébauche des idées ;
- archiver d'anciens designs.
Pour parcourir les pages d'un fichier, cliquez sur le nom de la page en cours dans la barre latérale gauche. Touchez pour créer une nouvelle page. Visualiser les pages dans la barre latérale →
Les pages sont idéales pour partager une collection spécifique de designs. Vous pouvez par exemple créer une page distincte à des fins de vérification ou si des designs sont prêts pour le développement.
Pour partager une page, cliquez avec le bouton droit de la souris, puis cliquez sur Copy link to page. Lorsqu'un utilisateur clique sur ce lien, il accède directement à la bonne page.
Calques
Les designs sont généralement créés à partir d'une combinaison de formes, textes et autres éléments.
Lorsque vous ajoutez des objets au canevas, Figma les traite comme des calques distincts pour vous offrir la possibilité de modifier les propriétés de chacun.
Ce design destiné à une publication sur les réseaux sociaux inclut un nom, une photo de profil, une image et une légende.
Nul besoin d'être un as en géométrie pour utiliser Figma, mais sachez tout de même que nous utilisons trois dimensions sur le canevas.
L'axe X (horizontal) et l'axe Y (vertical) fournissent les coordonnées d'un calque sur le canevas. La troisième dimension, l'index Z, indique la profondeur du calque ou son ordre d'apparition.
Affichage des calques dans le panneau des calques
Les calques peuvent être placés au-dessus, derrière, à côté ou à l'intérieur d'autres calques. Pour voir comment ils sont organisés, accédez au panneau des calques sur la barre latérale gauche.
Types de calques
Chaque calque a un nom et une icône propres à son type. Vous avez peut-être remarqué ces icônes dans la barre d'outils. Vous pouvez sélectionner cet outil dans la barre d'outils ou utiliser le raccourci clavier pour créer plus de calques de ce type.
| Icône du calque | Nom du calque | Raccourci |
|
Cadre |
F |
|
|
Groupe |
⌘ Commande G |
|
|
Composant |
⌥ Option ⌘ Commande K ou Ctrl + Alt + K |
|
|
Instance |
N/A |
|
|
Texte |
T |
|
|
Forme |
R |
|
|
Image |
⇧ Maj ⌘ Commande k ou Maj Ctrl k |
|
|
Mise en page auto |
Maj A |
|
|
Section |
Maj S |
|
|
GIF ou vidéo |
⇧ Maj ⌘ Commande k ou Maj Ctrl k |
Ordre des calques et hiérarchie
L'ordre dans lequel les calques apparaissent sur le panneau des calques est également important, car il détermine comment ils se superposent dans le canevas.
Ce menu présente un arrière-plan rectangulaire. Comme il se trouve en dessous des autres calques dans le panneau des calques, il apparaît au-dessus de ces calques dans le canevas. S'il s'était trouvé au-dessus des autres calques dans le panneau des calques, nous n'aurions pas pu voir les calques de texte ou d'icônes.
Calques en tant que contenants
Nous avons indiqué que les calques pouvaient se trouver à l'intérieurd'autres calques. Pour savoir si un calque contient d'autres calques, regardez s'il est accompagné d'une flèche dans le panneau des calques. Cliquez sur la flèche pour afficher les calques contenus dans le calque en question.
Relations entre les calques
Nous utilisons les termes « parent » et « enfant » pour décrire les relations entre les contenants et les calques qu'ils contiennent.
- Les calques parents contiennent d'autres calques, par exemple des cadres, des composants et des groupes.
- Les calques enfants se trouvent à l'intérieur d'un calque parent. Il peut s'agir de calques individuels comme une forme, du texte ou des contenants avec leurs propres calques enfants.
Utilisation des contenants
Les groupes, les cadres et les sections fonctionnent en tant que contenants. Même s'ils semblent similaires, ils présentent des avantages spécifiques.
Groupes
Les groupes permettent de combiner des calques dans un élément unique. Ils simplifient le panneau des calques et fournissent un objet unique avec lequel vous pouvez interagir sur le canevas. Par exemple, une collection de formes que vous ne souhaitez pas séparer.
Les groupes sont des collections de calques et d'éléments non distincts. Ils n'ont ni dimensions, ni propriétés. Lorsque vous modifiez un groupe, vous appliquez en réalité les changements à chaque calque du groupe.
Cadres
Les cadres permettent également de combiner des calques dans Figma. Ils peuvent faire office d'échafaudage pour une taille d'appareil et d'écran spécifique, comme une page unique dans un design d'application. Ils peuvent également contenir des calques destinés à des éléments distincts, comme les calques d'une barre de navigation. Vous pouvez même placer des cadres à l'intérieur d'autres cadres.
Contrairement aux groupes, les cadres peuvent avoir leurs propres dimensions et propriétés, comme des remplissages, des angles arrondis et des ombres. Ils peuvent également présenter des fonctionnalités comme la disposition automatique, les contraintes et les grilles de mise en page, qui vous permettent de contrôler ou d'influencer les calques qu'ils contiennent.
Préréglages des cadres
Figma propose des préréglages de cadres pour les ressources, les appareils et les tailles d'écran courants, que vous développiez une application mobile ou une publication Instagram. Explorer les préréglages des cadres →
Sections
L'outil section vous permet de désigner et d'étiqueter une région spécifique du canevas. Vous pouvez utiliser les sections pour regrouper des concepts et des idées associés ou organiser vos designs.
Les sections permettent d'attirer l'attention, de fournir du contexte et de guider les collaborateurs dans les processus. Elles sont idéales pour les activités telles que les vérifications ou le partage de designs en vue du transfert.
Consultez nos meilleures pratiques pour en savoir plus sur l'utilisation des groupes et des cadres.
Propriétés des calques
Lorsque vous survolez un calque ou un objet dans le canevas, une zone apparaît autour de l'élément. Cliquez sur le calque pour le sélectionner et afficher plus d'informations sur ses propriétés.
Dans la barre latérale gauche, vous pouvez afficher le nom du calque et son organisation. Dans la barre latérale droite, vous pouvez afficher ses propriétés.
Les propriétés incluent les informations de base sur le calque, comme ses dimensions et sa position sur le canevas, ainsi que tout effet de style, tel que la couleur, les propriétés du texte ou les effets de type ombres.
Les propriétés qui s'affichent dépendent du type de calque sélectionné. Si un calque utilise un style, seuls le nom du style et l'icône associée seront visibles dans la barre latérale droite.
Prise en charge sur :
Prise en charge sur :
Cadres Groupes Composants Instances Texte Formes Images Mise en page auto Sections GIF
Prise en charge sur :
Composants Instances Mise en page auto
Prise en charge sur :
Cadres Groupes Composants Instances Texte Formes Images Mise en page auto Sections GIF
Prise en charge sur :
Cadres Groupes Composants Instances Texte Formes Images Mise en page auto Sections GIF
Prise en charge sur :
Cadres Groupes Composants Instances Mise en page auto Sections
Prise en charge sur :
Cadres Groupes Composants Instances Texte Formes Images Mise en page auto Sections GIF
Prise en charge sur :
Cadres Groupes Composants Instances Texte Formes Images Mise en page auto Sections GIF
Prise en charge sur :
Cadres Groupes Composants Instances Texte Formes Images Mise en page auto Sections GIF
Vous ne parvenez pas à modifier les propriétés ?
Si vous cliquez sur un calque sans parvenir à modifier ses propriétés, cela signifie que vous bénéficiez d'un accès en lecture seule. Vous pouvez utiliser le panneau des propriétés pour afficher les propriétés du calque, mais vous ne pouvez apporter aucune modification.
Si vous visualisez le fichier dans le cadre du processus de transfert, alors le Dev Mode est pour vous. Cette interface dédiée aux développeurs permet d'examiner des designs et de les parcourir. Guide d'utilisation du Dev Mode →
Autorisations associées aux fichiers de design
Vos autorisations déterminent les actions que vous pouvez exécuter et les modifications que vous pouvez apporter aux fichiers. Nous n'allons pas évoquer en détail le modèle d'autorisations de Figma ici, mais vous devez connaître la différence entre un éditeur et un spectateur.
- Les éditeurs peuvent modifier un fichier. Cela englobe le déplacement des calques, la mise à jour des propriétés et la gestion du fichier lui-même.
- Les spectateurs peuvent explorer les pages et les prototypes, mais ne peuvent y apporter aucune modification. Ils peuvent néanmoins contribuer en soumettant des commentaires.
Explorer les actions accessibles aux spectateurs
- Ouvrir et afficher des fichiers de design
- Mesurer les distances entre les calques dans les fichiers de design
- Sélectionner les calques dans la barre latérale gauche ou sur le canevas
- Utiliser le panneau d'inspection pour afficher les propriétés du calque
- Rejoindre les appels audio (avec sous-titres)
- Ajouter des commentaires, y répondre ou les résoudre
- Afficher l'historique des versions d'un fichier, puis dupliquer ou partager des liens d'accès à des versions spécifiques
- Afficher et interagir avec les prototypes et les présentations
- Afficher les flux et les connexions de prototypes
- Copier ou exporter des cadres, des composants et des calques
Comment vérifier vos autorisations
Le moyen le plus rapide de déterminer si vous pouvez modifier un fichier est de consulter la barre d'outils. Si elle s'affiche dans son intégralité, avec l'ensemble des outils et des actions de création, cela signifie que vous êtes habilité(e) à modifier le fichier.
Si View only s'affiche en regard du nom du fichier ou si quelques outils seulement sont présents, vous pouvez uniquement visualiser le fichier.
Besoin d'un accès éditeur ?
Vous pouvez demander à accéder à un fichier depuis la barre d'outils. Cliquez sur le bouton Ask to edit en regard du nom du fichier.
Si vous ne voyez pas cette option, cela signifie que votre accès a été restreint par une équipe ou l'administration de votre entreprise. Si vous disposez du forfait Professionnel, contactez l'administration de votre équipe. Si vous disposez du forfait Organisation ou Entreprise, demandez une mise à niveau éditeur.
Prêt(e) à commencer votre création ?
Ces projets rapides pour débutants sont parfaits pour commencer votre parcours d'apprentissage :