Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible sur tous les forfaits

Toute personne disposant d'un accès de type peut éditer peut mettre à jour les propriétés des contours

Les contours sont une Collection de propriétés que vous pouvez appliquer aux calques dans les fichiers de design. Les contours sont la représentation visuelle d'un chemin vectoriel. Utilisez les propriétés des contours pour :

• Ajouter des contours autour des formes, des réseaux vectoriels ou des opérations booléennes
• Créer des lignes et des flèches
• Ajouter des contours aux images.
• Ajouter des contours aux côtés individuels des calques rectangulaires, comme les rectangles, cadres et composants

Vous pouvez contrôler l'apparence d'un contour grâce aux propriétés de couleur, d'épaisseur, de distribution, de côté et de point final.

Propriétés des contours

La section Contour de la barre latérale droite permet d'afficher et d'ajuster les propriétés des contours.

Peintures

La peinture est la propriété principale que vous utiliserez pour définir le tracé. Vous pouvez appliquer plusieurs couleurs de peinture à un tracé. Cela comprend les peintures en dégradé et d'image. Les peintures doivent avoir les mêmes propriétés d'épaisseur, de position et de style.

1. Utilisez le sélecteur de couleurs pour choisir un type de peinture, une valeur et une opacité.
2. Cliquez sur pour ajouter une autre couleur à la sélection en cours.
3. Sélectionnez ou pour activer ou désactiver la visibilité de chaque peinture.
4. Sélectionnez pour ouvrir le sélecteur de style. À partir de là, vous pouvez appliquer un style de couleur ou créer un nouveau style à partir de la sélection en cours.
5. Sélectionnez pour supprimer le contour du calque sélectionné.

Position

Figma vous permet de définir où appliquer le contour sur le tracé du calque. Choisissez parmi Intérieur, Extérieur ou Centré. L'option par défaut pour la plupart des calques de forme est Intérieur, sauf pour les lignes qui sont définies au centre.

Le format SVG ne prend en charge que le contour centré. C'est un élément à prendre en compte si vous prévoyez d'exporter le calque au format SVG.

Lorsque vous exportez un calque avec un tracé intérieur ou extérieur au format SVG, Figma « simplifiera » le tracé. Le tracé intérieur ou extérieur aura l'apparence d'un tracé central. Cela n'affectera pas l'apparence de l'objet exporté, mais influencera la complexité du code SVG.

En savoir plus sur Simplifier le contour →

Épaisseur

Utilisez le champ pour sélectionner l'épaisseur du tracé, en pixels. Saisissez une valeur, ou placez le focus sur le champ et faites défiler les valeurs à l'aide de votre souris ou de votre pavé tactile.

Contours individuels

Par défaut, Figma applique les propriétés du contour à tous les côtés d’un calque. Si votre calque est un rectangle, un cadre ou un composant/instance, vous aurez également une propriété Stroke per side.

Utilisez la propriété Contour par côté pour choisir le ou les côté(s) où appliquer le contour.

• Tous (par défaut)
• Haut
• Bas
• Gauche
• Droite
• Personnalisé : pour choisir sur quels côtés appliquer le contour. Custom (personnalisé) vous permet également de définir une épaisseur de contour différente par côté.

Tracés personnalisés par côté

Lorsque vous sélectionnez Personnalisé, vous verrez quatre champs individuels dans la section Contours. Utilisez les champs pour ajuster l'épaisseur de chaque côté de manière indépendante. Pour supprimer le tracé d’un côté, réglez l'épaisseur sur 0.

Vous pouvez utiliser des contours individuels pour créer des éléments de design et des motifs courants :

• Appliquer un seul tracé en haut ou en bas d'une ligne dans un tableau
• Afficher une ligne horizontale sous un en-tête de section ou un séparateur
• Appliquer une bordure à seulement trois côtés d’un élément
• Ajouter un bloc de couleur sur le côté gauche d'une carte ou d'un élément de tâche.

Points de terminaison

Ajouter des effets de style aux extrémités de tous les tracés ouverts. La propriété du point d'extrémité apparaîtra à deux endroits différents, selon le chemin vectoriel que vous avez sélectionné.

Seulement deux points d'extrémité

Si le calque est un tracé vectoriel ouvert, vous pouvez définir les points d'extrémité au début et à la fin du tracé vectoriel dans la section principale Contours. Par exemple : des formes de lignes et de flèches.

Utilisez les deux champs pour définir le style de capuchon ou de pointe ↓ pour les extrémités de début (gauche) et de fin (droite).

Plus de deux extrémités

Si vous avez un chemin ou une forme vectorielle fermée, ou un chemin ouvert avec plus de deux points d'extrémité, vous trouverez les paramètres des points d'extrémité dans le Menu avancé des contours.

Si vous avez sélectionné l'intégralité du calque, vous pouvez utiliser la propriété End points (Points de terminaison) pour appliquer le même style de pointe ou de capuchon à tous les points d'extrémité.

