Breakpoints

About this plugin

Preview responsive layout inside a Figma frame and share animated prototype.

✅ Works even without the opened plugin window and anyone in your team can resize frame without the installed plugin. For the rest, you can share an animation prototype.

► Create Responsive Layout

► Share Animated Prototype

⛔️ There are a couple of restrictions:

1. Layouts must have a filled background without transparency

2. Hug contents value for breakpoint frame is not supported

ℹ️ This is because all the breakpoint layers are in one frame, one on top of the other. And this is the only way to get such an effect in Figma.

Step 1. Add new points and snap ranges to existing layouts. You will get a live preview frame that switches when you resize.

Step 2. Enable prototype switcher and share Figma animation prototype with your team as a developer guide.

Duplicate Example File ↓

FEATURES

→ NEW: Export Figma prototype with animations

→ Works without the opened plugin window

→ Custom values with Ruler

→ Horizontal and vertical

→ Suitable for Web, Android, iOS/iPadOS

→ Quick resizing to breakpoints

→ Variants support

iOS SIZE CLASSES

If you're working on iPhone and iPad designs, the plugin can help you create dynamic layouts for Compact and Regular ranges. There is a magic point 683 for both vertical and horizontal dimensions, which ensures that anything larger is a Regular size, and anything smaller is Compact.

Duplicate Size Classes Example File ↓

TRIAL

You have a 15-day free trial for each new file with new frames. Please do not copy frames from the file where the trial period ended, this will decrease the period of the new file.

LICENSE

Pay once, use forever! To purchase a license please visit our Product Page on Gumroad.

FEEDBACK

If you have a great idea feel free to contact us by email [email protected]. We always welcome creative suggestions from our customers.