Extraire les styles de couleur dans Figma depuis une page web importée

Pourquoi les couleurs importées arrivent comme de simples remplissages

Pour extraire des styles de couleur dans Figma depuis une page importée, vous les créez vous-même après l'import : sélectionnez un calque qui porte une couleur à conserver, cliquez sur Apply styles or variables dans sa section Fill, puis choisissez New style or variable. L'import vous donne les couleurs. Il ne leur donne pas de noms.

Mieux vaut le savoir avant de commencer. La page produit d'UnHTML indique que les segments de texte conservent la famille, la graisse, la taille et la couleur, et que les dégradés sont repris. Elle précise aussi que le texte répété devient des text styles Figma partagés avec Pro. Elle ne dit pas que les remplissages deviennent des styles de couleur ou des variables : considérez donc les styles de couleur comme une étape manuelle. Nous traitons le côté texte dans composants et text styles issus d'un import.

Les propriétés personnalisées expliquent le reste. Une page peut stocker un brun dans une propriété personnalisée sur :root et le référencer avec var() à vingt endroits. Le navigateur résout var() en une valeur finale avant de peindre quoi que ce soit. La page d'UnHTML ne mentionne pas les propriétés personnalisées : attendez-vous donc à de simples remplissages sur vos calques plutôt qu'à des noms de tokens, et vérifiez un calque dans votre propre import.

Ce tutoriel suppose que la page est déjà dans Figma et que vous avez l'accès can edit au fichier. Le centre d'aide de Figma indique que toute personne disposant de l'accès can edit peut créer et modifier des styles.

Choisir les couleurs qui valent la peine d'être conservées

Ne créez pas un style pour chaque remplissage. Une page typique répète une poignée de couleurs : un fond de page, une couleur de surface, le texte courant, la couleur des titres, une couleur de marque, une couleur de bordure et quelques couleurs d'état. Commencez par celles-là et laissez de côté les remplissages uniques. Un style pour une couleur qui n'apparaît qu'une fois allonge la liste du sélecteur sans vous faire gagner de temps ensuite.

Une méthode rapide pour décider : cliquez sur plusieurs calques du même type (tous les boutons, tous les paragraphes du corps de texte) et regardez s'ils partagent une couleur. Si oui, elle mérite un style. Si chaque instance diffère, choisissez la valeur que vous voulez standardiser.

Créer un style de couleur à partir d'une sélection

C'est la voie à utiliser quand vous avez déjà un calque sous la main.

1. Sélectionnez le calque dont vous voulez conserver la couleur.
2. Dans la barre latérale droite, cliquez sur Apply styles or variables à côté de la section Fill.
3. Cliquez sur New style or variable dans le sélecteur.
4. Saisissez un nom et une description. Les descriptions s'affichent quand vous survolez le style dans le sélecteur.
5. Si vous le souhaitez, organisez les styles en dossiers.

La page de Figma sur la création et la modification des styles énumère ce qu'un style de couleur peut contenir : remplissage, contour, image, dégradé, motif et shader fill. Dans la même boîte de dialogue, vous pouvez cliquer sur le moins à côté d'une propriété pour la retirer du style.

Adoptez un schéma de nommage que vous comprendrez encore dans un mois. Un usage courant place le rôle en premier et la nuance ensuite, comme surface/default, text/primary et brand/500. La page d'aide confirme que l'on peut organiser les styles en dossiers, mais elle ne décrit pas le nommage avec des barres obliques : vérifiez donc comment votre fichier regroupe les styles après avoir enregistré le premier.

Depuis le panneau Local styles

Vous pouvez aussi commencer sans rien sélectionner. Cliquez sur le plus à côté de Local styles dans la barre latérale droite, choisissez un type de style dans le menu déroulant, saisissez un nom et une description, configurez les propriétés, puis cliquez sur Create style. C'est plus lent pour un import, car il faut saisir la valeur de la couleur, mais c'est utile quand vous avez déjà les valeurs hexadécimales de la feuille de style du site.

Le raccourci de la pipette

Sur une longue page, la pipette est plus rapide que le chemin par les menus. Activez-la avec Control+C ou I sur Mac, ou avec I sous Windows. Ensuite :

1. Maintenez Command+Shift sur Mac ou Control+Shift sous Windows.
2. Appuyez sur Enter ou cliquez sur la couleur voulue.
3. Dans la boîte de dialogue, choisissez Style ou Variable, remplissez les champs et appuyez sur Create.

