The ultimate guide to breakpoints and flexbox in Figma

How to prototype advanced responsive designs in Figma using breakpoints and flexbox, and if it’s worth using plugins instead.

Demonstrating how close you can mimic life-like responsive design in your Figma designs.

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 find a breakpoints tutorial by the Breakpoints author, Arthur Savchenko, and that inspired me to find a way to demonstrate both in one example.

I’ll share with you my journey by illustrating the basic working principles, iteratively building a working example, and share what I believe you need to know if it’s worth all the effort required.

For curious readers, Arthur’s article is linked below.

How to make DIY breakpoints in Figma

To learn some of the foundational concepts first, you can follow one of my previous guides: