Les transformations CSS en termes Figma : translate, rotate, scale et skew

Introduction

Trois des quatre fonctions de transformation CSS ont un équivalent direct dans Figma : translate() correspond aux champs X et Y, rotate() au champ de rotation, et scale() se rapproche de l'outil Scale. skew() n'a aucun contrôle dans le panneau des propriétés de Figma. Ce qui fait trébucher, c'est le signe de la rotation, le point d'origine et l'ordre des opérations.

Cet article est un lexique pour les personnes qui lisent du CSS et travaillent dans Figma. Il explique ce que fait chaque fonction d'après la référence MDN sur transform et ce que fait le contrôle Figma correspondant d'après le centre d'aide de Figma. Il ne dit rien de la façon dont un outil d'import convertit les transformations.

Les quatre fonctions côte à côte

MDN présente les mêmes quatre familles : translate() déplace un élément, rotate() le fait tourner autour de son origine, scale() multiplie sa taille et skew() l'incline le long des axes X et Y. En CSS, elles vivent toutes dans une seule propriété transform, sous forme de liste séparée par des espaces.

Translate : décalages CSS et champs X et Y de Figma

translate(12px, 50%) déplace un élément de 12px sur l'axe X et de la moitié de sa propre hauteur sur l'axe Y. La seconde valeur est facultative. Les pourcentages se rapportent à la taille de la boîte englobante de l'élément lui-même, pas à celle du parent. C'est pourquoi translate(-50%, -50%) est une manière courante de centrer un élément déjà placé dans le coin supérieur gauche de son conteneur.

Figma n'a pas de champ de décalage. Les champs X et Y indiquent où se trouve le calque et se rapportent au coin supérieur gauche de ses limites. Si vous saisissez une nouvelle valeur, le calque se déplace jusque-là, et les champs acceptent des opérations mathématiques simples : ajouter +12 au X actuel revient au même coup de pouce que translate(12px, 0). Après la rotation d'un calque, Figma continue de calculer X et Y à partir du coin supérieur gauche d'origine, donc les nombres ne sautent pas.

Pour comprendre comment fonctionne le placement d'un élément avant toute transformation, voir CSS position dans Figma.

Rotate et transform-origin

rotate() prend un angle en deg, turn ou rad. rotate(0.5turn) et rotate(180deg) sont la même rotation. Les valeurs positives font tourner l'élément dans le sens horaire.

Figma va dans l'autre sens. Dans le champ de rotation, en haut du panneau Design, un angle positif tourne dans le sens antihoraire et un angle négatif dans le sens horaire. Le champ va de -180 à 180 degrés, et une valeur qui dépasse 180 reprend de l'autre côté : 15 degrés au-delà de 180 devient -165. L'article d'aide de Figma indique que CSS utilise les directions opposées pour l'angle de rotation, et le Dev Mode le reflète : un calque tourné de 90 degrés sur le canevas apparaît comme rotate(-90deg). Quand vous copiez un nombre d'un outil à l'autre, inversez le signe.

Le point autour duquel on tourne compte autant que l'angle. En CSS, il est défini par transform-origin, dont la valeur initiale est 50% 50% 0, le centre de la boîte de l'élément. Les mots-clés sont des raccourcis pour des pourcentages : left et top valent 0 %, center vaut 50 %, right et bottom valent 100 %.

.box {
  transform: rotate(30deg);
  transform-origin: 0 0; /* rotate around the top-left corner */
}

Le comportement par défaut de Figma est le même : il tourne autour du centre de la sélection actuelle. Pour utiliser un autre pivot, sélectionnez le calque, appuyez sur Option R sur Mac ou Alt R sous Windows, puis faites glisser la cible vers le nouveau point. Faire glisser juste à l'extérieur des limites d'un calque le fait tourner, et Shift cale l'angle par pas de 15 degrés. L'article d'aide Figma sur la rotation et la position couvre chacun de ces points.

Un détail SVG d'après MDN : pour les éléments SVG, la valeur initiale de transform-origin est 0 0, sauf pour les éléments svg racines et les enfants svg de foreignObject, qui utilisent 50% 50%. Une rotation qui semble centrée sur une boîte HTML peut pivoter depuis le coin sur une forme SVG.

Scale

scale(2) double un élément et scale(0.5) le réduit de moitié. Les arguments sont des facteurs sans unité, et quand le second est omis, il est égal au premier : scale(2) équivaut à scale(2, 2). scale(2, 0.5) étire à l'horizontale et écrase à la verticale.

Dans Figma, le contrôle le plus proche est l'outil Scale, que l'on active avec la touche K. Une boîte d'ancrage définit la direction depuis laquelle l'objet est mis à l'échelle, et vous pouvez utiliser le multiplicateur d'échelle ou les champs de dimensions. D'après l'article d'aide de Figma, l'outil conserve le rapport d'aspect et ignore les contraintes (constraints) des calques imbriqués pour les redimensionner proportionnellement. Mettre à l'échelle un calque de texte modifie aussi sa taille de police, ce qui diffère d'un simple changement de largeur et de hauteur.

