This allows the button to grow and shrink as we change the label text. Button: Each button is a horizontal auto layout.In our example below, there are four levels of auto layout: When you nest an auto layout frame, the nested frame will have both parent and child properties.

This allows you to combine horizontal and vertical layouts to create complex interfaces. You can nest an auto layout frame within another auto layout frame. Learn more about parent, child, and sibling relationships → Nest auto layout frames Or, to add objects to a nested auto layout: Use the modifier key to bypass Figma's default behavior and add larger objects to an auto layout. If any of the object's dimensions are larger than the parent frame, you won't see the option to add it to the auto layout. Note: The object's size determines if it can be added to the auto layout frame. The other layers in the smart selection will move to accommodate it. Figma will copy the layer and paste it next to the original layer.Open the main menu and search for Duplicate Selection in Place.Duplicate the layer using any of the following methods:.Hold down Shift and click to select more layers. Click the pink handle on the center of a layer to mark it.You can duplicate more than one layer at a time in either a 1D or 2D selection. You can create a duplicate of any layer within a Smart selection. If you would like to swap one layer's position for another, you can hold down the Command (Mac) or Ctrl (Windows) key.The default behavior when rearranging 2D selections, is to add new layers to an existing column or row. 2D Smart selections work more like lists within lists, versus a perfect grid layout.Resize to fit is in the positioning section of the right sidebar. If you are using Smart selection with frames, you can use the Resize to fit to adjust the frame to the size of the layers within it.Rearranging layers in the selection doesn't change the layer hierarchy in the Layers panel.Release the cursor to apply your changes.A tooltip above your cursor shows the current space between layers, in pixels. Click and drag the handle to adjust the space between layers.An arrow will appear where the cursor was. Hover over one of the smart handles between layers.You can adjust spacing on the canvas using the smart handles, or use the space between field in the right sidebar. Double-click again to select all layers in the selection.Īdjust the vertical or horizontal space between layers in your selection. To mark all layers on the same axis in a 2D selection, hold Shift and double-click on any layer.To mark all layers in a 1D selection, double-click on any layer.To mark multiple layer, hold down Shift and click another layer to mark.Select a layer within the Smart selection to mark it for resizing.The smart handle for marked layers is a solid pink circle. You can choose which layers in the selection you'd like to adjust by marking them. This allows you to move, add or delete layers, without leaving the selection. Once you've made your selection, you can make changes to individual layers within your selection. These handles allow you to adjust the vertical or horizontal spacing between layers. When you hover over your Smart selection, additional pink handles will appear between each layer.Each distinct object has a pink ring in the center of it. Figma adds smart handles to your selection on the canvas.You can select individual layers, groups, frames, or components. Layers don't need to be the same size or shape. Select any layers you'd like to include in the Smart selection.Two dimensional (2D) Smart selection have layers that overlap on both axes, like layers arranged in a grid or table. One dimensional (1D) Smart selections have layers that overlap on one axis, like layers arranged in a column or row. If layers aren't an equal distance apart, you can use the Tidy up tool to rearrange layers and create a Smart selection.įigma supports smart selections in both one and two dimensions. To make a Smart selection, all layers must be an equal distance apart and overlap on either the x or y axis (1D), or both (2D). Smart selection reduces the need for tedious repetitious tasks, saving you time and allowing you to build and arrange layouts faster. Duplicate or delete layers from a selection and have other layers reflow.

Rearrange or reorder layers in a row, column, or grid layout.Create uniform or non-uniform grids from a selection of layers.

Uniformly adjust the vertical and horizontal spacing between layers.

Smart selection lets you quickly adjust the arrangement, or spacing between a selection of two or more layers. Anyone with can edit access can rearrange layers using smart selection

Click and drag on elements in order