Before you start
Who can use this feature
Only people with can edit access to the file can make changes to a layer's position, dimensions, or alignment.
Every shape, text object, or image you add to the canvas has its own layer. This allows you to adjust each layer individually as you create cohesive and complex designs.
In this article, we'll show you how to adjust the alignment, position, dimensions, and rotation of your layers. This applies to individual layers, as well as frames, components, groups, and selections.
You'll find most of these properties at the top of the Design panel in the right sidebar. You can also adjust a number of these properties on the canvas itself.
Alignment
Alignment tools allow you to arrange layers on the canvas in relation to one another. Figma will determine your layer's alignment based on your specific selection.
- Select one object or layer: Figma will align the layer to its parent. This could be a group, frame, or the containing frame of a component.
- Select multiple layers: Figma will align layers in relation to each other, or in relation to their parent frame, or in relation to selected layers in an instance.
Use the alignment controls in the right sidebar to align an object to its parent layer, or to align multiple objects to one another:
- Align left
- Align horizontal centers
- Align right
- Align top
- Align vertical centers
Alternatively, use keyboard shortcuts:
| Action |
Keyboard shortcut |
|
Align top
|
AltW
|
|
Align left
|
AltA
|
|
Align bottom
|
AltS
|
|
Align right
|
AltD
|
|
Align vertical centers
|
AltV
|
|
Align horizontal centers
|
AltH
|
Hold Shift and click the alignment controls to align multiple objects as a group to their parent frame.
Snap to settings
When resizing an object, moving layers, or moving vector points, use the snap to settings to help align them to other elements on the canvas. A red guide appears on the canvas as a visual indicator.
- Snap to geometry: Used only in vector edit mode. When this setting is on, clicking and dragging a vector point will align it to other vector points.
- Snap to objects: Align the centers and outermost points of different objects.
- Snap to pixel grid: Align objects to an underlying grid to prevent misaligned pixel errors when exporting elements. The pixel grid does not need to be visible for this setting to work.
To turn Snap to settings on and off, open a Figma design file and go to > Preferences. You can also find these settings in the quick actions menu.
Snap to settings are applied across your Figma design files.
If you have Snap to geometry or Snap to objects enabled, hold Control to temporarily disable them.
To temporarily disable Snap to pixel grid with Control, make sure you’re in vector edit mode and zoomed in to the canvas. To know if you’re zoomed in enough, turn on the pixel grid ⇧ Shift ' and zoom in until the grid is visible. Note that the pixel grid does not need to be toggled on to use this shortcut.
Tip! If you’ve toggled on Ctrl+click opens right click menus, click and hold the object before using Control to temporarily disable snapping. This prevents accidentally opening the secondary menu.
Distribution
Use distribution to create equal space between layers in a selection. You must have more than one layer or object selected.
When using distribute, Figma will retain the position of the outermost objects or layers:
- Distribute horizontal spacing: both the objects or layers on the outer left and outer right will maintain their position.
- Distribute vertical spacing: both the top and bottom objects or layers will maintain their position.
- Tidy up (smart selection) ↓
Tidy up
Use tidy up to quickly align layers on one-dimension as rows or columns, or combine rows and columns to create two dimensional layouts.
You can then adjust the horizontal and vertical spacing between the objects in your selection with smart selections. Learn how to use smart selection →
Depending on your selection, you'll see one of the following options:
- Tidy up vertical selection (one dimension)
- Tidy up horizontal selection (one dimension)
- Tidy up (two dimensions)
One dimensional selections
For a selection on either the horizontal or vertical axis (one dimension), Figma will arrange objects based on the axis they overlap on.
Objects on the x axis will have only their horizontal spacing adjusted and objects on the y axis will have only their vertical spacing adjusted.
Figma will use the most common spacing in the selection to set the Space between value.
Note: When you use tidy up on a one-dimensional selection, Figma won't automatically align the objects along both axes, but you can use the alignment tools in the right sidebar l to make any further adjustments.
Two dimensional selections
When using tidy up on objects in two dimensions, like a grid, the tidy up process is much stricter. Figma will adjust both the vertical and horizontal spacing between objects.
The vertical and horizontal spacing will depend on their starting position and can be the same or unique. Once Figma tidies up the layers, you can adjust the vertical and horizontal spacing
Unlike distribute, which repositions objects within the original selection's bounds, tidy up arranges all objects into a grid that aligns with the top-left corner of your selection.
Distribute or tidy up
If you're using tidy up on a one dimensional selection, you'll notice that this functions similarly to the distribute function. You can think of tidy up as distribute with some extra logic.
The main purpose of the tidy up function is to arrange layers so they meet both the criteria for a smart selection. That is, be an equal distance apart and overlap on either axis.
- Distribute will only set a uniform distance between layers, it doesn't require layers to overlap on either axis. Tidy up will perform both, if required.
- Tidy up lets you align objects along both axis at the same time. Distribute only works along one axis at a time: distribute horizontal spacing or distribute vertical spacing.
For both distribute and tidy up, Figma will show the space between in the or field. This is based on the most common space between value (the mode).
Note: If you have Snap to pixel grid enabled, you may see subtle discrepancies in spacing between layers. Figma will allow up to 1px of rounding.
For example: if you have four layers and the spacing between most of the layers is 20, but there is only 19 space between two of the layers, Figma will still show the space between as 20.
When Snap to pixel grid is disabled, Figma may distribute layers with decimal spacing values. For example: 7.5.
Position
You can adjust the position of layers in the canvas along any of the two dimensions or axes: horizontal (X axis) and vertical (Y axis).
Figma represents a layer's position on the canvas using X and Y coordinates. These refer to the top-left corner of the layer's bounds.
- Open the Design panel in the right sidebar.
- Use the
X and Y fields to adjust the layer's coordinates.
- You can also use basic mathematical equations (
- + * / ^ () ) to quickly adjust the values of the X and Y co-ordinates. You can add an equation before or after the existing value, or replace it with a new equation entirely. Learn more about equations ↓
Note: If you rotate a layer in the canvas, Figma will base the X and Y co-ordinates of that layer on the original top-left corner of the layer's bounds.
Nudge layers
Use your arrow keys to nudge the position of your layers. Figma allows you to set two default nudge amounts: small nudge and big nudge.
By default, small nudge is set to 1 and big nudge set to 10. Both of these values are in resolution-independent points. Set small and big nudge values →
Use arrows to nudge layers
Use the arrow keys to nudge your selection. The arrow keys will use your small nudge settings, hold down Shift to use the big nudge settings instead.
- ← Left
- ↓ Down
- ↑ Up
- → Right
Dimensions
Every layer in the canvas will have its own dimensions. To view a layer's dimensions:
- Select the layer in the canvas or layers panel.
- View the dimensions in the blue label under the layer's bounding box.
- You can also view the dimensions of any layer using the
W and H fields in the right sidebar.
Select a layer to make changes to a layer's dimensions. There are then a few methods:
- To adjust the width of a layer: hover over the layer's left or right bounds until the appears. Click and drag to resize.
- To adjust the height of a layer: hover over the layer's top or bottom bounds until the appears. Click and drag to resize.
- To adjust both the width and height of a layer: hover over any corner of the layer's bounds until the appears. Click and drag to resize.
- Adjust both the
W and H fields in the right sidebar.
Note: It's not possible to adjust the dimensions of a group itself. If you update the dimensions of a group, Figma will update the dimensions of the layers inside the group instead.
Constrain proportions
The button allows you to constrain the dimensions of the layer to the current proportion. You can find this setting next to the dimension settings (W and H) in the right sidebar.
When this setting is on, Figma will retain the original width to height ratio anytime you resize the layer in the sidebar. If you update either of the W and H fields, Figma will update the other accordingly.
Tip! Hold down the Shift key when drawing to create perfect squares, circles and polygons. Figma will toggle the constrain proportions setting on in the right sidebar.
By default, Figma will draw a shape from the top-left. You can hold down the following modifier key to draw a shape from the center instead.
Mac: ⌥ Option Windows: Alt
Hold down both modifier keys to do both actions.
Rotation
Rotate individual layers, like objects, frames and groups, or a selection of layer. Figma will use the horizontal and vertical center of your selection as the point of rotation.
Every layer you add to the canvas will have a default rotation of 0°. You can rotate your selection 180° in each direction:
- A positive angle goes counterclockwise towards
180°
- A negative angle goes clockwise towards
-180°
Once you pass 180 in either direction, Figma will count down towards 0° in that direction. For example: going 15° past 180° will give you an angle of -165°.
Caution: Figma uses the rotate CSS transform property to apply rotation to a layer or selection. The CSS transform property uses the opposite directions for determining the angle of rotation, which means you'll see the opposite angle in the Inspect panel.
For example: if you rotate a layer 90° in the Design panel, Figma will translate this to transform: rotate(-90deg) in the Inspect panel.
Right sidebar
Find the rotation field at the top of the Design panel in the right sidebar.
- Select the layer(s) or object(s) you want to rotate.
- In the right sidebar, use the field to enter your desired rotation.
Canvas
- Hover just outside one of the layer's bounds until the icon appears.
- Click and drag to rotate your selection:
- Drag clockwise to create a negative angle (towards
-180° ).
- Drag counterclockwise to create a positive angle (towards
180° )
- Hold down Shift to snap rotation values to increments of 15.
Note: Figma won't rotate any effects you've applied to a layer or selection.
Flip layers
Another way to replicate rotating layers is to use the Flip horizontal and Flip vertical transformations.
Use the right-click menu to apply a flip transformation, or the keyboard shortcuts:
- Flip horizontal: ⇧ Shift H
- Flip vertical: ⇧ Shift V
Note: Figma uses the matrix CSS transform property for flip transformations. You can view the CSS values of the transformation in the Inspect panel of the right sidebar.
Once you have applied a flip transformation to a selection, Figma will continue to use the matrix transformation CSS property, even if you later apply rotation to your selection.
Every shape, text object, or image you add to the canvas has its own layer in the canvas. This allows you to adjust each layer individually as you create cohesive and complex designs.
You can adjust the position of layers in the canvas along any of the three dimensions or axes: horizontal (X axis), vertical (Y axis), and depth (Z axis).
Unlike the X and Y axes, there isn't a specific field you can adjust for the Z axis. Instead, you adjust the depth (Z axis) or hierarchy of a layer by changing the order in the Layers panel.
This allows you to move layers to the front or back of the canvas, as well as move layers in or out of groups or frames. Learn more about relationships between layers →
The Layers panel in the left sidebar shows you every layer on the current page and reflects the order your layers are currently stacked: the top layer is at the front and the bottom layer is at the back.
Tip! If you're familiar with CSS, the layer's depth corresponds to an object's z-index.
Change layer order
There are a few ways to adjust a layer's order.
Tip! If you make any changes you're not happy with, you can undo the action using the keyboard shortcut:
- Mac: ⌘ Command Z
- Windows: Ctrl Z
Adjust values
Equations
Some fields in Figma accept equations, this includes the position, dimension, and rotation fields.
You can use equations to resize layers by adding +, subtracting -, multiplying *, or dividing / the existing value. You can also use brackets ( ) within the field for more complex equations, or ^ for creating exponents.
We've added some examples below but you can use any numbers:
+ 10 to add 10 to the current value- 20 to remove 20 to the current value*2 to multiple the current value by 2/4 to divide the current value by 4^2 to create an exponent of the current value to the power of 2(𝑥/2)+6 to divide the current value in two and add 6 (𝑥=current value)Mixed+100 to add 100 to two or more selected objects with different values
Equations can also be applied to a mixed selection of values. When an equation is entered into the position, dimension or rotation fields, the change will apply to all selected layers.
Note: You'll need to edit the field and add the equation to the existing number. If you only select the field and add the equation, Figma will replace the existing number instead.
Scrub fields
In addition to manually entering values, you can also "scrub" fields. Scrubbing allows you to quickly adjust a field's value by dragging your active mouse or touchpad.
You can use this for position, dimensions, and rotation fields, as well as other layer properties and settings in the right sidebar.
-
Select the layer or object on the canvas.
-
Hover over the label next to the input field until the scrubbing cursor appears. You can also hover the input field itself and hold down the modifier key:
- Mac: ⌥ Option
- Windows: Alt
-
Click on the icon and drag to change the input value. Drag the cursor left to decrease the value, or drag it right to increase.
-
Change the speed that you scrub the field by moving the cursor towards the top of the screen to increase the scrubbing speed, or towards the bottom of the screen to reduce it.
You'll see a notification at the bottom of the screen for the current speed, as well as a difference in the cursor's width. There are four scrubbing speeds: 2x, 1x, 1/2, and 1/4.
Tip! Figma will continue scrubbing the field, even if your cursor goes off the screen. This works if you're using Figma in the browser or desktop app.
