Now that we have a better idea of how wide the rest of the content on the page will be, let's update the section heading element as well.

1. Select the Section heading layer.
2. Change its text resizing to Auto height and set its width to 1000.

Before moving on, let's tidy things up inside the Case study explorations frame.

Align all of the elements inside the frame

1. Select the Case study explorations frame and press Enter to select all of the child layers inside it.
2. Click Align horizontal centers to center everything.
3. Open the More actions menu in the Position section and select Distribute vertical spacing.

This distributes our elements evenly apart on the vertical axis, which allows us to use smart selection to quickly rearrange our elements.

Use smart selection to rearrange layers

When a selection of objects are spaced evenly apart on both the horizontal and vertical axes, you get access to smart selection.

Smart selection lets you quickly rearrange and adjust spacing between two or more layers in a selection without having to go through the tedious task of adjusting it manually.

You’ll know when smart selection is available if you hover over the selected elements, and you see pink circles and pink handles. Learn more about smart selection.

Lesson wrap up

Nice work! We just built the elements we need for our case studies. Along the way we learned about frame presets, and used text, images, and frames to build our elements. We also discovered new ways to add existing layers to frames and explored how using constraints can help us determine how child layers respond to changes to their parent frame. Finally, we cleaned up our layers and learned how using smart selection can help us rearrange and adjust spacing between layers.

In the next lesson, we’ll learn how to build a responsive button element using auto layout and turn it into a component that we can reuse throughout our designs. We’ll see you there!

Check your knowledge