Pour les modifier indépendamment, vous devez sélectionner chaque point d'extrémité en mode Édition de vecteurs :

1. Avec le calque sélectionné, appuyez sur Entrée/Retour pour ouvrir le mode édition de vecteurs →
2. Sélectionner un seul point d’extrémité. Vous pouvez identifier le point final sélectionné par le cercle bleu avec un tracé blanc.
3. Sélectionnez le dans la section Contour de la barre latérale droite pour ouvrir le menu Contours avancés.
4. Mettre à jour la propriété Point de terminaison.
5. Le menu avancé de tracés restera ouvert, vous permettant de sélectionner un autre point de terminaison sur le plan de travail et de mettre à jour à nouveau le point de terminaison.

Points de terminaison en capuchon et en pointe

Choisissez parmi une sélection de capuchons ou de pointes à ajouter à vos points de terminaison :

• Aucun : aucun capuchon ou pointe ajouté(e) à la fin du tracé. Les extrémités sont carrées, sans ajouter de longueur au tracé.
• Arrondi (par défaut) : ajoute un capuchon à la moitié de l'épaisseur du tracé, ainsi qu'un arrondi du point final du tracé à 50 % de la largeur.
• Carré : ajoute un capuchon de la moitié de l'épaisseur du tracé, tout en créant une extrémité carrée au tracé.
• Flèche de ligne : deux lignes à 45 degrés de chaque côté du ou des point(s) de terminaison. La flèche de la ligne utilise la même épaisseur de trait que le tracé lui-même. Vous ne pouvez pas changer la longueur des lignes des têtes de flèche.
• Flèche Triangle : tête de flèche triangulaire aux deux extrémités. Vous devrez passer en mode d'édition vectorielle → pour appliquer une flèche à une seule extrémité du chemin.
• Triangle inversé : version inversée ou retournée de la flèche du triangle, avec la flèche pointant vers l'intérieur du tracé.
• Flèche en losange : ajoute une pointe solide en forme de losange à l'extrémité.

Types de contours

Vous pouvez utiliser les paramètres avancés de Stroke pour personnaliser davantage l'aspect d'un contour. Pour accéder à ces paramètres, allez dans la section Contours de la barre latérale droite et sélectionnez Advanced stroke settings (Paramètres avancé des tracés).

Tracés de base

Vous pouvez utiliser les paramètres de base du tracé pour créer un tracé en pointillés ou en tirets. 

En tirets

Créer une ligne en tirets uniforme.

1. Dans le panneau Contours, sélectionnez pour ouvrir le menu avancé de tracés.
2. Sélectionnez le style de tracé en Tirets
3. Saisissez la longueur souhaitée pour le Tiret, en pixels.
4. Entrez la longueur de l'écart entre les tirets, en pixels.
5. Choisissez le type de terminaison pour le tiret :
   • Aucun
   • Arrondi
   • Carré

Pointillés

Créer une ligne en pointillés.

1. Dans le panneau Stroke, utilisez la liste déroulante pour changer la position du tracé sur Center.
2. Sélectionnez pour ouvrir le menu avancé de tracés.
3. Sélectionnez le style de tracé en Tirets
4. Saisissez une longueur de tiret de 1 pixel.
5. Dans le paramètre extrémité du tiret, sélectionnez Arrondi.
6. Ajustez l'Écart entre les tirets selon vos besoins.

Custom (Personnalisé)

Créez une ligne en pointillés ou en tirets avec un motif personnalisé.

1. Dans le panneau Contours, sélectionnez pour ouvrir le menu avancé de tracés.
2. Réglez le paramètre Style de tracé avec l’option Personnalisé.
3. Utilisez la syntaxe suivante dans le paramètre Tirets pour définir le modèle de tirets tiret, espace, tiret, espace...
4. Sélectionnez l’extrémité du tiret que vous souhaitez utiliser.

Trait de pinceau

Les contours confèrent à votre sélection un aspect organique, comme s'il était peint à la main. Utilisez l’onglet Pinceau dans les paramètres de contours avancés pour explorer les styles de pinceau disponibles, y compris les pinceaux personnalisés que vous avez créés. Passez votre curseur sur un style pour voir un aperçu de son apparence sur votre sélection. Une fois que vous avez appliqué un contour, vous pouvez utiliser le paramètre Direction pour déterminer dans quelle direction le contour se déroulera.

Tracé dynamique

Les tracés dynamiques confèrent au contour de votre sélection un aspect dessiné à la main et irrégulier. Vous pouvez utiliser les paramètres du Tracé dynamique pour configurer l’apparence du tracé :

• Fréquence : détermine le nombre de bosses sur le tracé
• Ondulations : détermine la taille des bosses
• Adoucir : détermine le degré d'irrégularité des bosses

Assemblage et angle d'onglet

