How to Rotate in Figma: Quick and Easy Tutorial

Rotation in Figma is one number on a layer. Not a transform matrix, not a separate tool, just a field near the top of the Design panel that says how many degrees the thing is turned.

Every layer starts at 0 degrees. You change it by typing into that field or by dragging near a corner on the canvas, and the layer’s width and height stay exactly where they were. That’s what makes it useful for lining up icons, angling text, or orienting a duplicated asset without rebuilding it.

One thing to flag before anything else. As of Figma’s October 2025 accessibility update, Cmd or Ctrl plus Alt plus Up or Down rotates the selected layer by 1 degree. It used to reorder layers (Figma, 2025). If your muscle memory predates that, you’ve probably already spun something by accident.

What Is Rotation in Figma?

Select an object, a frame, a group, or a mixed selection, and this property turns all of it around a fixed angle. Nothing about the size changes.

Because Figma stores the value as a plain number rather than a full transform matrix, you can read it back weeks later and know immediately what it means.

The control sits at the top of the Design panel in the right sidebar. Hover just outside a layer’s corner on the canvas and the cursor switches to the curved rotation arrow.

New layers sit at 0 until you touch them, and that number moves independently of width and height.

What Rotation Is Not

Rotating is not resizing. The angle changes, the W and H fields don’t.

Changing an object’s size uses a related but separate control, described in a walkthrough on scaling layers in Figma.

Corner radius handles are a different thing again, as is the resize handle that stretches a layer along one side. Easy to grab the wrong one when you’re zoomed out.

If you came over from Illustrator, there’s no R key equivalent here. Illustrator gives rotation its own dedicated tool. Figma just files it under the general transform properties.

Worth knowing early: Figma’s documentation notes that applied effects do not rotate with the layer, so a drop shadow keeps pointing the same direction even after the shape underneath it turns.

How Far Can an Object Be Rotated in Figma?

The field runs from -180 to 180, starting at 0 on every new layer.

Push past 180 in either direction and Figma counts back down instead of climbing toward 360. Type 195 and it gets stored as -165.

The same wraparound applies clockwise, which is why typing 270 or 360 never does what you’d expect.

• Every new layer starts at 0 degrees, per Figma’s help documentation
• The range runs 180 degrees counterclockwise (positive) to -180 degrees clockwise (negative)
• 195 degrees is stored as -165 degrees
• Holding Shift while dragging snaps to 15 degree increments
• A 90 degree rotation in the Design panel exports as transform: rotate(-90deg) in Dev Mode

In practice that range covers everything. I’ve never hit a layout need the field couldn’t hold.

How Do You Rotate an Object in Figma?

Type a number into the Design panel, or drag a corner on the canvas. Both write to the same property, so the layer ends up identical either way.

Rotating From the Design Panel

1. Select the layer, frame, or group you want to turn.
2. Open the Design panel in the right sidebar and find the rotation field near the top.
3. Type an exact degree value, or add a plus or minus sign for a quick adjustment.

This is the only way to reliably land on something like 12.5 degrees. Dragging gets you 12.4 or 12.7 and then you fix it in the panel anyway.

If you’re repeating adjustments across a lot of layers, it’s worth skimming the full list of Figma keyboard shortcuts once.

Rotating by Dragging on the Canvas

Hover just outside a corner until the rotation cursor appears, then click and drag. Dragging clockwise produces a negative angle and counterclockwise produces a positive one, which trips people up constantly.

• Hold Shift to snap the drag to preset angle increments
• Release once it looks right, then fine-tune the number in the Design panel

Zoom in first. The corner target is small, and this guide on zooming controls in Figma covers the fastest ways to get in close.

Rotating Multiple Objects at Once

Select several layers and rotate them, and they pivot around one shared point rather than each spinning in place.

Figma treats the whole bounding box as a single unit, so an object sitting far from the center travels a long way while one near the middle barely moves. That’s usually the surprise.

Group the objects first if you want the cluster to hold its internal spacing exactly as drawn.

How Do You Rotate an Object Around a Specific Point?

By default the pivot sits at the horizontal and vertical center of your selection. It doesn’t have to stay there.

