CSS-Transformationen in Figma-Begriffen: translate, rotate, scale und skew

Einleitung

Drei der vier CSS-Transformationsfunktionen haben in Figma eine direkte Entsprechung: translate() entspricht den Feldern X und Y, rotate() dem Rotationsfeld, und scale() kommt dem Scale-Werkzeug am nächsten. Für skew() gibt es im Eigenschaftenbereich von Figma kein Bedienelement. Stolpersteine sind das Vorzeichen der Rotation, der Ursprungspunkt und die Reihenfolge der Operationen.

Dieser Artikel ist eine Vokabelliste für Leute, die CSS lesen und in Figma arbeiten. Er beschreibt, was jede Funktion laut MDN-Referenz zu transform tut und was das passende Figma-Bedienelement laut Figma-Hilfecenter tut. Wie ein Importwerkzeug Transformationen umsetzt, behandelt er nicht.

Die vier Funktionen im Überblick

MDN nennt dieselben vier Familien: translate() verschiebt ein Element, rotate() dreht es um seinen Ursprung, scale() multipliziert seine Größe, und skew() kippt es entlang der X- und Y-Achse. In CSS stehen alle in einer einzigen Eigenschaft transform, als durch Leerzeichen getrennte Liste.

Translate: CSS-Verschiebung gegenüber X und Y in Figma

translate(12px, 50%) verschiebt ein Element um 12px entlang der X-Achse und um die halbe eigene Höhe entlang der Y-Achse. Der zweite Wert ist optional. Prozentwerte beziehen sich auf die Größe des Begrenzungsrahmens des Elements selbst, nicht auf die des Elternelements. Deshalb ist translate(-50%, -50%) ein verbreiteter Weg, etwas zu zentrieren, das bereits an der oberen linken Ecke seines Containers sitzt.

Figma hat kein Feld für eine Verschiebung. Die Felder X und Y zeigen, wo die Ebene liegt, und beziehen sich auf die obere linke Ecke der Ebenengrenzen. Tippst du einen neuen Wert ein, springt die Ebene dorthin. Die Felder akzeptieren einfache Rechenoperationen, sodass +12 zur aktuellen X-Position dasselbe Anstupsen ist wie translate(12px, 0). Nach dem Drehen einer Ebene berechnet Figma X und Y weiter von der ursprünglichen oberen linken Ecke, die Zahlen springen also nicht.

Wie die Platzierung eines Elements vor jeder Transformation funktioniert, steht unter CSS position in Figma.

Rotate und transform-origin

rotate() nimmt einen Winkel in deg, turn oder rad. rotate(0.5turn) und rotate(180deg) sind dieselbe Drehung. Positive Werte drehen das Element im Uhrzeigersinn.

Figma dreht in die andere Richtung. Im Rotationsfeld oben im Design-Bereich dreht ein positiver Winkel gegen den Uhrzeigersinn und ein negativer im Uhrzeigersinn. Das Feld reicht von -180 bis 180 Grad, und ein Wert über 180 läuft auf der anderen Seite weiter: 15 Grad über 180 werden zu -165. Der Figma-Hilfeartikel sagt, CSS verwende für den Drehwinkel die entgegengesetzten Richtungen, und der Dev Mode spiegelt das: Eine auf der Arbeitsfläche um 90 Grad gedrehte Ebene erscheint als rotate(-90deg). Wenn du eine Zahl von einem Werkzeug ins andere übernimmst, kehre das Vorzeichen um.

Der Punkt, um den gedreht wird, ist ebenso wichtig. In CSS legt ihn transform-origin fest, dessen Anfangswert 50% 50% 0 ist, die Mitte des Elementrahmens. Schlüsselwörter sind Kurzformen für Prozentwerte: left und top stehen für 0%, center für 50%, right und bottom für 100%.

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

Figmas Standard stimmt damit überein: Es dreht um die Mitte der aktuellen Auswahl. Für einen anderen Drehpunkt wählst du die Ebene aus, drückst Option R auf dem Mac oder Alt R unter Windows und ziehst das Ziel an die neue Stelle. Ziehst du knapp außerhalb der Ebenengrenzen, drehst du sie, und mit Shift rastet der Winkel in 15-Grad-Schritten ein. Der Figma-Hilfeartikel zu Rotation und Position behandelt jeden dieser Punkte.

Ein SVG-Detail aus MDN: Bei SVG-Elementen ist der Anfangswert von transform-origin 0 0, außer bei svg-Wurzelelementen und svg-Kindern von foreignObject, die 50% 50% verwenden. Eine Drehung, die bei einer HTML-Box um die Mitte zu laufen scheint, kann bei einer SVG-Form von der Ecke aus erfolgen.

Scale

scale(2) verdoppelt ein Element, scale(0.5) halbiert es. Die Argumente sind Faktoren ohne Einheit, und wenn das zweite fehlt, entspricht es dem ersten, scale(2) ist also dasselbe wie scale(2, 2). scale(2, 0.5) streckt horizontal und staucht vertikal.

In Figma ist das Scale-Werkzeug das nächste Bedienelement, aktiviert mit der Taste K. Ein Ankerfeld legt fest, von welcher Seite aus das Objekt skaliert wird, und du kannst den Skalierungsfaktor oder die Maßfelder verwenden. Laut Figma-Hilfeartikel behält das Werkzeug das Seitenverhältnis bei und ignoriert die Constraints verschachtelter Ebenen, um sie proportional zu skalieren. Beim Skalieren einer Textebene ändert sich auch die Schriftgröße, anders als bei einer einfachen Änderung von Breite und Höhe.

Das ist der wichtigste Unterschied. Wenn du in Figma die Größe eines Frames änderst, ändern sich seine Abmessungen, und die Constraints reagieren. scale() in CSS multipliziert die Größe des Elements mit einem Faktor, und es gibt keine Constraints, die reagieren könnten. Der Artikel zum Scale-Werkzeug ist die Referenz für die Figma-Seite.

Spiegeln ist ein verwandter Fall. Figma spiegelt eine Ebene mit Shift H (horizontal) oder Shift V (vertikal), und der Hilfeartikel erwähnt, dass Figma für Spiegelungen die CSS-Transformation matrix verwendet, auch wenn du später eine Drehung anwendest. Eine gespiegelte Ebene kann im Dev Mode daher als matrix()-Wert erscheinen statt als rotate() oder scale().

Skew

skew(30deg, 20deg) kippt ein Element um 30 Grad entlang X und 20 Grad entlang Y, und skewX() und skewY() übernehmen jeweils eine Achse. Skew nimmt Winkel, keine Faktoren.

Im Eigenschaftenbereich von Figma gibt es kein Skew-Feld. In der Figma Community gibt es mehrere Skew-Plugins, und Entwickelnde können die Transformationsmatrix der Ebene über die Plugin API setzen. Die Dokumentation zu relativeTransform sagt, dass sich eine Ebene durch passende Matrixwerte kippen lässt, und warnt, dass der Skew nicht im Eigenschaftenbereich erscheint und für Personen, die mit einem gekippten Knoten arbeiten, verwirrend sein kann. Wenn du in einer Datei eine gekippte Form findest, prüfe, wie sie dorthin gekommen ist, bevor du sie von Hand bearbeitest.

CSS hat dieselbe Lücke in anderer Form: Es gibt keine einzelne Eigenschaft skew. translate, rotate und scale existieren als eigenständige Eigenschaften, aber zum Kippen braucht es die Eigenschaft transform.

Reihenfolge der Transformationen und was eine Transformation nicht ändert

Hat eine transform-Liste mehrere Funktionen, werden sie von links nach rechts angewendet, und jede richtet einen neuen Koordinatenraum für die nächste ein. Die Reihenfolge ändert das Ergebnis:

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

Gleiche Werte, andere Positionen. Wenn du einen CSS-Stapel jemals von Hand in Figma nachbaust, wende die Schritte in derselben Reihenfolge an, sonst landet die Ebene woanders.

Auch die eigenständigen Eigenschaften haben eine feste Reihenfolge: zuerst translate, dann rotate, dann scale und zuletzt transform.

Zwei Nebenwirkungen übersieht man leicht. Ein transform-Wert ungleich none erzeugt einen Stapelkontext und macht das Element zum umgebenden Block für Nachfahren mit position: fixed und position: absolute. Außerdem lässt sich nicht jedes Element transformieren: Nicht ersetzte Inline-Boxen können es nicht. Wenn eine Transformation nichts zu bewirken scheint, prüfe zuerst den display-Wert. Wie Container ihre Kinder anordnen, bevor eine Transformation greift, steht in der Zuordnung von Flexbox zu auto layout.

Fazit

Translate, rotate und scale haben je ein Zuhause in Figma: die Felder X und Y, das Rotationsfeld und das Scale-Werkzeug. Skew hat keines und braucht ein Plugin oder die Plugin API. Prüfe drei Dinge, wenn du eine Transformation zwischen beiden Werkzeugen überträgst: das Vorzeichen der Rotation (in Figma ist positiv gegen den Uhrzeigersinn, in CSS im Uhrzeigersinn), den Ursprung (beide nutzen standardmäßig die Mitte, und beide lassen sich verschieben) und die Reihenfolge der Operationen. Für die Layout-Seite derselben Zuordnung lies CSS Grid zu Figma-Ebenen.

Häufig gestellte Fragen

Hat Figma ein Bedienelement für Skew?

Nicht im Eigenschaftenbereich. Skew kommt über Community-Plugins oder über das Setzen der Transformationsmatrix mit der Plugin API. Die Figma-Dokumentation warnt, dass ein so gesetzter Skew nicht im Bereich angezeigt wird.

Warum erscheint eine Rotation von 90 Grad in Figma im Dev Mode als rotate(-90deg)?

Figma behandelt einen positiven Winkel als gegen den Uhrzeigersinn, CSS als im Uhrzeigersinn. Der Figma-Hilfeartikel sagt, CSS verwende die entgegengesetzte Richtung, deshalb kehrt der Dev Mode das Vorzeichen um.

Was ist der Standardwert von transform-origin in CSS, und was verwendet Figma?

CSS verwendet standardmäßig 50% 50%, die Mitte des Elementrahmens. Figma dreht standardmäßig um die Mitte der aktuellen Auswahl, und du kannst den Punkt mit Option R auf dem Mac oder Alt R unter Windows verschieben.

Ist scale() in CSS dasselbe wie die Größenänderung einer Ebene in Figma?

Nicht ganz. scale() multipliziert die gezeichnete Größe mit einem Faktor ohne Einheit. Das Scale-Werkzeug von Figma (K) kommt dem am nächsten: Es behält das Seitenverhältnis bei und skaliert verschachtelte Ebenen proportional, einschließlich der Schriftgröße von Text.