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

Imagine a world where your pages will grow and shrink to fit its content with perfect alignment, even when you have a side navigation bar or static elements. All of a sudden, you can grow from managing ten pages, to a hundred pages or more without ripping your hair out. Gone are the days of manually resizing your pages and Components in order to accommodate that last-minute change and align properly in preview mode.

I’m going to show you how it’s done.

Benefits of scalable web page layouts

Tables are often harder to prototype than to code, but taking a single cell design strategy can make them responsive and maintainable. What’s more, all you need are Components, duplication and Auto-Layout techniques. I’ve experimented with a few ways and this method seems to have the best trade-offs. I’ll give you the whirlwind tour of the core visual styles of tables, how to build the single cell design, and the reasons why I opted for this as my preferred method of prototyping tables in Figma.

Visual styles of tables

There are a few different visual styles that are floating around on the internet today…

Modern web solutions use responsive layouts that adapt to different devices, and it can be hard to design for it if you haven’t coded them yourself. If you setup your Design System Components in Figma correctly, you can make designing for responsiveness easier to understand and quicker to do. I’m going to show you how to design responsive Figma Components using the ‘double-glazing’ technique, and some limitations with a step-by-step worked example.

Techniques required

To create your responsive Components, you need to have some mastery of these concepts:

• Frames and Groups
• Constraints
• Auto layout

When these three techniques are combined together effectively…

Anchor Links aren’t the most exciting interaction to design, but they are a crucial design element for validating long form content and larger websites. It’s not intuitive to create Anchor Links but it’s possible with the Scroll Overflow technique, if you’re careful with layer management. I’ll show you how to create one, how you can organise your layers to keep it manageable, and a couple of limitations you may encounter.

Here’s the Figma preview link if you just want to see a proof-of-concept:

https://www.figma.com/proto/6lHkEfRTTArHCwNxPCAYm8/medium-blogs?node-id=1%3A102&viewport=226%2C592%2C0.5461657047271729&scaling=scale-down-width

What is Scroll Overflow

If you’ve been designing functional prototypes for mobile devices within Figma then this is a concept…

Figma prototypes have historically been limited to one interaction per object, but they recently* introduced the feature for multiple interactions. Using single interactions has been our bread and butter, but I’m sure some of you will be curious about what’s new designs are possible. I want to share how to get started with this new feature, one common use case for them, and a pitfall you might fall into.

* I noticed the multiple interactions update was first introduced around 7 August 2020 in the United Kingdom.

Old way to add a single Figma interaction

First a quick refresh of how you used to add interactions. In your…

Groups and Frames have very different uses in Figma, but it’s difficult at first to tell why both of them exist. I can assure you that they complement each other, but first, you need to understand the nuances of each. I’ll show you how to make them, how each one works, and some good use cases for each to level up your Figma skills.

How to make Group or a Frame

Anyone coming from other visual editors, whether Photoshop, Sketch, LucidChart or Google Slides, will usually be familiar with the grouping shortcut. …

Auto-layout is fantastic tool to make realistic prototypes even faster, but it’s not always clear when they work against you. What’s more, getting it wrong in your Design System can mean thousands of wasted extra hours by you and the rest of your team. I’m going to show you one viable use case where it’s better to have a fixed text box in your Design System tool kit.

What is auto-layout

In short, it allows you to consistently space your layers whether vertically or horizontally. Instead of arranging icons side by side and checking the spacing each time you edit it, adding a…