• Press Option R on a Mac or Alt R on Windows with the object selected, and a small target icon appears
• Click and drag that target to wherever you want the pivot
• Rotate normally, by corner drag or by typing a value, and the object swings around the new point

A clock hand is the obvious case. Fanning a set of icons out from one shared corner is the other one I reach for it.

If the target lands in the wrong spot, undoing the change in Figma brings the pivot back before it affects the rotation.

The pivot resets to the selection’s center as soon as you select something else, so the adjustment only ever applies to the current selection.

How Do You Rotate Text, Frames, and Groups in Figma?

The control doesn’t change across layer types. What happens underneath does.

Text and vectors usually rotate cleanly. Frames and groups have a few habits worth knowing before you commit to an angle.

Rotating Text and Vector Shapes

Text layers rotate like anything else, with one catch. A text box set to auto-resize can reflow oddly once it’s sitting at a steep angle.

• Fixed-size text boxes rotate without any reflow risk
• Auto-width and auto-height boxes are the ones to watch

Locking the box to a fixed size before rotating avoids the problem entirely, a setting covered in more detail in this guide on how to edit text in Figma.

Vector shapes keep their anchor point structure intact through a rotation. That’s not always true once you’ve combined shapes into a single path.

Rotating Frames

A frame rotates as a container. Every child layer turns with it and keeps its relative position.

Whether the whole thing turns together comes down to what you actually selected, the frame layer or an object inside it.

Nested frames rotate independently of their parent unless both are selected.

Rotating Groups

Groups behave like frames here, turning as one shape around the group’s own bounding box center.

• Rotate the whole group to keep every child’s spacing exactly as drawn
• Ungroup first if you need to angle just one shape inside it

Breaking a group apart is often the simpler route, and the steps for that are covered in this guide on how to ungroup in Figma.

How Do You Rotate an Image in Figma?

Rotating an image means one of two things, depending on whether you’re turning the image layer or the picture sitting inside a fill. They live in different places, and only one of them lets you pick an angle.

Rotating the Image Layer

An image placed as its own layer rotates through the same corner drag or Design panel field as a rectangle would.

• No angle restrictions, so any value between -180 and 180 degrees works
• The rotation cursor appears the same way it does on a shape or frame

Whenever the exact angle matters, this is the one to use.

Rotating the Image Fill in 90 Degree Steps

Image fill rotation moves in fixed 90 degree steps. No field, no typing.

Open the Fill section in the Design panel, click the image thumbnail, then click the rotate icon inside the popup. Each click adds another 90 degrees clockwise, and four clicks put you back where you started.

For anything in between, switch the fill mode to crop instead. That full process is covered in this walkthrough on how to crop in Figma.

Can You Rotate the Contents of a Component Instance?

No. Figma has no rotation override for layers nested inside an instance.

That restriction sits alongside a fairly short list of what instances can and cannot change.

What instance overrides do support:

• Text properties, including font, size, and alignment
• Fill and stroke values, including color and opacity
• Shadow and blur effects
• Layer visibility and export settings

Rotation is not on that list, according to Figma’s own support team, who confirmed the limitation directly in the community forum.

Gradient fill angles hit the same wall inside an instance.

The standard fix is to build a rotated variant instead of fighting the override system. This guide on how to use components in Figma explains how variants and instances relate to each other before you try it, and the setup process itself is covered in this walkthrough on how to create variants in Figma.

Creating a second variant at the exact angle you need keeps everything else intact.

Direct rotation control on instance layers might show up eventually. There’s no public timeline for it as of now.

Why Does Figma Rotate the Opposite Direction From CSS?

Figma and CSS measure the same angle in opposite directions. It’s a small thing that causes a surprising amount of trouble at handoff.

A positive value in the Design panel turns an object counterclockwise. A positive value in a CSS rotate function turns it clockwise.

Figma’s own documentation confirms it applies the CSS rotate transform property under the hood, then flips the sign so the visual result on the canvas still matches what you set.

Rotate a layer -30 degrees in the Design panel and Dev Mode displays the CSS as transform: rotate(30deg).

Copy the raw number from the Design panel straight into a stylesheet without flipping the sign and you get a mirrored angle. Read the value from Dev Mode instead, and this guide to the Figma Dev Mode workflow covers the rest of what gets translated automatically.

