Figma has become the go-to design platform for creative teams, graphic designers, UX and UI designers, and more. With its ease of use and focus on real-time collaboration, Figma allows you to create graphics, vector illustrations, mockups, prototypes, wireframes and user flows, so you can tackle any design project from a simple event flyer to a sophisticated mobile app prototype.
One of Figma’s greatest features – Auto Layout – is an especially time-saving tool that allows you to set rules for how elements are combined, so that you can swiftly put dozens of elements together without having to manually drag and align each one. Combined with component libraries, you can use Auto Layout to build a design system with standardized elements that can be endlessly replicated, or modified with each instance.
Best of all, dragging and dropping vector icons from the Noun Project Mac App right into your Figma window is the quickest way to create a more visually friendly design every UI designer will need.
In this tutorial, we’ll cover:
- Basics of Figma and Auto-Layout: Create a Simple Button
- Use the Noun Project Mac App to add vector icons to your design
- Auto Layout settings: adjust padding, alignment, flow, and more
- Nested Auto-Layout: Make more sophisticated designs with layouts inside other layouts
How to Create an Auto Layout in Figma
In this first example, we’ll create a simple button with text and an icon.
- Open a new design file in Figma.
- Click “F” to create a new Frame, then click and drag to make a rectangular frame across your canvas.
Auto Layouts are based on frames, so you’ll want to start with one rather than a simple rectangle.
3. Change the Frame’s Design settings to your liking:
- You can click and drag the corners of your Frame’s bounding box to change its dimensions, or input new numerical values under “width” and “height” under the Frame menu at right.
- Adjust the corner radius to make rounded corners, either by clicking the dots within the frame itself, or the corner radius under the “Frame” menu.
- Set a Fill color under Fill.
4. Click “T” to add text, and type your CTA.
1. Add Vector Icons to Figma with the Noun Project Mac App
The easiest way to instantly drag and drop millions of vector icons into Figma is with the Noun Project App for Mac. With a NounPro subscription, you can access our complete library of icons from the app window, and even customize them by selecting your own colors and choosing SVG, PNG, or PDF format.
The best thing about working in Figma is that you can select SVG format to drag and drop vector icons directly into your window. Since Figma is a vector-based tool, you can scale icons without losing resolution, and instantly recolor them or even adjust their anchor points.
Search our UI and UX collections to find thousands of icons that are perfect for designing websites, apps, buttons and navigation menus.
It’s always a best practice to download icons from the same collection, or by the same designer, to maintain consistency. In this example, we’ll be using UI Material Icons by Mada Creative.
Think about what icons you’ll need and drag and drop them directly into your Figma file. We’re choosing basic navigation icons and grouping them together – click and drag to select all icons in Figma, then hit Command (or CTRL) + Shift + G to Frame them together. You can then click “Tidy Up” in the Design panel to put them into an evenly-spaced grid. Framing or grouping objects helps keep the left-hand Layers panel tidier while working.
Add an Icon to Your Frame and Create an Auto-Layout Button
Click and drag one of your icons into your button frame.
At this point, the icon, text, and background are all independent and can only be moved around manually. When we create an Auto Layout, we can set rules to help all these elements work together.
Right-Click the frame and select “Add Auto Layout,” or hit Shift + A. Now your button is in Auto Layout mode, with settings you can adjust that will modify the appearance.
How to Change Auto Layout Settings
- In the right-hand Auto Layout menu, our Auto Layout was already set to horizontal so the icon and text fall in a straight line. Clicking the downward arrow changes the orientation to Vertical, which stacks them on top of one another.
- The small grid icon shows us how the elements are aligned. In the horizontal format, we want to center-align our elements so they stay centered when the button is resized and we avoid dead space.
- Clicking the very center of the grid will center contents horizontally and vertically.
You can adjust the padding around each of the elements in your Auto Layout, either individually or all together.
With the Frame settings set to “Hug Contents” both horizontally and vertically, adjusting padding will change the overall size of the button since it’s now “hugging” that padded space.
You can adjust padding and spacing values within the “Auto Layout” menu:
- The spacing value changes space between elements (icon and text)
- Horizontal and vertical padding values change how much padding goes around these elements
- Clicking the square icon will let you adjust individual padding values. In the below example, we add a bit more padding just to the right side so that it optically balances the white space created by our star icon.
3. “Hug” vs. “Fixed” vs. “Fill Container”
Let’s take another look at how these three Frame settings in Auto Layout will affect your contents.
- Hug Contents: this will make your frame “hug” whatever is inside it – so if you add shorter or longer text, the frame will expand or contract accordingly. Here, we have “Hug” both horizontally and vertically, but with no set width, it’ll just keep extending horizontally.
- Fixed Width: Just like it sounds, you can manually click and drag the length of the button to make it fixed width or fixed height. In the below example, we’ve set a fixed width but kept the height to “Hug contents,” so the button will expand with added text but only vertically.
- Fill Container: Note that in the above example, we’ve also clicked into the text box and set it to “Fill Container.” This means it will occupy all available space minus the button’s padding.
Outside the Box: How to Use Absolute Position
A new Auto Layout feature in Figma is Absolute Position, which allows you to pin a certain element in relation to another, overriding other Auto Layout rules.
Let’s say you want to create an “X” that lets a user close out of your button or modal, hanging off the upper-right corner. Dropping that “X” into your button’s existing Auto Layout will just place it in line with other elements.
- With the “X” selected, Click “Absolute Position” under “Frame” instead.
- Drag the “X” to where you want it to visually go on your button.
- “Pin it” into place by adjusting the constraints to “Right” and “Top,” depending on which corner you want to use, as below.
Got a button format you like? Make it a component by right-clicking it and hitting “Create Component,” or typing Shift-Command-K. This will add it to your component library so that you can quickly drag and drop new buttons whenever you need them. You can find your component button under “Assets” in the left-land Layers panel, under “Local Components.”
You can modify copies of your components such as typing a new CTA, or to make additional changes, click the ellipses on the right-hand column and hit “Detach Instance.”
Adding Multiple “Nested” Auto Layouts
Now that we’ve conquered simple, single-row Auto Layouts, how can you combine different Auto Layout elements into more complex and sophisticated designs?
Let’s duplicate our button (Alt/Option – click – drag) and include different CTA’s with new icons as below:
Now, click + drag to select all 3 and place them in a new Auto Layout (Shift-A) together.
They will automatically be placed into a “Parent” Auto Layout frame, vertically stacked, and you can now use the spacing tool – in the Auto Layout Menu or on the canvas itself – to adjust spacing between them.
Now that we’ve nested Auto-Layouts to have a “parent” and “children,” let’s look at a few behaviors and interactions between them:
- To make these buttons all the same length for visual consistency, select each of the buttons and set the width of the frame to Fill Container. With the parents frame’s width set to Hug Contents, all buttons will now shrink or grow to the longest one’s size.
- If all three buttons have their frames set to Fill horizontal and Fill vertical, and the parent frame set to Fixed both ways, manipulating the corners of the parent frame will change the size of all buttons – because they’re filling the space horizontally and vertically as it’s changed.
Note that when the parent frame is narrower than our “Comment,” button, it tries to condense across two lines because it is no longer set to “Hug contents” horizontally.
In the next example, let’s combine a few more different elements to make an image card – similar to a post you’d see on Instagram.
We’ll start by putting our elements together on the canvas:
- Image placeholder
- Engagement buttons: Like, Comment, Share, and Save
- Username with avatar icon
- Post date
- Post copy
Putting these elements into an Auto Layout can help “standardize” the design while giving us some flexibility – let’s make it so that we can add different sized images and lengths of post copy without disrupting the overall pattern.
We also want to keep certain elements right-aligned vs. left-aligned for more visual breathing room.
- First, let’s set our engagement buttons in place – we want the 3 interactions on one side, and the “Save” button on the other so they don’t all crowd together.
Select the “Like,” “Comment” and “Share” icons and Add Auto Layout (Shift-A). They should be set to horizontal layout with “Hug Contents” horizontally and vertically. You can then click and drag the spacing sliders to manually adjust spacing between the elements.
- Let’s have the “Save” icon be in the same row but on the right-side of the screen. Place the icon along the same row and add Auto Layout. This time under the “Auto Layout” panel, click “Space Between” and it will automatically space the two elements depending on how wide the parent container is.
- Do the same approach for your username and avatar: first, place the avatar icon next to the text placeholder and make an Auto Layout like our first button example. Then, create another text box for the date placeholder, and put the two in a horizontal parent Auto Layout with “Space Between” selected again.
- Be sure your elements are vertically center-aligned in the Auto Layout panel. You can also change “text baseline alignment” if elements like icons are not properly aligning with your text – this will bring the bottom of the icon’s frame into alignment with the text’s baseline.
- Now, select all the elements together in a vertical row – image, engagement icons, username and date, and placeholder post text, and hit Shift-A again to make a parent Auto Layout frame that’s vertically aligned.
- Since all our content is now in a Frame, we can set the Frame’s Fill Color to white for better visibility.
Now, let’s tackle spacing:
- Setting each child Auto Layout to “Fill Container” horizontally will help the elements spread across the width of the parent frame. The image will expand and the “Space between” icons and username/date will spread out to left-and-right-justify like a table of contents.
To add better margins, we can adjust padding around these elements.
Adjusting padding values in the parent frame will apply them universally on all sides.
Instead, let’s individually apply padding to our 3 child Auto Layout rows, but keep the image placeholder set to “Fill Container” horizontally and vertically – this way, it’ll stay flush with the edges of the card while the elements below will retain padding.
Let’s take another look at our caption text. We want the text to flow depending on how big the parent frame is. Put the text in its own Auto Layout, with the same horizontal padding as the above elements but no vertical padding – this is so we can adjust the vertical spacing from the parent frame for more event results.
Set the text Auto Layout, as well as the image, to Fill vertical x horizontal. Then set the parent frame to Hug Contents. This will help those elements resize to fit the parent frame – perfect for visualizing responsive pages and designs.
Conversely, we can have the length of our caption dictate how long our parent frame extends.
- Set the image to Fixed Height
- Set the text’s Auto Layout frame to Fill horizontal but Hug vertical. Make sure the text box itself, inside of its frame, is set to Fill horizontal and Hug vertical as well. The parent frame of your social media card should now expand vertically with the length of text.
Take the time to play with Auto Layout and get to know the interactions between elements when you nest different Auto Layouts inside one another. Sizing relationships will very depending on how different layouts are set to Fill, Hug, or Fixed.
For more tips on Auto Layout and other Figma features, follow Figma’s blog or YouTube channel.
For more ideas on how to make your designs pop with Noun Project icons, follow our Creative Inspiration.
Marketing Communications Manager at Noun Project, Designer and Illustrator.