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.


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

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.

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.

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.

Visual styles of tables


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.

Techniques required


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.

What is Scroll Overflow


Image for post
Image for post
A glimpse of configuring two interactions to one of my prototypes.

Old way to add a single Figma interaction


How to make Group or a Frame

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


What is auto-layout

Image for post
Image for post
Internal spacing issues seen on the left are no longer possible when using auto layout.


Image for post
Image for post
Photo by Thought Catalog on Unsplash

The difficulty with breakfast

Chuck Rice

UX and Design Technologist, specialised in Figma prototypes, DevOps, and Design Sprints. Travel, CrossFit and Corgis 🐶. 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