Skip to main content

Breakpoints

Breakpoints let you display different variants of your component when the browser window width changes.

Adding breakpoints

To start using breakpoints you need to add a variant property called breakpoint to your component in Figma.

To do so, select the component in Figma, in the panel on the right click "+" button in the "Properties" section and select "Variant". This will create a new variant, you then need to change the property name to breakpoint (it's case-sensitive, so make sure to name it properly).

Let's change the values of these variants to your liking, I usually go with mobile, tablet and desktop. After this, you can tweak how the breakpoint variants look.

Once you're done, open uipkg plugin and select the component, the plugin will detect the breakpoint property and generate a responsive component.

Breakpoints widths are taken from your component variants widths, if you ever need to change the breakpoint, just resize your component.

Adding a new variant in FigmaAdding breakpoint property in Figma

You can find breakpoints in action in this Figma file:

Responsive Figma frame

When you add a breakpoint property to your component, you can then create a responsive Figma frame to see how your component reacts to different widths straight in your Figma canvas.

Adding responsive frame

After you create a responsive Figma frame, you'll have a new element like this one, it even works when the plugin is not open.

Responsive frame resizing

Previewing

You can test the responsiveness of your component in the Preview tab in the plugin by clicking on the Responsive View button

Preview responsive mode