The concept of Breakpoints. Pain reliever in Figma

So, the breakpoints. Despite being a headache for product designers since the early beginning of the profession, proper design for different breakpoints is a quality mark of a well-crafted unified design that really works, not just looks good.

The only problem with it that in most cases you are just moving pixels and resizing things from one breakpoint to another, and it takes so much time. But there is no chance to skip that part because nowadays we have around 60% of mobile users, so a good mobile version is a must-have thing. I believe that on the development side this is something that already works quite good, so why we can’t optimize the design process in a similar way?

Doing this type of routine every day, I figured out some key points that in fact may be done smarter than manually. Figma does offer the potential chances to implement those things quite easily, so here is how I envision the better way for working with breakpoints without making huge efforts or doing any geek math instead of designing itself.

Features

A bit smarter layout grids

First thing first, let’s set up a grid system for our project. In this example, I want to use Bootstrap grids and cover 2 breakpoints (XL ≥1200, XS<576)

To define them just select it from the frameworks list (Bootstrap, Foundation, Bulma, etc.) or create your own grid system from scratch. Each breakpoint has its own settings like min/max screen size, number of columns, gutter, etc.

Watch video below 🎬

Stacks

For those who worked in Sketch or Framer X, the name ‘Stack’ is already well known. In this concept, I used them because they can help to quickly control the number of columns and margins between components in that Stack.

So the task now is to prepare Stacks in such a way that later we can quickly rebuild them into 1 column on XS breakpoint.

Watch video below 🎬

A bit smarter components

We have a grid system now and let's assume that we already designed a page for XL size. So now we need to adapt our existing components for XS breakpoint.

In this concept, a breakpoint is a kind of an attribute of Frame to identify which component should be used in this or that breakpoint so you as a designer do not need to do it manually each time. Let’s create XS versions for all components in the UI kit.

Watch video below 🎬

And the moment of truth

When you are ready to start working on the design for another breakpoint just duplicate your frame and change its breakpoint to the one you need. All components will be replaced by those that were designed for that breakpoint.

Watch video below 🎬

Font styles

When you are building a big design system it’s so complicated to be sure that all the styles you are using are in the right place. Especially when you duplicate screens to build a smaller/bigger breakpoint from that 😄 To simplify that process create a font style and tell Figma how it should look like on each breakpoint.

Watch video below 🎬

So what was the challenge?

I tried to create a concept that will simplify the process of creating responsiveness. Also, I tried to keep it as realistic as possible from the development perspective and reused existing functionalities of Figma.

Share your thoughts and tell how you are working with responsive design in Figma 😉

Thanks!

Full video you can check below ↓