How to make DIY breakpoints in Figma
By: Arthur Savchenko
Tags: Visual Design, Figma, UI, Prototyping, UX

In this article, I will tell you how to DIY a Figma #frame that switches between different designs while resizing. This technique makes it possible also to create an adaptive layout simultaneously with horizontal and vertical points. And I will tell you how to create breakpoints for iOS Size Classes with Compact and Regular ranges.

First of all, checkout the file and make sure that it works.

Tutorial

In order to understand the principle of this technique, let’s create a main frame 500 wide with unchecked clip content box and draw a red rectangle of the same size inside.

Create the main frame and red rect inside

Now add an extra frame above the rectangle, which is offset to the right for example by 200 and has a width of 300. Then move the inner rectangle by -200 so that the rectangle visually aligns inside the main frame.

Add the extra frame with offset

You should also set all constraints so that stretching is left & right for all content.

Now, when we change the main frame to a width of 200 or less, our additional frame at this moment should be 0 or less. In this case, Figma begins to flip the frame to the right, outside the main frame.

And this is what we need!

Setup constrains and preview the flip to the right behaviour

If you now check the clip content box back, the flipped content will be completely hidden when the frame size is 200 or less.

Let’s add a blue rectangle to the very bottom. It will be visible all the time. But when the size of the main frame is more than 200, it will overlap with the red rectangle. Thus, the blue rectangle is visible in the range of 200 or less, and the red rectangle is visible in the range of 201 or more

Finally, we get the Figma #frame that switch different layouts on breakpoint

Content switches in Breakpoint

Notice: each layout for a specific range must have a non-transparent background. Since otherwise, other layouts will shine through from below.

Fix the problem

In general, that’s almost all. It remains to fix one small problem. If at least once we set the width of the main frame to less than 200, then our shifted frame will change its position and be saved, and the technique will stop working.

To solve this problem, let’s turn the main frame into a ❖ component.

Convert #frame into component

Now when you create an instance and resize it instead of master, everything will work fine.

Breakpoints plugin for Figma

In practice, creating and maintaining such a structure is difficult. With any change, you need to do a lot of manual work. Therefore, I created a plugin that manages the entire structure of shifted frames automatically. It remains only to select design frames that will be masters for each range.

The plugin has the ability to add horizontal and vertical ranges at the same time. In this case, the selection of master layouts looks like a matrix.

This is useful when designing an interface for iOS based on Size Classes. If you select the point 683 as a vertical and horizontal breakpoint, then all that is less than 683 will be Compact, and all that is 683 and more — Regular (Point 683 is selected by analyzing iOS screen sizes and split views).

DIY horizontal and vertical breakpoints

The principle of manually adding vertical ranges is based on a similar shift of frames only vertically. In this case, we simply group all the horizontal frames into vertical frames with offsets.

Checkout the sample file to see in detail how to organize horizontal and vertical breakpoints together.