Breakpoints

设计工具 · 5,824 likes

Preview responsive layout inside a Figma frame and share animated prototype

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 bp-support@floweare.com . We always welcome creative suggestions from our customers.

Open in Figma

Related plugins