Masques

Avant de commencer

Qui peut utiliser cette fonctionnalité

Toute personne dans  une équipe ou un forfait

Toute personne autorisée à apporter des modifications à un fichier de design Figma peut utiliser des masques

Les masques permettent d'afficher des zones spécifiques d'objets tout en masquant le reste.

Cela revient à glisser une photo dans un cadre disposant d'une petite fenêtre d'ouverture : seule une partie de cette photo sera visible à travers l'ouverture, tandis que le reste sera caché, vous évitant ainsi d'avoir à découper la photo pour en réduire la taille.

Les calques masqués n'étant aucunement modifiés ni supprimés au cours de ce processus, les masques n'exercent aucune action destructive. Ils vous permettent de préserver les zones cachées sans avoir besoin de les rogner pour les ajuster.

Fonctionnement des masques

Tout calque peut faire office de masque, notamment les formes vectorielles, les calques de texte, les images avec des canaux de transparence, des groupes et plus encore.

Lorsque vous utilisez un calque comme masque, un objet masque est créé, qui inclut le masque et tous les calques qu'il masque. Un objet masque peut être identifié dans la section Calques du panneau de navigation de gauche. L'icône de masque identifie le masque, avec une flèche vers le haut le long des calques qui sont masqués.

Les masques sont placés sous les calques masqués sur l'axe Z. Un masque s'applique à tous les frères et sœurs au-dessus de lui, jusqu'à ce qu'il atteigne :

• Un autre masque ou objet masque
• Le groupe ou la frame parente du masque
• Une frame ou un composant dont l'option "Masquer le contenu extérieur" est activée

En savoir plus sur les relations entre parents, frères, sœurs et enfants

Dans l'exemple ci-dessous, l'ellipse violette fait office de masque. Si le masque se trouve sous l'image de la personne sur l'axe Z, il masquera cette image. Si le masque se trouve au-dessus de l'image, cette dernière ne sera pas masquée.

Types de masque

Alpha

Dans Figma, tous les masques prennent en charge les canaux Alpha. Ces canaux représentent le degré de transparence ou d'opacité d'une couleur, d'une image ou d'un objet.

Lorsque vous utilisez des masques Alpha, ces masques sont appliqués en fonction de leur opacité. Plus l'opacité est forte, moins le masque cache. Une opacité de 0 % ne laisse rien transparaître.

Il est donc possible d'utiliser les flous et l'opacité dans les masques :

• Importer des fichiers PNG, GIF et WebP existants avec transparence (canaux Alpha)
• Utiliser des effets de flou de calque pour répliquer un adoucissement de contours
• Appliquer des ombres internes et portées pour créer une profondeur
• Ajouter des remplissages, des contours et des dégradés d'opacité variables

Dans l'exemple ci-dessous, nous avons utilisé une ellipse avec un contour externe en guise de masque. L'opacité du remplissage de l'ellipse est de 100 % et celle du contour est de 30 %. Le centre de l'image est plus visible, car l'opacité du masque y est plus élevée (100 %).

Vecteur

Les masques vectoriels, ou l'utilisation de contours de forme en tant que masques, ignorent la translucidité (les valeurs d'opacité supérieures à 0 %) des contours ou remplissages de masque. Si la moindre zone d'un masque présente une opacité supérieure à 0 %, ses contours sont utilisés comme masque et le masque entier présente une opacité de 100 %.

Dans l'exemple ci-dessous, l'image d'un cœur à l'arrière-plan complètement transparent est utilisée comme masque. L'objet en bas à gauche utilise un masque Alpha, d'où sa forme de cœur. L'objet en bas à droite utilise un masque vectoriel, et il utilise le contour de l'image entière comme masque.

Luminosité

La luminosité permet d'utiliser la clarté pour déterminer un masque. Plus la zone d'un masque est claire, moins le masque cache. En d'autres termes, plus l'opacité des calques est masquée.

Plus la zone est sombre, plus le masque cache. Si un masque dispose d'un remplissage noir, soit #000000, il ne révélera rien et les calques masqués présenteront une opacité de 0 %.

Créer et modifier des masques

Créer un masque

1. Choisissez l'objet que vous souhaitez utiliser comme masque, puis placez-le derrière tous les objets à masquer sur l'axe Z.
2. Sélectionnez tous les calques à inclure dans l'objet masque.
3. Dans la barre latérale droite, sélectionnez Plus d'options > Utiliser comme masque ou appuyez sur :
   
   • Mac : ⌃ Contrôle ⌘ Commande M
   • Windows : Ctrl Alt M

   Remarque : Si vous n'avez sélectionné qu'un seul calque, sélectionnez directement Utiliser comme masque dans la barre latérale droite.

4. Figma créera un groupe de masques avec tous les calques sélectionnés.
5. Par défaut, le type de masque est défini sur Alpha. Pour le changer, sélectionnez le calque utilisé comme masque et ouvrez la liste déroulante dans la section Masque de la barre latérale droite. Placez le curseur sur une option pour en prévisualiser le rendu sur le plan de travail. En savoir plus sur les types de masque.

Pour ajouter des calques à un objet masque existant, utilisez le panneau Calques pour cliquer sur ces calques et les déplacer vers l'objet masque en question.

En savoir plus sur la réorganisation des calques

Redimensionnement et déplacement

Les masques et les calques masqués se déplacent et se redimensionnent indépendamment les uns des autres. Cela signifie que lorsque vous déplacez ou redimensionnez un masque, les calques masqués ne sont pas affectés, et vice versa.

Parce qu'ils appartiennent à la même fratrie, les masques ne se comportent pas comme des parents, contrairement à une frame, un groupe ou un composant.

En savoir plus sur les relations entre parents, frères, sœurs et enfants

Supprimer un masque

Pour arrêter d'utiliser un objet en tant que masque, procédez de l'une des manières suivantes afin de le désactiver :

• Sélectionnez le masque et cliquez sur dans la barre latérale droite.
• Cliquez avec le bouton droit de la souris sur le masque et sélectionnez l'option Supprimer le masque.
• Sélectionnez le masque et utilisez le raccourci clavier suivant :
  • Mac : ⌃ Contrôle ⌘ Commande M
  • Windows : Ctrl Alt M

Toute partie cachée par le masque réapparaitra.

Afficher les contours de masque

Par défaut, Figma n'affiche pas les lignes frontière des masques. Utilisez des contours de masque lorsque vous utilisez des masques complexes ou pour vérifier la présence d'espaces involontairement vides.

Pour activer les contours de masque, procédez comme suit :

1. Ouvrez le menu Figma .
2. Accédez à Afficher > Contours de masque.

Une fois ce paramètre activé, le contour des masques de votre fichier s'affiche en vert.