La page sur la pipette de Figma indique que le nouvel élément est appliqué au calque sélectionné. Appuyez sur Tab pendant l'échantillonnage pour faire passer la valeur affichée entre Hex, RGB, HSL et HSB, ce qui aide quand vous voulez retrouver une valeur vue dans le CSS d'origine.

Deux limites s'appliquent à la date de 2026. L'échantillonnage d'une couleur en dehors du canevas exige Figma Desktop 126.2.10 ou une version plus récente sur macOS 14 ou plus récent, et il n'est disponible ni dans l'application de bureau pour Windows ni dans le navigateur. L'échantillonnage depuis les calques du fichier fonctionne partout où vous avez un accès en modification.

Une fois les styles créés, les appliquer au reste de la page est rapide. Survolez un pixel qui porte un style, maintenez Shift et cliquez sur le calque que vous voulez restyler.

Style ou variable pour la couleur

La même boîte de dialogue vous demande de choisir entre Style et Variable : décidez avant d'en créer cinquante. La documentation des variables de Figma donne les différences pratiques :

Les variables s'appliquent aux remplissages unis, aux points de dégradé, aux couleurs de contour et aux styles de couleur. Un style peut faire référence à une variable : vous pouvez donc créer une variable pour chaque couleur principale et un style qui pointe vers elle. Vous obtenez ainsi les deux : le style gère les dégradés et plusieurs propriétés, et la variable porte la valeur.

Si la page sert à une analyse ponctuelle, de simples styles suffisent. Si vous comptez transformer l'import en véritable système de design, configurez d'abord les variables et construisez les styles par-dessus. Notre article sur la construction d'un système de design à partir d'un site importé couvre ce chemin.

Dégradés, alpha et couleurs à surveiller

La plupart des couleurs d'une page sont de simples valeurs sRGB. La référence des valeurs de couleur de MDN classe l'hexadécimal, rgb(), hsl(), hwb() et les couleurs nommées dans sRGB. Elles se convertissent sans problème en remplissage Figma.

Trois cas méritent un second regard :

• Les couleurs à gamut étendu. oklch(), lab(), lch() et color() peuvent décrire des couleurs hors de sRGB. MDN note que color(display-p3 0 0 1) équivaut à la valeur hors gamut color(srgb 0 0 1.042) : la conversion vers sRGB peut donc écrêter la valeur. Si une couleur de marque paraît un peu plus terne dans Figma, la feuille de style d'origine utilise peut-être l'un de ces formats.
• currentColor et les couleurs système. Elles n'ont pas de valeur fixe. currentColor se résout selon la propriété color de l'élément, et les couleurs système dépendent des réglages de l'utilisateur ou du système d'exploitation. Ce que vous voyez sur le calque importé est ce qu'elles valaient au moment de la capture.
• Les dégradés. Une variable ne peut pas contenir un dégradé entier, seulement la couleur de chaque point. Si le dégradé est un élément de marque, créez-lui un style de couleur. Pour voir comment les dégradés CSS arrivent sur le canevas, consultez comment les dégradés CSS sont repris dans Figma.

Un court passage à faire à chaque import

Inutile d'en faire une cérémonie. Suivez cet ordre :

1. Choisissez de cinq à huit couleurs qui se répètent sur la page.
2. Créez un style ou une variable pour chacune avec la pipette, avec un nom qui commence par le rôle.
3. Regroupez-les en dossiers par rôle.
4. Utilisez Shift et clic pour restyler les calques isolés qui portent une couleur presque identique.
5. Supprimez les styles que vous n'avez finalement pas utilisés.

Comme l'import n'est pas un clone exact au pixel près, quelques remplissages différeront de la source de petites valeurs. Corrigez ceux que vous voyez et passez à la suite.

Conclusion

Les styles de couleur sont une étape manuelle après un import, mais une petite. Choisissez les couleurs qui se répètent, créez des styles à partir d'une sélection ou avec le raccourci de la pipette Command+Shift ou Control+Shift, et décidez tôt si des variables doivent se trouver en dessous. Une fois la palette nommée, le reste de la page va vite. Si vous n'avez pas encore importé la page, UnHTML l'amène dans Figma sous forme de calques modifiables.