Practical ways to overcome 7 common Figma design issues, caused by auto layout, constraints, groups, frames, components, and duplicates. Figma has made designing for digital accessible to millions, but even the most eagle-eyed designers still run into trouble. Whether you’re a beginner or a seasoned veteran, the old adage is…

Should you go property-heavy or composition-heavy? A cautionary tale. — Figma is now at the point you can model your components in 100’s of ways, but which way is right for you? …

Putting a Frame inside another Frame sounds like madness, but it’s a core prototyping technique required for true Figma mastery. — 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…

How to prototype advanced responsive designs in Figma using breakpoints and flexbox, and if it’s worth using plugins instead. — Responsive designs can largely be achieved using breakpoints and flexbox at implementation time, but it’s not immediately clear how to prototype them by hand in Figma. I found a couple of plugins, the Breakpoints plugin and the AutoLayout plugin, but Breakpoints wasn’t free and AutoLayout wasn’t automatically responsive. I did…

Reuse interactions in your prototypes without losing Design System updates by using components, inheritance, and an Interaction Wrapper. Most Figma users know how to make their UI elements into sharable components, but not so many attempt to make the interactions sharable. It’s possible to do, and can save you a…

Adding in a “long press” or “press and hold” trigger to an interactive component, without losing the regular tap functionality. — Long press, also known as press-and-hold, is where a user spends a little bit longer tapping on something, to trigger an action. It seems trivial to prototype since we’ve had multiple interactions since late 2020, but I’ve found it can be finicky to retain other interactions at the same time.

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. …

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. …

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. …

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. …

In more sophisticated prototypes, you may want a button to display a spinner after being clicked to indicate and simulate something is happening in the background. Bootstrap has a bit of documentation how you can create Buttons with a Spinner using their frontend framework, and their typical use cases. …

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…

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. …

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. …

Using Components in the same file is okay if you only have a few, but existing libraries often have many pages of Components you might want to use. Sometimes even multiple files. There is a way to re-use these without copying and pasting these into your working file again and…

How to tell one layer to ignore auto layout without the real feature, explained using the real browser CSS property “position: absolute”. — With the May 2022 update to auto layout in Figma, absolute position is now a problem of the past. For a couple years, though, mixing absolute positioning with auto layout has been a highly requested feature. One of the oldest spectrum discussions is from 2020, and the official feature request…