Utilisation des fichiers de design
Dans ce guide, nous aborderons les bases du travail avec des fichiers de design dans Figma Design.
Si vous êtes nouveau sur Figma Design, nous vous recommandons de suivre notre cours Figma Design pour débutants. Dans ce cours, nous couvrons tout, de la navigation dans les fichiers de design, au travail avec les calques, à l'application de l’auto layout aux frames, à la création de composants et à l’ajout de connexions de prototype aux conceptions. À la fin, vous aurez créé un site Web de portfolio personnalisable entièrement depuis le début. Apprenez-en davantage sur le cours Figma Design pour débutants.
Vous souhaitez connaître la différence entre les produits Figma ? Consultez notre guide En quoi consiste 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 sont divisés en quatre zones distinctes : une barre d'outils en bas, une barre latérale gauche, une barre latérale droite et le plan de travail.
Barre d'outils
La barre d'outils vous permet d'interagir avec le plan de travail et d'y ajouter des objets. Elle abrite tous les outils pour sélectionner des objets, se déplacer sur le plan de travail et créer des frames, des formes, du texte et d'autres calques ↓. Il s'agit des éléments constitutifs de vos designs.
Vous souhaitez aller plus loin ? Explorez tous les outils de la barre d'outils →
Barre latérale gauche
La barre latérale gauche vous donne accès aux calques, aux pages, aux ressources et vous permet d'agir sur vos fichiers.
- Utilisez le panneau des ressources pour voir les composants locaux ou rechercher des composants à partir de kits ou de Librairies (nécessite un accès en édition).
- Déplacez un fichier, publiez une bibliothèque, créez une branche ou affichez l'historique des versions.
- 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.
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.
La barre latérale droite est également l'endroit où vous trouverez des outils pour partager vos conceptions et collaborer en temps réel. Par exemple, vous pouvez partager le fichier, voir qui d'autre est ici, discuter par audio, et bien plus encore.
Si nécessaire, vous pouvez également régler vos options de zoom et de voir personnelles. Les modifications que vous apportez ici s’appliquent uniquement à votre voir.
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.
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 →
Plan de travail
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 : Maintenez la touche Espace enfoncée, puis cliquez et faites glisser pour vous déplacer sur le plan de travail.
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 enfoncé ⌘ Command/Ctrl et faites défiler 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.
On dit souvent qu'un grand pouvoir implique de grandes responsabilités, mais pas nécessairement ! Sélectionnez l'outil main dans la barre d'outils ou appuyez sur la touche H de votre clavier. Vous pouvez désormais cliquer, faire glisser et zoomer sur un fichier sans craindre d'y apporter des 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 sur le plan de travail pour créer vos designs.
La barre latérale gauche vous permet d'explorer et d'organiser votre fichier. La barre latérale droite permet d'afficher les propriétés des calques.
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 plan de travail. 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 | Shortcut |
|
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 automatique |
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.
En savoir plus sur les éléments parents, enfants et de même niveau →
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 a des préréglages de frame pour les ressources, les appareils et les tailles d’écran courants. Que vous conceviez une application mobile ou une publication Instagram, Explorez les préréglages de frame →
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 d'un calque incluent des informations de base sur le calque (comme ses dimensions et son emplacement sur le plan de travail) et sur son style (comme sa couleur, les propriétés du texte ou les effets tels que les 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 si vous pouvez apporter des modifications aux fichiers. Nous n'allons pas évoquer ici en détail le modèle d'autorisations de Figma, mais vous devez connaître la différence entre les autorisations can edit et can view.
- Les personnes avec un accès
can editont le droit d'apporter des modifications à un fichier. Cela englobe le déplacement des calques, la modification des propriétés et la gestion du fichier lui-même. - Les personnes avec un accès
can viewont le droit d'explorer les pages et les prototypes, mais elles ne peuvent apporter aucune modification. Elles peuvent néanmoins contribuer en soumettant des commentaires.
Découvrez les actions dont vous disposez avec l'accès can view
- 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 vous voyez l'option Ask to edit et seulement quelques outils, vous pouvez uniquement lire le fichier.
Besoin d'un accès éditeur ? Cliquez sur le bouton pour demander l’accès à un fichier depuis la barre d’outils. Si vous ne voyez pas cette option, cela signifie que votre accès a été restreint par un administrateur d'équipe ou d'organisation. Si vous êtes sur le forfait Professionnel, veuillez contacter votre administrateur d'équipe. Si vous êtes sur le forfait Organisation ou Forfait Entreprise, demandez une mise à niveau vers une licence payante.
Prêt(e) à commencer votre création ?
Ces projets rapides pour débutants sont parfaits pour commencer votre parcours d'apprentissage :