C'est la principale différence. Redimensionner un frame dans Figma change ses dimensions et laisse les constraints réagir. scale() en CSS multiplie la taille de l'élément par un facteur, et il n'y a aucune constraint pour réagir. L'article sur l'outil Scale est la référence côté Figma.

Le retournement est un cas voisin. Figma retourne un calque avec Shift H (horizontal) ou Shift V (vertical), et son article d'aide précise que Figma utilise la transformation CSS matrix pour les retournements, même si vous appliquez ensuite une rotation. Un calque retourné peut donc apparaître dans le Dev Mode sous la forme d'une valeur matrix() plutôt que d'une fonction rotate() ou scale().

Skew

skew(30deg, 20deg) incline un élément de 30 degrés selon X et de 20 degrés selon Y, et skewX() et skewY() gèrent chacune un seul axe. Skew prend des angles, pas des facteurs.

Le panneau des propriétés de Figma n'a pas de champ skew. La communauté Figma propose plusieurs plugins de skew, et les développeurs peuvent définir la matrice de transformation du calque via la Plugin API. La documentation de relativeTransform indique qu'on peut incliner un calque en donnant les bonnes valeurs à la matrice, et prévient que le skew n'apparaît pas dans le panneau des propriétés et peut dérouter la personne qui travaille avec un nœud incliné. Si vous trouvez une forme inclinée dans un fichier, vérifiez comment elle est arrivée là avant de la modifier à la main.

CSS a le même vide sous une autre forme : il n'existe pas de propriété skew individuelle. translate, rotate et scale existent comme propriétés autonomes, mais pour incliner il faut la propriété transform.

L'ordre des transformations et ce qu'une transformation ne change pas

Quand une liste transform contient plusieurs fonctions, elles s'appliquent de gauche à droite, et chacune établit un nouvel espace de coordonnées pour la suivante. L'ordre change le résultat :

.one { transform: translateX(200px) rotate(135deg); } /* shift, then rotate */
.two { transform: rotate(135deg) translateX(200px); } /* rotate, then shift along the rotated axis */

Mêmes valeurs, positions différentes. Si vous reconstruisez un jour une pile CSS à la main dans Figma, appliquez les étapes dans le même ordre, sinon le calque finit ailleurs.

Les propriétés autonomes ont elles aussi un ordre fixe : d'abord translate, puis rotate, puis scale, et enfin transform.

Deux effets secondaires sont faciles à manquer. Une valeur de transform autre que none crée un contexte d'empilement et fait de l'élément le bloc conteneur de ses descendants en position: fixed et position: absolute. De plus, tous les éléments ne peuvent pas être transformés : les boîtes en ligne non remplacées ne le peuvent pas. Si une transformation semble ne rien faire, vérifiez d'abord la valeur de display. Pour voir comment les conteneurs disposent leurs enfants avant toute transformation, voir la correspondance entre flexbox et auto layout.

Conclusion

Translate, rotate et scale ont chacun leur place dans Figma : les champs X et Y, le champ de rotation et l'outil Scale. Skew n'en a pas, et il faut un plugin ou la Plugin API. Vérifiez trois choses quand vous passez une transformation d'un outil à l'autre : le signe de la rotation (positif est antihoraire dans Figma, horaire en CSS), l'origine (les deux utilisent le centre par défaut, et les deux peuvent être déplacées) et l'ordre des opérations. Pour le versant mise en page de la même correspondance, lisez CSS Grid vers les calques Figma.

Questions fréquentes

Figma a-t-il un contrôle de skew ?

Pas dans le panneau des propriétés. Le skew vient de plugins de la communauté ou de la définition de la matrice de transformation via la Plugin API. La documentation de Figma prévient qu'un skew défini ainsi n'apparaît pas dans le panneau.

Pourquoi une rotation de 90 degrés dans Figma apparaît-elle comme rotate(-90deg) dans le Dev Mode ?

Figma considère un angle positif comme antihoraire, alors que CSS le considère comme horaire. L'article d'aide de Figma indique que CSS utilise la direction opposée, donc le Dev Mode inverse le signe.

Quelle est la valeur par défaut de transform-origin en CSS, et que fait Figma ?

CSS utilise 50% 50% par défaut, le centre de la boîte de l'élément. Figma tourne par défaut autour du centre de la sélection actuelle, et vous pouvez déplacer le point avec Option R sur Mac ou Alt R sous Windows.

Le scale() de CSS est-il identique au redimensionnement d'un calque dans Figma ?

Pas exactement. scale() multiplie la taille dessinée par un facteur sans unité. L'outil Scale de Figma (K) est ce qui s'en rapproche le plus : il conserve le rapport d'aspect et met à l'échelle les calques imbriqués proportionnellement, y compris la taille de police du texte.