Figma for Developers Figma for Developers

Nesting Auto Layouts Exercise

Check out a free preview of the full Figma for Developers course:
The "Nesting Auto Layouts Exercise" Lesson is part of the full, Figma for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to follow along with one of the two step-by-step instructions provided to build ethier a card component or a product information component.

Get Unlimited Access Now

Transcript from the "Nesting Auto Layouts Exercise" Lesson

[00:00:00]
>> So now we have kinda two guides in here. And for an exercise, you can kind of take a look at trying whichever one of these seems a little bit more interesting to you. And then we'll kinda do them together. But we're gonna try to build that card component that we kinda used in a previous example.

[00:00:14] Which, if you look at it at the end of the day, let's just kind of like look at the anatomy of what this might be like. So we definitely know we've got the stack in here, right? We will probably have an auto layout for these three pieces. But then if you also look, we've got a place in there as well.

[00:00:30] Now, could this theoretically just be laid out normally with a set of constraints, you could, right? But the interesting part is, this now, if you add a third thing in there will just kinda balance automatically. If any of these kinda grow or shrink, if the text grows, it'll automatically grow the height of either sides.

[00:00:49] They'll behave very much like they do in the web, right? The other version that we have is also a set of nesting, auto layouts in this case, where we would have a button bar where they're all kind of aligned to the right, but then also a vertical hierarchy for the other pieces as well, right?

[00:01:07] So I'm gonna give you a little bit of time to kind of try out one of these. And then we'll kinda step through either one or both of them as a group and kind of explain it as we go along.