Steve Kinney
Temporal
Check out a free preview of the full Figma for Developers course
The "Constraints 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 set the constraints so that the top and bottom bars stretch along with the phone's width and stick to the tops and bottoms. Try any of the following with the two orange boxes: have them remain centered in the frame; have stretched with the width remain centered as the height changes.
Preview
CloseTranscript from the "Constraints Exercise" Lesson
[00:00:00]
>> So now it's your turn, I kinda have this little iPhone here. And what I wanna do is not have that happen, right? I want my bottom bar to expand along the left and right, top bar. And I want these to either, your choice, get to, I gave you two boxes for a reason, keep in the center, but maybe only horizontally, have it scale.
[00:00:25]
Try out some different options, that's why I gave you two. Hypothetically, if you need some inspiration, did you know that you can hide and show layers? There's a hidden layer with an implemented version that you can go take a look at and reverse engineer if you want. Or you can kinda do it without looking at the answer key first.
[00:00:45]
But spend about five minutes, and take it for a spin and see if you can get at least the top and the bottom bar working. And then try something that interests you with the two kind of divs in the middle here. I guess rectangles, not divs, right?
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops