A basic mobile web page as a gif, opening the burger menu, scrolling down menu items, then closing it.
A basic mobile web page as a gif, opening the burger menu, scrolling down menu items, then closing it.
Demonstrating a working, scrollable Overlay.

Overlays are straightforward when they fit on the screen, but making overlays that are scrollable isn’t so intuitive. Also, depending on how you’ve set up your screen designs, the solution will differ. I’ll be walking you through the reasons why your overlay doesn’t work as you’d expect, the way to solve it, and some subtle limitations you’ll encounter when incorporating scrollable overlays into your designs.

Why an Overlay isn’t scrollable

There a few principles you need to be aware of, to understand how to best work with a scrollable Overlay.

  • your Overlay is placed on top of your screen
  • the screen moves to the ‘background’…


Can Mockitt really “scale your design thinking”? Let’s benchmark it by creating a Google Search prototype.

Screenshot of the Mockitt tool, in the browser, with my Google Search prototype.
Screenshot of the Mockitt tool, in the browser, with my Google Search prototype.
A view of my editor after finishing the benchmarking exercise.

I’ve been mastering the Figma design tool over the last couple of years as my UX and UI tool of choice. The more I learn, the more curious I am about other tools and how they compare — so curious I’ve developed my own preferred method of benchmarking these tools if I ever had the chance. …


A page design, left, visualised using shadowed rectangles, right.
A page design, left, visualised using shadowed rectangles, right.
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


Visualisation of a nav bar, text content, and a footer hovering over a web page Made in Figma’s editor.
Visualisation of a nav bar, text content, and a footer hovering over a web page Made in Figma’s editor.
Blow-apart diagram of the nav bar, content, and footer elements fitting together like Lego blocks.

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


Isometric view of cells in Figma creating a table, using the ‘blow-up’ diagram style.
Isometric view of cells in Figma creating a table, using the ‘blow-up’ diagram style.
A ‘blow-up’ diagram view of how single cells in this approach can create a table.

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…


Visual diagram of how the ‘double-glazed’ effect is achieved for a Component with an Internal and External Frame.
Visual diagram of how the ‘double-glazed’ effect is achieved for a Component with an Internal and External Frame.
Visual diagram of how the ‘double-glazed’ effect is achieved for a Component.

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:

When these three techniques are combined together effectively…


A visualisation of how Page Content and the View Windows fit together to create the Anchor Link illusion.
A visualisation of how Page Content and the View Windows fit together to create the Anchor Link illusion.
A visualisation of how Page Content and the View Windows fit together to create the Anchor Link illusion.

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…


A glimpse of configuring two interactions to one of my prototypes.

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

The different icon notations in the layers panel for a group, top, and a frame, bottom.

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

Internal spacing issues seen on the left are no longer possible when using 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…

Chuck Rice

Technical Lead @residently. Specialised in Design Systems, DevOps, and a certified Design Sprint facilitator. CrossFit and Travel 🏝. https://chuckwired.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store