Flips work differently again. Figma applies them through the matrix CSS property rather than rotate, and once a layer has been flipped, later rotations keep exporting through that same matrix property.

The broader handoff process between design and code, beyond this one sign flip, is covered in this breakdown of Figma developer handoff practices.

Which Rotation Method Should You Use in Figma?

Most work never leaves the Design panel field or a corner drag. The other options exist for narrower situations, and the right one depends on how much precision the moment actually calls for.

Native Rotation vs Plugin Rotation

Native rotation needs no installation, behaves identically in every file, and handles the vast majority of everyday design work.

Plugins are for the edges:

• Custom batch and pivot controls beyond the built-in rotation origin tool
• Automatic rotation across a set of duplicated layers at set increments

The trade you’re making is a dependency you don’t control. Plugins stop getting updated, and then you’re rebuilding something on a deadline.

Free Transform brings a Photoshop-style scale, rotate, and skew workflow into Figma as a Community plugin. Figma Looper, which is open source, increments rotation automatically across a set of duplicated layers.

How Do You Animate Rotation in a Figma Prototype?

Smart Animate reads a layer’s rotation value in the start frame and the end frame, then tweens between the two. You never set the animation itself, only the two states.

Setup starts inside the Prototype tab, covered in more depth in this walkthrough on how to prototype in Figma.

What Smart Animate needs to work:

• Matching layer names across both frames
• The same layer type in each frame, a rectangle staying a rectangle rather than becoming text
• A Smart Animate transition selected on the prototype connection

Figma’s own help documentation confirms Smart Animate takes a layer’s rotation and orientation into account alongside position, size, and fill changes.

A whole group can turn around one shared anchor point too, not just a single object.

Easing curve and duration on the connection control how the turn feels, not just how far it travels. Worth a minute of fiddling.

Smart Animate is one piece of a larger movement toolkit, laid out fully in this guide on how to animate in Figma.

How Do You Create a Full 360 Degree Rotation in Figma?

Typing 360 into the rotation field does nothing. Figma stores that value as 0.

A continuous spin has to be built out of variants. Start with building a component in Figma, since a single rotated layer can’t loop past its own wraparound point.

1. Build a component with several rotated variants, commonly at 0, 90, 180, and 270 degrees.
2. Connect each variant to the next using an After Delay trigger in the Prototype tab.
3. Set the transition to Smart Animate, then connect the final variant back to the first to loop the spin.

A commonly referenced community tutorial for building a loading animation takes a related approach, duplicating a frame four to six times and rotating its contents roughly 30 degrees further in each copy rather than building out separate rotated variants.

Text layers have to be converted to vectors first, or the rotation won’t animate smoothly between variants.

Community threads on Figma’s own forum confirm the same variant-and-loop approach works for continuous spinners, dials, and loading icons alike.

When Does Rotation Not Work as Expected in Figma?

Rotation doesn’t quietly coexist with a few other features. It breaks them. Knowing where those conflicts sit saves a rebuild later.

Auto Layout and Layout Grids

Layout grids stop rendering the moment a frame’s rotation moves off 0 degrees, confirmed directly by Figma’s support team on its community forum.

There’s no fix, only a workaround. Keep the frame itself at 0 and rotate the objects inside it, because grids stay broken on a rotated frame no matter when they were set up. The grid setup process itself is covered in this guide on how to make a grid in Figma.

Auto layout frames run into a related issue. Children can misalign once the parent frame sits at an angle, an effect Figma’s own team reproduced at a -90 degree rotation.

Working through how to use auto layout in Figma first makes it easier to tell whether a misalignment traces back to rotation or to the layout settings themselves.

• Rotate the frame back to 0 degrees to restore correct auto layout alignment
• Apply rotation to the objects inside an auto layout frame instead of the frame itself, when possible

Component Variants and Rotation

The usual mix-up is building rotated variants by turning the frame itself. Switch the instance and it looks like nothing happened.

Rotate the shape or vector inside the frame instead, not the frame or the variant boundary. Experienced users on Figma’s own community forum have confirmed the distinction.