Définissez comment les lignes se rejoignent au niveau d'un tracé ou d'un réseau vectoriel. Ajustez les jonctions d'un tracé complet entier ou passez en mode d'édition vectorielle pour sélectionner un seul point d'ancrage du tracé. Choisissez parmi :

• Onglet : créez une pointe acérée, semblable à une flèche, là où les deux tracés se rencontrent.
• Biseau : coupez la pointe acérée pour obtenir un bord plat.
• Arrondi : arrondissez le point où deux tracés se rencontrent pour adoucir la jonction.

Utilisez le paramètre Angle d'onglet pour contrôler l'angle du biseau de deux lignes. Par exemple : pour un onglet de 90°, tout angle ≤ 90° sera biseauté ; tout angle > 90° créera une pointe acérée.

Aperçu des propriétés de contours prises en charge

Certaines propriétés ne sont prises en charge que par des types de calques spécifiques. Utilisez le tableau ci-dessous pour voir si une propriété spécifique est prise en charge par le type de calque avec lequel vous travaillez.

Type de calque	Peintures	Position	Épaisseur	Tracé par côté	Style de couleur	Extrémité	Fusionner
Rectangle	✓	✓	✓	✓	✓	✕	✓
Lignes	✓	✕	✓	✕	✓	✓	✕
Flèches	✓	✕	✓	✕	✓	✓	✓
Ellipse	✓	✓	✓	✕	✓	✕	En cas de modification avec l'outil Arc
Polygon	✓	✓	✓	✕	✓	✕	✓
Star	✓	✓	✓	✕	✓	✕	✓
Booléens	✓	✓	✓	✕	✓	✕	✓
Réseaux vectoriels	✓	✓	✓	✕	✓	Uniquement les tracés ouverts	✓
Outil Text	✓	✓	✓	✕	✓	✕	✓
Cadres (y compris les composants)	✓	✓	✓	✓	✓	✕	✓

Afficher et copier les propriétés des contours avec un accès en lecture seule à un fichier

Si vous avez l'autorisation peut voir pour un fichier, les propriétés de contours s'affichent dans la barre latérale droite sous Bordures. Vous pouvez choisir de représenter les propriétés sous forme de CSS ou de valeurs de couleur telles que Hex, RGB, HSL ou HSB. Une fois que vous avez choisi comment représenter les propriétés, passez le curseur sur la section Bordures et cliquez sur Copier.

Styles et contours

Vous ne pouvez créer et appliquer des styles de couleur qu'aux tracés. Il n’existe pas de moyen d’enregistrer les autres propriétés d’un tracé en tant que style, comme l'épaisseur et la position.

Lorsque vous appliquez un style de couleur à un tracé, vous pouvez toujours ajuster les autres propriétés. Cela inclut l'épaisseur et la distribution, ainsi que toutes les propriétés avancées des tracés telles que les extrémités, les fusions et les tirets.

Appliquer des styles de couleur aux contours

1. Sélectionnez le calque que vous souhaitez mettre à jour.

2. Dans la section Stroke du panneau de droite, cliquez sur l'icône de style .

3. Utilisez le sélecteur de style pour choisir le style de couleur pertinent.

4. Ajustez les autres propriétés du tracé, selon vos besoins.

Mettre à l’échelle et redimensionner les contours

Les contours réagissent différemment selon la façon dont vous les redimensionnez.

• Redimensionnez l’objet si vous souhaitez conserver l’épaisseur d’un tracé tout en ajustant les dimensions de l’objet. Survolez le cadre de délimitation du tracé jusqu’à ce que le curseur apparaisse, puis faites glisser pour redimensionner.
• Utilisez l'outil Échelle pour ajuster les propriétés du tracé en fonction des dimensions de l'objet. Apprendre à utiliser l'outil de mise à l'échelle →

Convertir des tracés en objets vectoriels

L'option Contours vous permet de convertir des tracés en objets vectoriels. Elle prendra chaque tracé de l'objet et le transformera en une seule forme modifiable.

Cela vous permettra de :

• Supprimer ou prolonger les demi-tirets.
• Créer des formes personnalisées et les modifier en mode vectoriel
• Combiner plusieurs tracés en un seul objet
• Mettre à l'échelle les objets vectoriels de manière uniforme

Contour

1. Cliquez avec le bouton droit de la souris sur le calque et sélectionnez Contour ou utilisez le raccourci clavier :
   
   • Mac : Commande ⌘ ⌥ Option O
   • Windows : Control Alt O
2. Figma convertira le tracé en objet vectoriel et appliquera toutes les peintures que vous aviez comme tracé en tant que remplissage.
3. Vous pouvez voir à quoi ressemble cet objet vectoriel en mode Édition de vecteur. Appuyez sur Enter/Return (Entrée/Retour), ou cliquez sur Edit object (Modifier l'objet) dans la barre d'outils pour modifier l'objet vectoriel.