Mastering frame nesting in Figma

Putting a Frame inside another Frame sounds like madness, but it’s a core prototyping technique required for true Figma mastery.

Visualising the Frame nesting used to achieve the design shown on the left.

Putting a Frame inside another Frame sounds like madness, but it’s a core prototyping technique you’ll need to learn for truly immersive prototypes. Not only is it key for basic interactions like scrolling, but also for some advanced techniques needed for a scalable Design System. I’ll give you an overview of what they are, why they’re helpful, and how to get started with Frame nesting.

Anatomy of a nested Frame

An arbitrary example of nesting some Coloured Frames.

In order to remain illustrative I’ve created a basic example above in Figma using coloured Frames. They are arranged at three levels of depth:

• Top level — this is the parental Frame in White, and is the selected Frame in the screenshot
• Middle level—inside the White Frame there are three further Frames: the Green, Blue, and Red Frames arranged as squares and a rectangle
• Bottom level—in the third level of depth, as indicated by the depth of indentation in the…