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.
There are a few key reasons you want to set up self-scaling web pages:
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.
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.
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. …