Mastering frame nesting in Figma
By: Chuck Rice
Tags: Prototyping, UI, UX, Visual Design, Figma

One of the first use cases you’ll probably come across that needs Frame nesting. Figma’s Frames have a built-in ability to become scrollable if the content within it is larger than the Parent Frame. It gives you more control over the view window, as well as being able to mix together vertical and horizontal scroll areas.

Creating responsive Components

Both are responsive, it depends what you want to design for.

Whether you rely on the built-in constraints to respond on Frame resizing, or use the double-glazing technique to mimic containers in web design, your layers and Frames will need to be nested. In the gif above I’ve made the background of the container Component red, to highlight the difference between the two. Nested Frames are key to achieve these effects.

Using Auto Layout to create page layouts

One page is fine, but imagine resizing twenty pages, or fifty.

If you’ve tried managing more than ten pages at a time you’ll know what I mean. In the screenshot above you can quite easily achieve the page layout on the right without any Frame nesting, but that comes at the expense of needing to resize pages if the content changes. On the left is the same design using a scalable web page layout, but it resizes automatically if I add or remove content. It takes a bit of effort to set up, but once done you’re able to manage many more pages without fumbling the alignment.

Frame nesting tutorial

Without further ado, I’ll be using the scroll overflow as a brief example to demonstrate Frame nesting. Below is a preview of what I’ll be creating.

We’ll aim to create something like this.

Let’s go!

Create a scrollable stage

A basic page using the basic iOS Safari UI.

First we need to create the stage for our web page. Press F and create a phone -sized Frame — I used the iPhone 8 template. I imported the iOS Status Bar, Safari Navbar, and Safari Footer from the iOS UI kit linked below, then I Framed them together. Naming it “Safari and iOS scaffolding” helps remind me I can lock this group once it’s in place. Finally, I created a simple website navbar at the top with a burger menu on the left. Creating it now will produce a ‘sticky navbar’ effect.

Protip: the shortcut to Frame something is Cmd + Option + G on Mac, or Ctrl + Alt + G on Windows.

Make some content

Three basic building blocks. You can use just one, or make as many as you want.

Next we need to create some content for our webpage. I created the following as Components, all within their own Frames. You don’t need to make them as Figma Components yourself, but it‘s a key skill to help practice managing larger prototypes:

Hero Component — a large title and featured image, top left

— a large title and featured image, top left Get in touch Component — some text and a call-to-action button, bottom left

— some text and a call-to-action button, bottom left Features Component — the bulk of my content and copy, on the right

Optional: add a horizontally scrollable ‘widget’

A bit tricky, but your Parent Frame should be narrower than it’s internal contents.

Finally, I’d like to introduce a horizontally scrollable widget to really demonstrate the power of nested Frames. I had some card Components I duplicated, Framed them all, and then enabled Auto Layout so that they were spaced consistently. Above this is the ‘Content’ layer. I then Framed it again, and shrunk the width of the new Parental Frame to 375 pixels — the width of my iPhone 8 stage. In my example above, this Frame is named the ‘Horizontal carousel’ layer.

Protip: if you can’t see your cards after shrinking, or it’s disfigured, double-check that the ‘Clip content’ checkbox is unchecked, and that each child layer doesn’t have the ‘Scale’ constraint. These are in the Design tab on the right.

Don’t forget to enable the horizontal scrolling behaviour on the Parent Frame, the ‘Horizontal carousel’ layer in my screenshot above. Select your Parent Frame, open the Prototype tab on the right, and change the Overflow Behaviour to ‘Horizontal Scrolling’. If you get lost it’s optional—but if you’re determined, you can use the above screenshot as a reference; pay attention to the indentation of each layer.

Protip: if you’re struggling to keep the layers in the correct Frame when dragging and positioning them, try selecting the Frame and moving it with the arrow keys. This will avoid accidentally removing your items from its parental Frame.

Assemble it together

It looks simple, but getting it to look and work correctly can be tricky. Don’t give up!

With the stage set and the building blocks generated, we can start assembly. I have three stages in the image above describing what you should do, from left to right.

Stack the building blocks — these are simply placed one on top of each other, to find an order that I like. Frame the building blocks, and put it into the stage — Frame all the building blocks, call this new Parental Frame ‘Content, and drag it on to the stage and align it. Rearrange with the order of the layers in the layers panel on the left until the scaffolding elements are overlapping the Content Clip content — when selecting the Parental Frame, in this case the stage, use the Design tab on the right and check the ‘Clip content’ checkbox to preview and keep it neat. You can uncheck this box when making edits to the Content.

If all done right, your layers should look like the below. The navbar and the Content can be interchanged, but it’s good practice to put the navbar above the Content. Adding a shadow effect to your navbar means it can be visually raised, too.

Since my layers are mostly Components they’ll be purple, but yours may not be.

Making it scrollable

In order to make it interactive, select the Content Frame, select the ‘Prototype’ tab on the right, and change the ‘Overflow Behaviour’ to vertical scrolling.

This completes the tutorial!

Not able to change this setting? Go back and check the Content Frame is larger than all it’s child layers.

Browse the prototype

This is the moment of truth. Click on the present button in the top right — it looks like a play button. Now you should be able to scroll up and down, as well as horizontally on the Horizontal carousel block if you added it.