Back to Plugins
Breakpoints

Breakpoints

Preview responsive layout inside a Figma frame and share animated prototype

mockuppointsresponsivesystemdesignautohtmlresizelayoutadaptiveprototypescreen

Plugin Preview

Breakpoints preview

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⛔️ There are a couple of restrictions:1. Layouts must have a filled background without transparency2. 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⛔️ Prototype generation was temporarily disabled after the latest Figma update (we are looking for a way to solve the problem)iOS SIZE CLASSESIf 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 ↓TRIALYou have a 3-day free trial for each new file with new frames. The layouts you create will continue to work even after the trial period ends.ℹ️ Please do not copy frames from the file where the trial period ended, this will decrease the period of the new file.LICENSEPay once, use forever! To purchase a license, please visit our Product Page on Gumroad. FEEDBACKIf you have a great idea feel free to contact us by email [email protected]. We always welcome creative suggestions from our customers.

Plugin Details

Version38
CreatedMarch 24, 2020
Last UpdatedJuly 14, 2026
Categorydesign-tools-other
CreatorArthur
Stats145885 installs, 6623 likes
PricingPaid

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • https://floweare.com