# Auto layout > Learn how to create dynamic designs with auto layout ## Overview **Auto layout** is a powerful feature you can use to create dynamic designs that adapt to the size of their contents. For instance, if you create a labeled button with auto layout, changing the button text will resize the button depending on the width of the text:

If you're familiar with auto layouts, for example the ones in Figma — auto layouts in Lunacy are pretty much the same. Here's a video explainer of the auto layout workflow in Lunacy: If you need more info, all the details about auto layouts are in this section. ### The basics The option to enable auto layout appears in the right panel whenever you select a frame:

In Lunacy, you can apply auto layout to: - **Layers in individual frames**. Auto layout settings apply to the layers inside the frame. Resizing these layers will affect the size of the frame (unless you specify otherwise). - **Several frames**. To do this, put several frames into a container frame, then add auto layout. You can then define the arrangement of the child frames relative to each other. Resizing the child frames will affect the container frame, but changes to layers inside the child frames won’t impact the container — unless the frames have auto layouts themselves, like in the following case. - **Several auto layout frames**. You’ll be able to change auto layout properties for each frame, as well as the container frame they are [nested](#nested-auto-layouts) in. The overall layout will dynamically respond to changes inside the child frames. #### Some things to keep in mind 1. All available auto layout properties are displayed in the right panel:

To view the settings for any auto layout frame, simply select it and refer to this section. 2. Before you apply auto layout to a frame, make sure you have coherently grouped or framed your layers, otherwise your layout might get messed up. In the example below, the top frame features two buttons with their text and background **ungrouped**. The bottom frame has **two groups** containing the elements for both buttons. Here’s how auto layout works for these frames:

Nothing unfixable by `Ctrl + Z`, but still an inconvenience. 3. You can add auto layouts to any frame with any kind of content: the frame can include just layers or a mix of layers and frames. All the elements will be affected by auto layout settings unless you exclude them (for example, using absolute position, which we will go over below). ## [Creating an auto layout frame](#creating-auto-layout) To **add auto layout** to a frame: 1. Select the frame. 2. Press `Shift + A` or click `+` next to **Auto layout** in the right panel. To **place several layers into an auto layout**: 1. Select two or more layers. 2. Press `Shift + A`. The **Auto layout** section will then display the various [properties](#auto-layout-properties) you can apply to your frame.

You can adjust the spacing and padding in an auto layout right on the canvas by dragging the pink handles between and around the elements.

#### Individual auto layout settings Select elements within the frame to **change their individual auto layout settings**: - If you select a nested auto layout frame, you’ll see the usual **Auto layout** section in the right panel. - If you select an ordinary layer or frame inside an auto layout you’ll see its **individual properties**, which look like this:

## [Auto layout properties](#auto-layout-properties)

#### Resizing options Determine how the container frame responds to changes made to layers inside it: * Set height or width (or both) **Hug** if you want the frame to be resized depending on the size of its contents. * Use the **Fixed** option if you want the frame to remain unchanged regardless of the size of its contents. #### Layout orientation Set a **vertical** or **horizontal orientation** for elements in an auto layout. Vertical orientation arranges elements along the **Y axis**, and horizontal orientation places them on the **X axis**.

To combine both these options, you’ll need to nest auto layout frames in a larger frame. #### Alignment controls Align your layers within the auto layout. Since alignment options will be determined by auto layout settings, this section of the right panel will be unavailable:

Change alignment by: - Clicking on the sections of the square outline or the lines in the middle. - Dragging the alignment blocks to the border you need.

#### Element spacing Define the spacing between elements in an auto layout by: - Entering the values in the **Spacing** fields. - Dragging the values in the fields up or down. - Selecting the field and moving the mouse wheel (additionally hold down `Shift` to change the values in 10px increments). - Selecting the field and using the arrow keys.

#### Padding Determine the distance from elements to the borders of the container frame. Adjust the value in the right panel just like with element spacing. #### Lock/unlock right and bottom padding When you change left or top padding, right and bottom padding will mirror the new values. Click

to change padding for individual sides. If you lock the padding again (click

) after changing values for individual sides, the altered padding values won't revert back to match the opposite side. Enter a matching value on one side of the padding to synchronize the values once more. #### Distribution options Control the way elements are distributed within the auto layout: - With the **Packed** option active, you can freely change the spacing between elements and the padding around them. - **Distribute** creates equal spacing between elements depending on the padding. You will only be able to change padding values, while element spacing will be set automatically.

#### Stacking behavior Determine how elements are stacked when spacing between them is negative. This is useful for designing elements that may overlap in a layout: avatar pictures, images, slides, cards, and so on. The default stacking option is **First on top**, meaning that the top layer in the Layer list will be placed first in a stack. To reverse the order, set this option to **Last on top**:

#### Border inclusion Include or exclude borders from an auto layout. This is useful when, for instance, you have shapes with thick borders in your design: you can set auto layout to apply to just the shapes while ignoring their borders. If borders are included, they will be considered as parts of the shapes:

Note: This setting only affects the borders of the elements inside the auto layout, not the borders of the container frame.

#### Remove auto layout Remove the auto layout from the frame. The spacing and padding you applied to the frame using auto layout will remain, but all other auto layout settings will be removed. #### Individual layer properties You can also **change the properties of layers** within your auto layout. To do this, select a layer to open up its individual Auto layout properties. Here, you can: - **Define the layer’s horizontal and vertical resizing behavior.** **Fixed** is the default option. You can freely change the size of the layer, and the auto layout will respond accordingly. **Fill** makes the layer change its size proportionally when the container frame is resized. You won’t be able to manually resize the layer like with the Fixed option. - **Set the layer to have an absolute position.** With [absolute position](#absolute-position) enabled, you can freely move the layer anywhere you want within the auto layout regardless of its general settings. It won’t be affected by any auto layout properties unless you disable it. Once a layer has an absolute position, you’ll be able to set constraint options for it. Read in detail about those [below](#constraint-options). ## [Removing elements from an auto layout](#removing-elements-from-auto-layout) To **remove an individual element from an auto layout** frame: - Click on it and drag it out of the frame. The remaining elements will adapt to the change based on the auto layout properties. - Select the element in the **Layer list** and press `Del`.

## [Changing elements in auto layouts](#changing-elements-in-auto-layout) This section goes over: - How changes in individual elements affect the overall auto layout. - The absolute position feature and how it excludes elements from auto layouts while keeping them in the frame. - Constraint options and how they influence the behavior of elements in an auto layout. - Adding and resetting component overrides in an auto layout. ### [Resizing auto layout elements](#changing-auto-layout-elements) Auto layout frames will adapt to changes in child element size based on your settings. Here are a few examples of how an auto layout changes depending on the resizing options set for the container frame: 1. The width and height of the auto layout frame are set to **Hug**, so they change depending on the size of the layers inside it:

2. Width is **Fixed**, and height is set to **Hug**. When the width of the elements changes, the width of the parent frame stays the same:

Meanwhile, the frame’s height adapts dynamically when the height of the elements changes. 3. The width and height of the auto layout frame are **Fixed**, so they stay static regardless of the changing width and height of the layers:

### [Absolute position](#absolute-position) To **detach an element from auto layout settings** and move it freely around the frame: 1. Select it in the **Layer list** or on the canvas. 2. Click

in the right panel. The element now has an **absolute position**. You can move it freely within the auto layout and keep it static regardless of any resizing changes, like in the video below. Here, we're adding a logo to an article preview card. At first, we just dragged the logo into the frame. It became part of the auto layout, perfectly aligned along the existing text layers. However, we needed the logo at the top of the card, a bit to the left of the main layout with the texts:

### [Constraint options](#constraint-options) Constraints define resizing behavior for layers in groups or frames. They are also accessible for elements in auto layout frames that are set to absolute position. Once you set a layer to have an absolute position, the **Constraints** section will open up in the right panel:

- The **Pin to Edge** controls pin a layer to one or several edges of the auto layout frame. This means that when you resize the frame, the distance between the layer and the edges it is pinned to will not change. - The **Fix width** and **Fix height** checkboxes do just that: fix the width and/or height of an element in the auto layout. Whenever you resize the parent frame, the checked off properties won’t be altered. ### [Auto layout overrides](#resetting-overrides) You can add auto layouts to any component. Combining [components and auto layouts](#auto-layouts-and-components) brings your workflow to the next level, making it easier to quickly change and update your designs. Read in detail about working with components<.mda>. #### Resetting overrides When you make **instances** of a component (i.e. duplicate a component), you can make changes to these instances, creating overrides that don't affect the style of the main component. You can reset all overrides by pressing the **Reset overrides** button (

) in the **Component** section of the right panel. This reverts the instance to match the style of its main component once more. However, when you modify auto layout properties for a component instance, the

