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!
