FD4B: Add your layers to a frame

Now that the basic elements of our hero are done, we need a way to keep them together. Let's add them to a frame.

Add your layers to a frame

Frames are a core building block in Figma. They act as containers for other layers allowing you to organize them into cohesive designs. You can use frames to create individual assets like icons or buttons. Or various segments of your design—like a navigation bar, screen, or layout for a website or mobile app design.

To add layers to a frame:

1. Select the Frame tool in the toolbar or press F.
2. Click and drag your cursor around all of the layers.
3. Double check the layers section in the left sidebar to make sure all elements are nested inside the frame. If they are, the elements will be indented directly below the frame and will be hidden on the canvas when you click visibility icon. If they’re not in the frame, you can click and drag the layers into the frame.
4. To easily find the hero later, double-click the frame in the layers section and rename it to Landing page hero.

Set the Landing page hero frame aside for now. We’ll come back to it in a later lesson after we’ve created a few more elements for our portfolio.

Lesson wrap up

Well done! We just built the first element for our portfolio website by creating a few fundamental layers: shapes, text, and frames. You'll use these layers again and again throughout your Figma Design journey.

We learned how to apply some fundamental properties by adding images to our shapes as fills and creating visual hierarchy using key typography properties. Finally, we placed our layers into a named frame to keep everything organized.

If you’re feeling adventurous, make a copy of what you created and tinker around with different layer properties. Design is an explorative process, and this is a great time to take risks. Try that colorful background, test out a different font family, and see what you like!