Install in Figma
How it works
Bind widths and heights in %, choose Content or Frame basis, and see changes live.
1. Bind in %
Set W/H and Apply. Bind only when an element lives inside a frame or group with a measurable size.
2. Choose Basis
Content or Frame, matching the web box model. Content (inner content area) or Frame (outer size including padding/borders)
3. Preview live
Toggle Auto Mode to see changes while designing.
Percent binding that respects real structure
Install in Figma
Install
Install in Figma
How it works
Bind widths and heights in %, choose Content or Frame basis, and see changes live.
1. Bind in %
Set W/H and Apply. Bind only when an element lives inside a frame or group with a measurable size.
2. Choose Basis
Content or Frame, matching the web box model. Content (inner content area) or Frame (outer size including padding/borders)
3. Preview live
Toggle Auto Mode to see changes while designing.
Fluid, percent-based layouts made practical
Convert and bind sizes to percentages relative to their parent. Keep them in sync, batch-apply changes, and build responsive designs with confidence.
Smart Binding
Convert pixel values to percentages and keep them bound to their parent. Changes sync automatically.
Flexible Basis
Choose between Content or Frame as your percentage basis. Different math, different results.
Batch Operations
Update multiple elements at once. Apply percentage presets or sync all bound elements together.
Plus
Pixel Rounding
Optional pixel rounding keeps your designs crisp. Toggle on/off based on your needs.
Transparent State
Always know what's happening. Clear indicators for "Not bound", "Out of sync", and binding status.
Auto Mode
Real-time updates as you resize. Changes apply instantly without manual sync.
Plus
What you can control
Controls that map to how the web works
Width & Height (%)
Set and link them (toggle Link) if you want symmetrical changes. Presets (25/33/50/100) accelerate common layouts.
Min/Max (PX)
Add constraints that clamp the computed size just like CSS min/max. The UI shows Limited when any min/max is active.
Basis dropdown
Switch between Content and Frame; the UI recalculates immediately and also stores the selection on the node for future math.
Status line
See Bound / Not bound and Out of sync right where you edit.
... and many more.
Percent binding that respects real structure
Install in Figma