Learn how to create dynamic designs with auto layout
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:
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 in.
The overall layout will dynamically respond to changes inside the child frames.
Some things to keep in mind
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.
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.
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
To add auto layout to a frame:
- Select the frame.
+next to Auto layout in the right panel.
The Auto layout section will expand, displaying the various properties you can apply to your frame.
You can also 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
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
Shiftto 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. Like with element spacing:
- Enter the values in the Padding fields.
- Drag the values in the fields up or down.
- Select the field and moving the mouse wheel (additionally hold down
Shiftto change the values in 10px increments).
- Select the field and using the arrow keys.
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 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.
Removing elements from an auto layout
To remove an 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
Changing elements in auto layouts
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
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:
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:
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.
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:
To detach an element from auto layout settings and move it freely around the frame:
- Select it in the Layer list or on the canvas.
- 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:
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
You can add auto layouts to any component. Combining components and auto layouts brings your workflow to the next level, making it easier to quickly change and update your designs. Read in detail about working with components.
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:
- Changing the element spacing.
- Changing the padding.
- 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
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:
- The header is a horizontal auto layout containing the logo, the top menu, and the search button.
- A smaller auto layout is nested in the header: the top menu, which contains links to the other pages of the website.
- The left sidebar is a vertical auto layout.
- 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.
- Several posts in a row form a 4-post horizontal auto layout.
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.