In this video we'll teach you how to create dynamic auto layout cards with images, that
can fit descriptions of various lengths.
We'll use some skills shown in our earlier videos on Auto Layout, so be sure to watch
those first.
If you enjoy this tutorial series on Auto Layout, subscribe to our channel to be notified
of the next video in the series, and leave us a comment on what to cover next!
We'll start by creating two text layers.
One for the title that will be size 18 semibold, and another regular weight, with a font size
of 16 for the description.
Let's also change the fill colors of these text layers.
Select both layers and add Auto Layout.
Since we stacked our text layers vertically, the direction is already set to vertical.
Ensure the space between items property is 8.
And set the padding to 16 on the top and bottom, and 24, left and right.
Add a white fill, and rename this to card details.
This isn't looking much like a card yet, so let's set a fixed width, but this time, we'll
convert the Auto Layout frame to fixed width by dragging one edge to resize.
Doing this changes the horizontal resizing property to fixed, and enables the Width property,
which we want to be 400.
Now, let's add an image to our card.
Using the rectangle tool, create a rectangle that is 400 by 400.
Then use Shift + Command + K and select an image to replace the default grey fill with
an image.
The image should be placed above title and description in our card.
To add it, you might think we should just click and drag the image into the top of our
Auto Layout frame, so let's demonstrate why that won't give us the right result.
Because the image layer is wider than the auto layout frame's width, minus its padding,
Figma won't automatically nest it.
We can hold down Command to override this nesting behavior.
Because we added the image directly to the same Auto Layout frame, it uses the same padding
values.
And, because the image has fixed dimensions, it's overflowing the card.
To fix the overflow issue, we can change the resizing property of the image to Fill Container,
so it fill only the available space.
And we end up with a card that looks a bit like a polaroid or instax photo, with a border
around the edges of the image.
That's not what we're aiming for, so let's undo those steps.
Now, instead of adding the card to our existing Auto Layout Frame, let's select both objects
and add Auto Layout, and set space between items to zero.
This new outer Auto Layout frame has zero padding, so the card is borderless with the
image extending all the way to the edges.
We've got the foundation of our card looking great.
We just need to address a few functionality quirks.
If we were to enter a long description for this card, the text would continue to outside
the card's boundaries.
Because the card details frame is set to fixed width, it won't grow to accommodate the text.
And because the text is set to hug contents, it doesn't wrap to a new line.
We can select both text layers and change their horizontal resizing property to Fill
Container.
This will allow the text to grow until it reaches the maximum width allowed by its fixed
width parent, minus padding, and then wrap to a new line.
Next, we want our card to be easily resizable.
If we click and drag to resize the card, only the outer frame resizes, while the contents
remain fixed.
Select the card, and hit enter/return to select all child layers one level down, in this case,
the image and the details frame.
Just like we did with the text, we'll change the horizontal resizing property to fill container.
Now, when we resize the card to be wider, or narrower, everything stays together like
we want.
But, we still need to fix the vertical resizing, which still doesn't work.
If we select both layers and change the vertical resizing property to fill container to match
what we did for horizontal, we'll end up with a weird, but expected result!
With both objects set to fill container, they're competing with one another to fill the available
space of their parent container.
They compromise and split that space an even 50/50.
If there were three items, they'd each occupy one third of the available space, and so on.
But that's not what we want.
We only want the image to grow and shrink.
Let's change the card details auto layout frame back to hug contents.
And there we have it!
A flexible and dynamic card that responds as we resize it.
Let's rename this to card, round the corners of the frame by 8, and check the clip content
checkbox to see that rounding take effect.
Apply a drop shadow style to give it some elevation off of the page.
And finally turn it into a component.
This looks great, but a big part of design is exploration!
For example, we might want to explore a version of this card with a price associated with
the travel package, on the same line as the title, but right-aligned.
Until now, we've mostly built auto layout components from the ground up.
We haven't really changed their structure in any way.
So let's learn how!
Select the title text layer, and use command + D to duplicate it.
Since the auto layout frame has a vertical direction, it duplicates below it.
This text layer will show the price of the flight or hotel, so let's enter a placeholder
value.
These two layers are going to share the same horizontal space, so we no longer want them
to be the full width of the container.
Select both layers and change the horizontal resizing property to hug contents, add auto
layout, and change the direction to horizontal.
This new auto layout frame is set to hug contents, and we'll need to change it to fill container
to extend the full width of the card.
Both layers are aligned to the left, just like in our previous video where we made a
navigation menu.
In that example, we used space-between to push the two objects apart.
We can do that same thing here to get a similar result.
Open the alignment fly-out menu and change it from packed, to space between to push our
price to the right edge.
This looks like the result we want, but when we add real content into this card, like a
long title, or if we resize the card to be more narrow, the two text layers overlap.
In this case, a better solution would be to change the title text layer to fill container,
so the text will wrap instead of overlapping.
And there we have it!
Another option for our card to compare and test against the other.
Let's add some real data to this card to make it a bit more realistic.
And add our purple blue color style to emphasize the destination of this flight deal, and bring
some of the brand colors into the card.
In our final design, this card component is used in rows that contain at most three cards.
Duplicate our card component to create three instances in a row, add auto layout, and set
space between to 40, and rename it to card row.
We'll also override these to have different content.
Looking good.
But now that we've wrapped these cards in a new auto layout frame, we need to customize
it to behave how we'd like.
First, if we were to use this in a responsive website with variable width, we want the cards
to each fill container horizontally.
Select the card row frame and hit enter/return on your keyboard to select the cards.
Then change their horizontal resizing property to fill container.
Because we have three cards, each will take up 33% of the available space, while still
accounting for padding and space between.
If we duplicate a card to add four, they'd occupy 25% of the space, and so on.
If the cards resize to be too narrow, or if we add a longer description the cards, some
text will wrap to a new line.
Our card did reflow responsively but look at each of the siblings.
They each behave differently, since their content is different.
Because cards within it are fixed height, they won't grow to be taller.
This means the only space for the card details to grow, is upwards, into the image.
This causes the image to shrink, and for the card details to have variable heights.
We originally set the vertical resizing to fill container for the image of our card.
This made it responsive when we resized it manually.
This is great when using the cards on their own, but when we added them to this row of
cards, they function as one complete unit.
In order for all of the images to always remain the same height, irrespective of their contents,
we can change them to fixed height.
There are two ways to do this.
If you don't need to preserve the flexibility of the original main component, you can select
the image in the main component, and set it Fixed height, and all of the instances will
immediately update.
But if you want to have two different behaviors and keep the main card component fluid, we
can override the properties of each of the instances by selecting the image and changing
them to fixed height.
Now all of the images are always the same height!
Next, let's shift attention to the card details.
The text content is being clipped because the cards are still set to fixed height.
Let's change the vertical resizing to fill container instead.
Nice!
Now we can read all of the content.
We can certainly leave these as is, but let's talk about one more thing using this as an
example.
Remember earlier when we said the cards act as a unit?
When the cards have different heights, they feel less symmetrical.
How can we make it so that when one card grows or shrink, so do each of their siblings?
Right now, the cards are set to fill container, the images are set to fixed height, and the
details are set to hug contents.
Hug contents is the only resizing property that tries to shrink.
If we reverse this and tell it to also fill container, we should be good to go!
Select the card details frame in each of the cards that are too short, and override the
vertical resizing property to fill container.
It's important to keep the card that was the tallest set to hug contents.
This is the card that dictates the total height of the row, while the other siblings just
follow along.
If we were to also set the details of this card to fill container, Figma will display
a toast notification that the card row has been set to Fixed height.
This can be confusing, so let's talk through it.
Originally the card row was set to hug contents.
This means that it is adapting to the size of the child items within it.
When they grow, it grows.
When we change all of the cards to fill container, they're adapting to the size of the parent,
and trying to grow to fill it.
These two resizing properties are at odds with one another, and cause a conflict that
needs to be resolved.
Figma does this by changing the auto layout parent frame to a fixed height.
The opposite behavior is also true.
If we set the row back to hug contents, all three cards will be converted to Fixed height.
Depending on whether you have a child or parent auto layout frame selected, you'll have different
properties available to you.
If you ever get stuck determining which resizing property to use, stop and think about the
functionality of the component you're trying to make, and the context in which it will
be used.
If you enjoy this tutorial series on Auto Layout, be sure to subscribe to our channel
to be notified of the next video.
Thanks for watching!