Lesson Length -


Frames are a very useful modifier for specifying the size of an element
Close Video


Let's Add A Frame Modifier

Frames set a specific size for our element.

This can be very useful for a variety of applications but probably the most common is to make a button.

For example, if we have some CTA Text layer text, if we add a background rectangle to it (the Background modifier), it would only fill the area that our Text is occupying and nothing more.

Instead, if we first add a frame with a width of 200 and a height of 50 to our text layer, this is now the size our text layer will occupy.

Now if we can add a Background Rectangle and change the fill to clear, and also add a border, round the corners... boom now we have a nice button.

Flexible Frames

With frames we also have the option to make them flexible.

We are going to cover this more in our Accessibility & Compatibility section.

But briefly, we can set a minimum and maximum width and height of a frame if we like, remembering that our min can’t be more than our max of course.

So for a quick example, our image here currently has a frame specifying a height of 350, no matter what.

But if click flexible, set our maximum to 350, but our minimum to 150, now if we bring in more images to the point where it fills up our VStack, our image won't have a height less than 150. If we change this to 200 we can see that’s now our new minimum height.

Was this lesson helpful?