CSS Transforms in Figma Terms: Translate, Rotate, Scale, and Skew

Introduction

Three of the four CSS transform functions have a direct Figma counterpart: translate() is the X and Y fields, rotate() is the rotation field, and scale() is closest to the Scale tool. skew() has no control in Figma's properties panel. The details that trip people up are the rotation sign, the origin point, and the order of operations.

This is a vocabulary map for people who read CSS and work in Figma. It covers what each function does according to MDN's transform reference and what the matching Figma control does according to Figma's help center. It says nothing about how any import tool converts transforms.

The four functions side by side

MDN lists the same four families: translate() moves an element, rotate() turns it around its origin, scale() multiplies its size, and skew() tilts it along the X and Y axes. In CSS they all live in one transform property as a space-separated list.

Translate: CSS offsets versus Figma X and Y

translate(12px, 50%) moves an element 12px along X and by half of its own height along Y. The second value is optional. Percentages refer to the size of the element's bounding box, not the parent. That makes translate(-50%, -50%) a common way to center something that has already been placed at the top-left corner of its container.

Figma has no offset field. The X and Y fields show where the layer sits, and they refer to the top-left corner of the layer's bounds. Typing a new value moves the layer there, and the fields accept basic math, so +12 added to the current X is the same nudge as translate(12px, 0). After you rotate a layer, Figma keeps basing X and Y on the original top-left corner, so the numbers do not jump around.

For how placement works in the first place, see CSS position in Figma.

Rotate and transform-origin

rotate() takes an angle in deg, turn, or rad. rotate(0.5turn) and rotate(180deg) are the same rotation. Positive values turn the element clockwise.

Figma goes the other way. In the rotation field at the top of the Design panel, a positive angle turns counterclockwise and a negative one turns clockwise. The field runs from -180 to 180 degrees, and a value past 180 wraps to the other side, so 15 degrees past 180 becomes -165. Figma's help article says CSS uses the opposite directions for the angle of rotation, and Dev Mode reflects that: a layer rotated 90 degrees in the canvas appears as rotate(-90deg). When you copy a number between the two, flip the sign.

The point you rotate around matters just as much. In CSS it is set by transform-origin, whose initial value is 50% 50% 0, the center of the element's box. Keywords are shorthand for percentages: left and top are 0%, center is 50%, right and bottom are 100%.

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

Figma's default matches: it rotates around the center of the current selection. To use a different pivot, select the layer, press Option R on Mac or Alt R on Windows, and drag the target to the new point. Dragging just outside a layer's bounds rotates it, and holding Shift snaps to 15 degree increments. The Figma help article on rotation and position covers each of these.

One SVG detail from MDN: for SVG elements the initial transform-origin is 0 0, except on root svg elements and svg children of foreignObject, which use 50% 50%. A rotation that looks centered on an HTML box can pivot from the corner on an SVG shape.

Scale

scale(2) doubles an element and scale(0.5) halves it. The arguments are unitless factors, and when the second one is omitted it equals the first, so scale(2) is the same as scale(2, 2). scale(2, 0.5) stretches horizontally and squashes vertically.

In Figma, the closest control is the Scale tool, which you activate by pressing K. An anchor box sets the direction the object scales from, and you can use the scale multiplier or the dimension fields. Figma's help article says the tool preserves aspect ratios and ignores the constraints of nested layers so it can scale them proportionally. Scaling a text layer also changes its font size, which differs from a plain width and height resize.

That's the main mismatch. Resizing a frame in Figma changes its dimensions and lets constraints respond. scale() in CSS multiplies the element's size by a factor, and it has no constraints to respond to. The Scale tool article is the reference for the Figma side.

Flipping is a related case. Figma flips a layer with Shift H (horizontal) or Shift V (vertical), and its help article notes that Figma uses the matrix CSS transform for flips, even if you apply rotation later. So a flipped layer can show up in Dev Mode as a matrix() value rather than a rotate() or scale() function.

Skew

skew(30deg, 20deg) tilts an element 30 degrees along X and 20 degrees along Y, and skewX() and skewY() handle one axis each. Skew takes angles, not factors.

Figma's properties panel has no skew field. The Figma Community has several skew plugins, and developers can set the layer's transform matrix through the Plugin API. The relativeTransform documentation says a layer can be skewed by setting the right matrix values, and warns that the skew is not surfaced in the properties panel and may confuse someone working with a skewed node. If you find a skewed shape in a file, check how it got there before you edit it by hand.

CSS has the same gap in a different form: there is no individual skew property. translate, rotate, and scale each exist as standalone properties, but skewing requires the transform property.

Transform order and what a transform does not change

When a transform list has several functions, they apply from left to right, and each one sets up a new coordinate space for the next. Order changes the result:

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

Same values, different positions. If you ever rebuild a CSS stack by hand in Figma, apply the steps in the same order, or the layer ends up somewhere else.

The standalone properties have a fixed order too: translate, then rotate, then scale, and finally transform.

Two side effects are easy to miss. A transform value other than none creates a stacking context and makes the element the containing block for position: fixed and position: absolute descendants. And not every element can be transformed: non-replaced inline boxes cannot. If a transform seems to do nothing, check the display value first. For how containers lay out their children before any transform is applied, see the flexbox to auto layout map.

Conclusion

Translate, rotate, and scale each have a Figma home: the X and Y fields, the rotation field, and the Scale tool. Skew does not, and it needs a plugin or the Plugin API. Check three things whenever you move a transform between the two tools: the rotation sign (Figma is counterclockwise-positive, CSS is clockwise-positive), the origin (both default to the center, and both can be moved), and the order of operations. For the layout side of the same mapping, read CSS Grid to Figma layers.

Frequently Asked Questions

Does Figma have a skew control?

Not in the properties panel. Skew comes from community plugins or from setting the transform matrix through the Plugin API. Figma's documentation warns that a skew set that way is not surfaced in the panel.

Why does a 90 degree rotation in Figma show as rotate(-90deg) in Dev Mode?

Figma treats a positive angle as counterclockwise, while CSS treats a positive angle as clockwise. Figma's help article says CSS uses the opposite direction, so Dev Mode flips the sign.

What is the default transform-origin in CSS, and what does Figma use?

CSS defaults to 50% 50%, the center of the element's box. Figma rotates around the center of the current selection by default, and you can move the point with Option R on Mac or Alt R on Windows.

Is CSS scale() the same as resizing a layer in Figma?

Not exactly. scale() multiplies the rendered size by a unitless factor. Figma's Scale tool (K) is the closest match: it preserves aspect ratio and scales nested layers proportionally, including text font size.