Auto Layout is an essential tool for every Figma designer and user. This feature allows you to make changes such as resizing or repositioning frames and objects. Auto Layout will allow you to adjust the height and weight of an element, for example, with an automatic setting, cutting your work in half.
Since the screen size changes depending on the device or browser the user will use to access the website, Auto Layout makes the elements within the frames adjust to those changes. This makes the design and structure appear more precise and synergistic. Continue reading to learn how to use auto layout in Figma and its features.
Using auto layout
To use Auto Layout and all of its features, you must first add it to a framework you are working in, which can be a new framework or one with content, objects, and components. After selecting the frame or objects, here’s how to add Auto Layout to it:
- Press “Alt + A” on your keyboard (works on Mac and Windows).
- Right click on the objects or components and click Auto Layout (you must add this feature to each component as it is impossible in bulk).
- Tap the plus icon next to the “Auto Layout” option in the Figma menu.
In addition to adding Auto Layout to your frame, you can do several things, from stacking frames to duplicating, arranging, and deleting objects.
Add and remove objects
Adding objects to your frame is quite simple. You just need to take the object you want to add and follow the indicator. And if you’re going to delete one, drag it again and press delete. If you choose to add an object larger than the main frame, you will need to bypass Figma’s default settings in order to do so. You can do this by holding down the “Ctrl” button for Windows and “Command” for Mac.
Duplicate objects
If you want to add two or more identical objects to the frame, you can duplicate them, which is a useful feature of Auto Layer. Here’s how you can do it:
- Tap the object you want to duplicate.
- Press and hold the “Ctrl” and “D” buttons simultaneously if you have Windows.
- For Mac, duplicate by holding down the “Command” and “D” buttons.
Organize objects
If you don’t like the look of your framework and the organization of the objects and components within it, you can rearrange them. If you have merged two layers, you must bypass Figma’s default settings by pressing “Ctrl” for Windows and “Command” for Mac to access the deep selection option and move the component from the initial layer. However, if it is a box, you can select an object and move it to another location, similar to adding objects, or use the arrow key.
Auto Layout Levels
Another feature of Auto Layout is to combine more frames into one to create a more complicated interface where you can overlay different levels of Auto Layout such as buttons and rows of buttons, a post, and a timeline. Each level allows you to add an additional object to your frame. Button levels and button rows are horizontal, while a post is a vertical layer where you can enter descriptions, images, etc.
When you stack two frames together, they merge and gain the properties of one parent frame. This allows the user to implement adjustable objects. You can take one and put it on top of another to join two paintings. To do this, you have to:
- Choose a frame and everything you want to add to it.
- Press “Shift + A” to add an auto layout frame.
Auto Layout Features
The Auto Layout option in Figma has many valuable properties or functions, from direction and stacking order to spacing, resizing, and alignment. This p will talk about each of these features in more detail.
Address
As the name suggests, direction refers to the order of objects in a frame. When using Auto Layout, objects can be placed:
- Vertically: Objects are placed on the y-axis. This option is suitable for lists, menus, news feeds, etc.
- Horizontally: objects and components on the x-axis (buttons, icons, etc.).
- Setting position: Objects are set in multiple columns and rows.
stacking order
You can choose which stacking order best suits your structure. This is a visual change only because the stacking order remains the same (if it is 1,2,3, it is still 1,2,3 but with visual adjustments). When objects are stacked on top of each other, you can choose which one will be on top. So for example, if you have three things marked 1, 2, and 3, you can use 1 or 3. Here’s how you can do this:
- Choose the Auto Layout frame.
- Navigate to the Auto Layout option on the right of the screen.
- Tap the three horizontal dots to open advanced options.
- Look for the “Canvas Stacking” option.
- Choose “First on Top” or “Last on Top.”
absolute position
Another property of “Layer Flow” is an absolute position, in addition to the stacking order and direction. This feature allows you to place an object wherever you want, ignoring the frame boundaries. Here’s how to enable it:
- Pick up an object and place it inside the frame.
- In the right-side menu, next to the “X” and “Y” values, tap the icon that resembles a borderless square with a plus sign inside it.
- Move the object along the frame lines.
Space configuration
There are a few features you can adjust when it comes to spacing, such as spacing. You have two ways to change the space: automatically and by writing in a specific space. If you want your space to be as large as possible, you should select the automatic setting in the Auto Layout menu. But if you are going to enter your values, write them inside the assigned boxes.
Additionally, the gap setting can be set for all directions. If your icons are only horizontal and vertical, you can select a horizontal space between them. However, if they are in a surround position, you can adjust the vertical and horizontal spacing settings.
Alignment Settings
After setting the direction, padding, and spacing features, you can adjust the alignment of the child object in its frame, as this feature depends on the spacing settings. You can’t change the alignment of each object, but choose a pattern offered in the Auto Layout menu. You can click on the 3×3 grid in the menu and select which alignment you want. This can be done with the arrow keys or WSAD buttons on your keyboard.
Additionally, you can choose here the automatic setting to change the horizontal and vertical alignments as a row. With specific values, you can have all nine options (top left, bottom left, left, right left, bottom right, etc.).
You can also adjust the text alignment by enabling this option in the menu and holding the “B” button.
Resize
Auto Layout resizing options have many additional properties such as hug content, fill container option, adjust width and height, dimensions, etc. You can select the automatic option if you want your values to be fixed, but that limits the possibilities. To change the size, it is recommended to set its values.
You can select a fixed value or set it to the maximum or minimum possible dimensions for width and height. Hug content allows you to resize a frame based on the child object, while the fill container option resizes an object based on the parent frame.
Create unique frames with auto layout
Auto layout, as one of the essential features of Figma, can adjust the frame and the objects and compartments inside it according to your preferences. Its properties and characteristics are multiple, which allows creating a suitable and cared for product. Auto Layout is a fundamental tool that you must master before working in Figma.