Fluidity,

without the math

Install in Figma

Free plan available

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

© 2025 Percent Bind · v5.2.0

Install

Fluidity, without the math

Built for designers who prefer fast workflow

Install in Figma

Free plan available

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