Auto layout is a powerful and flexible feature in Figma that allows you to create designs that
respond to content changes and layout size. We're excited to announce that auto layout
is even more powerful than before, with new capabilities like negative spacing,
absolute positioning, text baseline alignment, canvas controls, and more! We've also freshened
up a few things in the right sidebar to speed up your auto layout design process. If you're
new to auto layout or need a refresher on how auto layout works, check out previous tutorials linked
in the description below. In those tutorials, the interface will look slightly different
and won't include updates from this video. But the underlying principles of auto layout are the same.
In this video, we'll be creating a card component for a task management app. We'll walk you through
what's new and what's changed in auto layout. To follow along and for additional resources,
check out our auto layout playground file linked in the description below. We want our card to show
the following information: A title for the task name, avatars to show contributors of the task,
a day counter to track the amount of time until the task is due, a chevron to expand
the task card's details, and a bonus element will reveal toward the end. Let's start by creating a
task name. We'll create a new text layer with some dummy text, and increase the font size and weight.
Next, let's create the contributors by using a stack of avatars. We've already created a few,
but you can find the final asset in the playground file linked below. Let's select
the contributors and hit shift a to place them inside an auto layout frame. Before we move on,
check out the layers panel for an update to auto layout's layer ordering. In the past, layers in
an auto layout frame were placed in the opposite order from what was shown on canvas. We've updated
the layer order to match what you see on the canvas for easier organization and navigation.
Let's get back to building our task card. We want the contributors to flow horizontally,
so we'll change the auto layout direction from vertical to horizontal. We also want
them to overlap one another. This is where our new feature negative spacing comes in.
Find the space between input box in the right sidebar, and type in a negative value.
The avatars are now stacking, with the leftmost
contributor at the bottom and the rightmost contributor at the top.
But what if we want to switch the stacking order, so that the leftmost avatar is at the top?
To do this, we have our next new feature, canvas stacking order. With the contributor
stack selected, go to the right side bar and click the three dot icon for advanced layout options.
Use the drop down next to canvas stacking, and select first on top. Nice!
Note that when the stacking order changes, the order of layers in the layers panel stays the
same. Canvas stacking is solely a visual change that happens on the canvas. The next element we
need for our task card is a day counter to show how much time we have left to complete the task.
Let's bring in our pre-made clock icon, which you can grab from the playground file.
Next, we'll create a text layer for the countdown, then update a few properties.
We'll select the icon and text layer and add auto layout.
Right now, the text layer and icon are looking unaligned. This is because they're aligned from
their vertical centers. To improve this, we want to align their baselines instead. This
brings us to our next new feature, text baseline alignment. Aligning text baselines can be crucial
when creating pixel perfect designs, especially when using varying font sizes to indicate
priority of information. With the auto layout frame selected, go to advanced layout settings
and click the check mark next to "text baseline alignment." And voila, they're aligned!
Now let's add our chevron, which will be used to collapse and expand the task card's details.
We'll find our chevron from the assets panel and drag it onto the canvas.
Great! We have enough elements to start putting our test card together. Place the contributors
and day counter next to each other, and add auto layout to create a footer. Then,
place it underneath the task name, select both items and add another dimension of auto layout.
Press "Enter" to select both items again, and go to the right sidebar to change its
horizontal resizing. You'll find that the resizing options are no longer in the resizing section,
because these options have moved. Instead, you'll find them just below the width and height inputs
toward the top of the panel. Let's go ahead and change horizontal resizing to "fill container".
Next, we want to give everything some breathing room, but let's add a fill to the card first so
we can better see what we're working with. Now select and hover over the card, and pink
handles will appear similar to the handles in smart selection. These pink handles are new on
canvas controls to change auto layout padding and spacing. There are two ways to use these controls,
you can: Click and drag the pink handles to increase or decrease the padding or spacing,
or click the handles to open an input box and enter a specific number. Let's try both
of these. Click the pink handle below the task name, and enter a number to change the spacing.
Now let's try clicking and dragging one of the pink handles along the perimeter
of the card to change the padding. We want the padding to be the same on all four sides,
so we'll hold shift + option for mac or shift + alt for windows while clicking and dragging.
If you prefer to change spacing and padding from the right sidebar, you still can. We've
updated the padding and alignment controls to make it quicker and easier to use.
The top and bottom padding settings are now decoupled from the left and right padding.
You can still use commas to input individual padding, or click the independent padding icon
to separate all four sides and input a different number for each side. If you want to set padding
on all four sides at once, hold Command for mac or Control for windows and click into any padding box
enter one value to set the same padding on all sides or enter padding values using CSS syntax.
But wait, where will the chevron go? We want it in the top right corner of the card,
but it needs to sit independently from the rest of the card's auto layout flow. This is where our new
feature absolute position comes in. Absolute position allows objects to be removed from
the auto layout flow, while remaining in the auto layout frame. Much like absolute position in CSS,
you can place these objects exactly where you want relative to the parent container. You can
also apply constraints to determine how they respond when the auto layout frame resizes.
Let's drag the chevron into the task card, and you'll see its siblings shift to accommodate the
chevron into the flow. To change that, click the absolute position button in the right sidebar.
Notice how its siblings shift again. The chevron is excluded from the auto layout flow
and ignored by its siblings. Let's place the chevron exactly where we want it, and set its
constraints to top and right. Great! The chevron is looking too close to the task name, though.
These two layers are overlapping because of the chevron's absolute position. How can we
solve this? We could add breaks in our text, but if we want to resize the card width-wise,
the task name won't resize with it. Instead, let's place the task name in its own auto layout frame
and increase the padding on the right. We'll set the rest of the padding sides to zero,
then update the frame's vertical resizing to hug contents, and horizontal to fill container.
Tip: Double-click the bounding box of an auto layout frame
or auto layout contents to change its resizing to hug contents. For example:
Double-clicking the top or bottom of the bounding box will set vertical resizing to hug contents.
Double-clicking the left or right sides will do the same for horizontal resizing.
To set resizing to fill container, double-click while holding option for mac or alt for windows.
You can use these shortcuts on text layers within auto layout frames as well,
but you'll find that the behavior is slightly different as they're directly
influenced by text resizing properties such as auto height, auto width, and fixed size. To learn
more about auto layouts resizing concepts, check out our previous auto layout videos.
Once the frame's resizing properties are set, press "Enter" to select the text layer and go to
the right sidebar to change horizontal resizing to fill container and vertical to hug contents.
Now no matter what we update the task name to, it won't come too close or overlap with the chevron.
Let's update the rest of the card's resizing and spacing properties to make sure everything
moves and resizes the way we want. For the footer, set vertical resizing to Hug Contents,
and spacing mode to Space Between. Tip: Click the alignment box and press X to toggle spacing mode
between Packed and Space Between. You can also use the advanced layout settings to toggle this.
Lastly, update the parent container of the card. Set horizontal resizing to Fixed,
vertical resizing to Hug Contents, and spacing mode to Packed.
Now the card can influence the content horizontally when we resize it,
and be influenced vertically by its children.
With everything in its place, let's add some style to our card by updating the stroke,
drop shadow,
and border radius.
Looks like someone dropped a comment in the file while we were working. Let's check it out!
A designer left feedback that the contributor stack looks busy and
inconsistent with the card style. Let's create a simplified version to try in our design.
Select the main component and add a new variant. Remove the shadow,
change the stroke color, and set stroke alignment to outside. We'll name this variant "simplified"
and switch the contributors in our card to this new variant.
I like the simplified version but the contributors are overflowing beyond its parents bounding box.
This is because the outside strokes aren't accounted for when calculating
the size of the objects which can cause issues in the developer handoff process.
So let's change how strokes take up space. Select the contributor stack and go to advanced layout
settings. Open the drop down next to strokes, and select "Included in layout". You'll see that
the frame resized, and the contributor shifted since space between is now measured from the
outside edges of the strokes. Because of this, the contributors have spread out even though the
space between value hasn't changed. Let's update the value to pack them in closer to one another.
With strokes accounted for in the layout, our design now more accurately represents
how CSS renders borders. This ensures visual parity in the design to code process.
Our card is looking great! We're just missing one more thing...
As a bonus, we want to add a category indicator that shows what category the task belongs to.
It'll sit on the left border of the task card, and vertically resize when
the task name gets taller or shorter. Can you guess how we might do this?
First, let's create a tall and thin rectangle about 6 pixels wide and 48 pixels tall
to match the current height of the task name.
We'll round its edges using border radius, and update its color.
Next, drag the indicator into the card and enable absolute position.
Vertically center the indicator with the task name, and update its constraints to
"Top and bottom", and "Left". Now whenever the task name grows or shrinks vertically,
the task card resizes and thus causes the indicator to resize as well.
We're all done creating our task card! From here, we can turn our task card into a component
and create a few variations for a component set.
We'll place a few instances inside an auto layout frame, set the card's horizontal
resizing to "Fill container", and use it for the interface of our task management mobile app.
We've explored a few ways to use the new auto layout features. How will you use them?
Let us know what you're creating and what questions you have in the comments below.
At Figma, we're always improving our product to empower you to do your best work.
Auto layout will continue to grow, so be sure to like and subscribe to
keep up to date with the latest product and community news. Thanks for watching!