Dégradés Figma : astuces pour des résultats plus lisses

Pour faire un dégradé Figma, sélectionnez un calque, cliquez sur son échantillon de remplissage et changez le type de remplissage d’Uni à Linéaire, Radial, Angulaire ou Losange. Des poignées apparaissent sur le canevas : faites-les glisser pour régler la direction et la portée du fondu, et cliquez sur la barre de dégradé du sélecteur pour ajouter des repères de couleur. Cela prend quelques secondes. Le rendre lisse, riche et identique une fois passé en code demande quelques habitudes de plus, et c’est l’objet de ce guide.

Les quatre types de dégradé dans Figma

Le linéaire convient à la plupart des fonds et des boutons. Le radial convient aux lueurs et aux projecteurs. L’angulaire dessine des roues chromatiques, des cadrans et des reflets métalliques. Le losange est rarement nécessaire ; il donne une lueur à facettes dans quatre directions, distinctive en illustration mais qui doit devenir une image bitmap sur le web. Pour le comportement de chaque type en design en général, voyez les types de dégradés.

Travailler dans l’éditeur de dégradé

1. 1

   Réglez la direction avec les poignées

   Une poignée marque l’endroit où se trouve la première couleur, l’autre celui de la dernière. Faites glisser la poignée de fin au-delà du bord du cadre pour un fondu plus doux, ou rentrez-la pour un fondu plus court et plus raide.

2. 2

   Ajoutez des repères sur la barre

   Cliquez n’importe où sur la barre de dégradé du sélecteur de couleur pour ajouter un repère, puis donnez-lui une couleur. Sélectionnez un repère et appuyez sur Suppr pour le retirer.

3. 3

   Utilisez l’opacité des repères pour les fondus

   Chaque repère a sa propre opacité. Fondre une couleur jusqu’à 0 % d’opacité permet à un dégradé de se superposer à une photo ou à un autre remplissage.

4. 4

   Empilez les remplissages

   Un calque peut contenir plusieurs remplissages. Ajoutez un second dégradé au-dessus du premier, avec des zones transparentes, pour superposer une lueur à un fondu de base.

5. 5

   Enregistrez-le comme style

   Enregistrez le remplissage terminé comme style de couleur pour que toute l’équipe utilise le même dégradé. Les variables Figma ne gardent pas les dégradés, mais les styles le font.

Corriger les milieux gris et les fondus boueux

Figma fond directement les repères de couleur, un peu comme le CSS par défaut, et n’a pas d’option pour fondre dans un espace colorimétrique perceptuel. Un long fondu entre des teintes éloignées, comme bleu vers orange ou bleu vers jaune, s’affaisse dans le gris au milieu. Le remède est un repère central : choisissez la couleur que vous voulez au point médian, en général une teinte intermédiaire plus vive, et ajoutez-la à la main. Les dégradés boueux expliquent la théorie des couleurs.

Des dégradés de type mesh dans Figma

Figma n’a pas d’outil de dégradé mesh, mais une version convaincante se construit vite. Dessinez quatre ou cinq ellipses dans vos couleurs, qui se chevauchent, dans un cadre à fond sombre ou clair. Groupez-les, ajoutez un grand flou de calque au groupe et rognez le contenu du cadre. Déplacez les ellipses pour rééquilibrer la couleur. C’est la même idée que la technique en couches des dégradés mesh en CSS, et les dégradés mesh traitent le côté design.

Ajouter du grain pour masquer le banding

Les dégradés lisses exportés en PNG ou JPEG 8 bits peuvent montrer des paliers visibles, surtout dans les fondus sombres et lents. Une légère couche de bruit brise ces paliers. Les versions récentes de Figma incluent des options de bruit et de texture dans le panneau Effets ; sinon, placez une image de bruit en mosaïque sur le dégradé avec un mode de fusion comme Incrustation ou Lumière douce à faible opacité. Le banding des dégradés explique pourquoi cela marche, et les dégradés granuleux pourquoi c’est aussi plus beau.

Exporter et retrouver les dégradés Figma en CSS

Dans le Dev Mode ou le panneau Inspecter, Figma affiche le CSS des remplissages en dégradé. Prenez-le comme point de départ et vérifiez trois choses. D’abord l’angle : les poignées que vous avez tirées sur un cadre non carré peuvent donner un angle que vous n’auriez pas choisi : arrondissez-le à une valeur propre. Ensuite le profil colorimétrique : si votre fichier utilise Display P3, les mêmes valeurs hex peuvent paraître différentes dans un navigateur sRGB. Enfin les remplissages empilés : ils deviennent des dégradés séparés par des virgules, le remplissage Figma du dessus étant listé en premier.

/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}

Pour les images, exportez en 2x pour des résultats nets sur les écrans à haute densité, et préférez le PNG pour les dégradés avec transparence. Pour les dégradés qui doivent rester vectoriels, l’export SVG écrit les remplissages linéaires et radiaux comme des dégradés SVG ; voyez les dégradés SVG pour comprendre ce que vous obtenez. Les remplissages losange, les mesh floutés et le bruit sortent toujours en pixels.

Si vous fabriquez beaucoup de fonds en dégradé pour des posts sociaux, des présentations et des bannières, un outil qui rend la même matière à chaque taille évite de tout réexporter. Dans Gradiently, un Mark se rend en direct à chaque format au lieu d’être rogné dans un seul export.