It follows from the override restriction above. An instance can’t override a nested layer’s rotation, so the angle has to already exist inside each variant before it’s built.

Gradient Fills Inside Components

The gradient override limitation mentioned earlier has a manual fix worth knowing.

1. Create a plain rectangle the same size as the component
2. Copy the gradient fill from the component and paste it onto the rectangle
3. Rotate the rectangle to the angle needed, then flatten it
4. Copy the flattened fill back into the component

None of this is a setting, so the steps come back around any time the gradient angle changes.

What Changed With Figma’s Rotation Keyboard Shortcut?

As of Figma’s October 2025 accessibility update, Cmd or Ctrl plus Alt plus Up or Down now rotates the selected layer by 1 degree instead of reordering it in the layer stack.

Figma’s support team explained the old shortcut was the least-used way to bring a layer forward or send it backward, so the company reassigned it to rotation and moved layer ordering to Cmd or Ctrl plus the bracket keys.

• Old shortcut: Cmd/Ctrl+Alt+Up or Down moved a layer forward or backward in the stack
• New shortcut: Cmd/Ctrl+Alt+Up or Down now nudges rotation by 1 degree
• Replacement for layer order: Cmd/Ctrl+[ and Cmd/Ctrl+]

Figma’s own accessibility announcement frames the broader release as over 15 new keyboard-only controls added across its products.

The replacement bracket shortcut doesn’t register correctly for some non-English keyboard layouts, a problem users have reported directly to Figma’s support team.

Remapping the old combination inside the operating system’s own keyboard settings works for some people, though several report it doesn’t stick once they’re back inside Figma.

FAQ on How To Rotate In Figma

Does Rotating a Shape Change Its Corner Radius?

No. Rotation and corner radius are separate properties on the same layer, so turning a shape leaves its rounded corners exactly as set.

The corners just rotate along with the shape’s edges instead of staying axis-aligned.

Does Rotating an Object Change the Width and Height Shown in the Design Panel?

No, the W and H fields keep reporting the object’s own dimensions regardless of angle.

What changes is the bounding box highlighted on the canvas, which expands to fit the rotated shape without altering the stored width or height values.

Why Doesn’t the Rotation Cursor Appear When Hovering Over a Corner?

This is a known interface quirk reported by users on Figma’s forum, where the cursor flickers between resize and rotate or fails to switch at all.

Moving the mouse further outside the corner, past the resize handle, usually sorts it out.

Can You Rotate a Boolean Group the Same Way as a Single Object?

Yes, a boolean result rotates as one unit just like any shape or frame.

The order of operations still matters though. Rotating each source shape before combining them can produce a different outline than rotating the finished boolean afterward.

Can Rotation Be Automated Through the Figma API Outside the Plugin Sandbox?

The REST API can read a layer’s stored rotation value from a file’s JSON, but it cannot set or change that value.

Writing a new rotation requires the plugin API, which runs inside Figma and edits relativeTransform on the node.

Does Smart Animate Work if Only Rotation Changes and Nothing Else?

Yes. Smart Animate isolates whichever properties differ between two matched layers, so a rotation-only change animates smoothly even when position, size, and fill stay identical across both frames.

Layer names still have to match exactly for it to fire.

Can You Quickly Reset an Object’s Rotation Back to 0 Degrees?

Figma has no dedicated one-key reset shortcut for rotation.

Typing 0 directly into the rotation field in the Design panel is the fastest method, and it works the same way whether one layer or several are selected.

What Should You Master First in How To Rotate In Figma?

Start with the Design panel field. Typing an exact value builds the habit of checking a number instead of eyeballing an angle, and that habit carries into everything else you do with transforms.

• Design panel field for exact degree values
• Canvas corner drag when you just need it to look right
• Option R or Alt R for a custom pivot point
• Cmd or Ctrl plus Alt plus Up or Down for 1 degree nudges

That keyboard nudge from the 2025 accessibility update moves in 1 degree steps, fifteen times finer than the 15 degree snap increment used for Shift-drag on the canvas, which makes it the more precise of Figma’s two default increments.

Once rotation stops needing thought, layering a mask on a rotated shape is the next transform skill worth building, covered in this walkthrough on how to mask in Figma.