De box-shadow en CSS à un effet Figma : la correspondance propriété par propriété

Répondre à la question d'entrée de jeu

Un box-shadow en CSS et un effet Drop Shadow ou Inner Shadow dans Figma décrivent la même ombre. Les mêmes cinq valeurs : un décalage X, un décalage Y, une quantité de flou, une quantité d'extension et une couleur, seulement sous des noms de champs différents. Un mot-clé CSS n'a pas son propre champ dans Figma : inset. Il correspond plutôt au choix d'un type d'effet différent.

C'est un article de référence, alors parcourez la correspondance des propriétés ci-dessous, puis revenez sur les deux points où la correspondance échoue réellement : la restriction de spread dans Figma, et ce qui arrive à une ombre sur un calque de texte.

La syntaxe de box-shadow, champ par champ

CSS définit box-shadow comme une liste d'ombres séparées par des virgules, chacune composée d'un maximum de six parties : offset-x, offset-y, un blur-radius optionnel, un spread-radius optionnel, une color optionnelle, et un mot-clé inset optionnel. La référence box-shadow de MDN présente les parties obligatoires et optionnelles de cette façon, et la spécification W3C CSS Backgrounds and Borders est la source formelle de ce même modèle en six parties.

Seuls offset-x et offset-y sont obligatoires. Omettez blur-radius et sa valeur par défaut est 0 : une ombre à bord net, sans adoucissement. Omettez spread-radius et sa valeur par défaut est aussi 0, si bien que la boîte de l'ombre correspond exactement à la boîte de l'élément. Omettez color et l'ombre hérite de la valeur color de l'élément lui-même, ce qui est rarement ce que vous voulez, donc autant la définir explicitement.

Une ombre de carte typique ressemble à ceci :

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

C'est offset-x: 0, offset-y: 4px, blur-radius: 12px, spread-radius: 0, et un remplissage noir à 15% d'opacité. Un champ de saisie enfoncé, lui, ajoute le mot-clé inset :

box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);

Les mêmes cinq valeurs, mais l'ombre se dessine maintenant à l'intérieur de la boîte plutôt qu'à l'extérieur.

box-shadow accepte une liste séparée par des virgules, donc une seule propriété peut contenir plusieurs ombres empilées les unes sur les autres. Un motif courant superpose une ombre resserrée et sombre pour la définition avec une ombre douce et légère pour la profondeur ambiante :

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 8px 24px 0 rgba(0, 0, 0, 0.1);

La première ombre de la liste s'affiche au-dessus, la dernière s'affiche à l'arrière-plan, et chaque ombre de la liste est par ailleurs totalement indépendante : ses propres décalages, son propre flou, sa propre extension, sa propre couleur.

Ce que contient réellement un effet d'ombre dans Figma

Le panneau d'effets de Figma donne à un effet Drop Shadow ou Inner Shadow cinq champs réglables : X, Y, Blur, Spread et Fill. L'article du centre d'aide de Figma sur l'application des effets décrit X et Y ensemble comme définissant la direction de la source lumineuse, Blur comme le contrôle de la douceur ou de la netteté du bord de l'ombre, Spread comme l'ajustement de la taille apparente de l'ombre par rapport au calque, et Fill comme la couleur et l'opacité appliquées à l'ombre elle-même.

Ce même article indique clairement que les deux effets d'ombre se traduisent par la propriété box-shadow en CSS. Une exception mérite d'être retenue : un effet d'ombre sur un calque de texte se traduit par text-shadow, et non par box-shadow, même si le panneau d'effets que vous utilisez pour le régler a l'air identique dans les deux cas.

Inner Shadow se comporte comme Drop Shadow sur tous les champs, mais peint à l'intérieur des limites du calque plutôt qu'à l'extérieur. Les designers l'utilisent pour un panneau enfoncé ou un état de bouton pressé.

Reprenez l'ombre de carte de la section précédente, 0 4px 12px 0 rgba(0, 0, 0, 0.15). Sur un calque Figma, cela devient un effet Drop Shadow avec X à 0, Y à 4, Blur à 12, Spread à 0, et Fill en noir à 15% d'opacité. Chaque nombre se retrouve tel quel ; seuls les noms de champs changent.

La correspondance des propriétés, côte à côte

En comparant l'un à l'autre, les champs correspondent presque un pour un :

La dernière ligne est celle qu'on remarque le moins. Il n'y a pas de case à cocher inset à côté de Blur et Spread. Le choix se fait une seule fois, en haut de l'effet, en décidant lequel des deux types d'effet ajouter au calque.

Où la correspondance échoue

Spread a une restriction de forme dans Figma que CSS n'a pas

Le spread-radius de CSS fonctionne sur n'importe quelle boîte : un div, un button, une balise a, tout ce qui possède un modèle de boîte. Le champ Spread de Figma est plus restreint. Il n'affecte que les rectangles, les ellipses, les frames et les components, et même sur ceux-ci, il exige que le rognage du contenu (clip content) soit activé avec une opacité de remplissage du calque d'au moins 1%. Une ombre qui s'affiche correctement dans le navigateur peut paraître plus plate dans Figma si le calque source ne remplit pas cette condition, donc il vaut la peine de vérifier les valeurs de spread sur tout ce qui est importé depuis un type d'élément inhabituel.

En pratique, cela signifie qu'une ombre avec un vrai spread, par exemple box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), un motif courant d'anneau de focus, a besoin que son calque cible soit déjà un rectangle, une ellipse, un frame ou un component avec le rognage de contenu activé avant que le champ Spread ne fasse quoi que ce soit. Sur un type de calque hors de cette liste, la valeur de Spread n'a nulle part où s'appliquer, et l'anneau se réduit alors simplement au Blur.

Plusieurs ombres gardent leur ordre, mais vérifiez-le

Une liste box-shadow séparée par des virgules devient une liste empilée d'effets sur le même calque Figma, dans le même ordre : la première de la liste se retrouve en haut. C'est une correspondance propre, mais facile à mal interpréter visuellement si une ombre à faible décalage se trouve sous une ombre à fort décalage. En cas de doute, comparez la liste d'effets de haut en bas avec la déclaration CSS de gauche à droite.

Les ombres de texte sont une propriété totalement différente

Cela mérite d'être répété à part : une ombre sur un nœud de texte devient text-shadow en CSS, jamais box-shadow, peu importe son apparence dans le panneau d'effets de Figma. Si vous comparez une feuille de style à un fichier Figma et que les chiffres ne correspondent pas sur un calque de texte, c'est généralement la raison. Traitez les ombres de texte comme leur propre correspondance, pas comme une variante de celle-ci.

Où cela s'inscrit dans la correspondance de propriétés CSS vers Figma

Cet article s'ajoute à quelques autres références propriété par propriété à garder à portée de main : comment flexbox CSS correspond à l'auto-layout de Figma, ce qui survit quand CSS grid se convertit en calques Figma, et comment chaque valeur position CSS apparaît dans Figma.

UnHTML importe le CSS réel d'une page plutôt que de partir d'une capture d'écran, donc cette correspondance des ombres est ce qui atterrit réellement dans un fichier Figma à l'import, champ par champ, et non une approximation.

En résumé

Cinq valeurs CSS, cinq champs Figma, et un mot-clé, inset, qui devient un choix de type d'effet plutôt qu'un champ à part entière. Les deux endroits où cela échoue sont la restriction de forme de Spread et les calques de texte, qui utilisent text-shadow au lieu de box-shadow quel que soit l'aspect du panneau d'effets. Gardez la table de correspondance des propriétés ci-dessus. C'est la partie qui mérite qu'on y revienne.