Chuck Rice

95 Followers
·
Follow

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

Screen recording in Figma; adding a new text block to an existing web page, and it automatically resizes.
Screen recording in Figma; adding a new text block to an existing web page, and it automatically resizes.
Illustrating how quick it is to add more content and keep it aligned perfectly.

There are a few key reasons you want to set up self-scaling web pages:

  • Focus on designing, not pixel-pushing — when you let Figma worry about alignment, you can concentrate on the arrangement of elements. It only gets faster if you use full-on Components. …


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, you can create a flexible Component set that enables you to design for different screens at speed. I’ll be using the Breadcrumb UI pattern as a worked example. …

About

Chuck Rice

Technical UX Lead with a specialism in Figma prototypes and Design Sprints. Traveller, Pseudo-CrossFitter 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