button also appears in the **Auto layout** section of the right panel. Don't let this confuse you: - The **Reset overrides** button appears in the Auto layout section when you make changes to the **auto layout properties** of a component. Click it to reset these properties and return them to the defaults of the main component. - The same button appears in the **Component** section when you make changes to the **auto layout properties of a component** and/or to **distinct components in the auto layout** frame. Use it to reset **all overrides** for the component: both the auto layout properties and any individual component changes. Here’s how it works:

In the video, there are three component instances nested in a frame that itself is a component. We duplicate it and make changes to the new frame: 1. Changing the element spacing. 2. Changing the padding. 3. Changing the color of one of the button instances. We then press

in the **Auto layout** section to reset just the auto layout overrides (spacing and padding). We undo this, then press

in the **Components** section to reset all overrides (spacing, padding, **and** the button color). ## [Nested auto layouts](#nested-auto-layouts) You can **nest several auto layout frames** in more complex auto layouts to design truly responsive interfaces. This way, you’ll be able to select any distinct element of your design and alter its settings so that the overall layout adapts to changes based on the settings you choose. Here’s an example of how you can combine auto layouts for a simple news website:

From the top down: 1. The **header** is a horizontal auto layout containing the logo, the top menu, and the search button. 2. A smaller auto layout is nested in the header: the **top menu**, which contains links to the other pages of the website. 3. The **left sidebar** is a vertical auto layout. 4. More vertical auto layouts appear in the middle of the website: **news post previews** follow a strict format consisting of a picture, a title, and a subtitle. 5. Several **posts in a row** form a 4-post horizontal auto layout. ## [Auto layouts and components](#auto-layouts-and-components) As we mentioned above, auto layouts are even more powerful when paired with components. For example, if each news post in the layout is an instance of a component, which itself has an auto layout:

Changing the original, or main, component (either its element properties or its auto layout settings) will apply the changes to each instance:

Read in detail about using auto layouts with components.