Percent Bind - Just Like CSS

About this plugin

Percent Bind lets you size elements with percentages and text with REM, just like CSS.

Set a layer's width and height as percentages of its parent (Frame or Content). Control text sizes with REM values and one shared Base setting.

When your structure changes, click Sync to reapply your stored values. With Plus, switch on Auto Mode and watch bound elements adapt live as you design. Test layout variations like 30/70 vs 33/67 or adjust your Base text size without manual calculation.

Why it's useful

Decide proportions early: 30/70 sidebar, 38% text column, 3×33% cards, 16rem headings.

Reduce rework: Sync reapplies your percentages and REM values precisely when the parent changes.

Build faster: Hand off clear specs to your team: "card width = 33% of content, min 280px" or "heading = 2rem at 16px base."

How to use

For element sizing:

1. Select a layer inside a parent
2. Pick Basis (Frame or Content)
3. Enter %W / %H and optional Min/Max
4. Click Bind

For text sizing:

1. Select a text layer
2. Open the Text tab
3. Set REM value and define the Base (px) stored on the outermost frame
4. Text size = REM × Base, applied automatically

When structure changes, click Sync or use Sync Tree (Plus) for multiple elements. Toggle Auto Mode (Plus) to see updates live as you resize.

Notes

Bound sizes respect your chosen Basis, Min/Max, and Shrink settings. REM text updates automatically when you change the Base.

This plugin works within Figma's constraints. Some edge cases (complex Auto Layout, certain instance overrides) won't mirror browser behavior exactly.

Sync affects only the selected element. Plus features: Sync Tree applies across selections; Auto Mode updates bound sizes live while you edit.

What's upcoming

1. Viewport units (vw, vh): Size elements and text relative to the canvas
2. Fluid typography: Combine REM with viewport units for scalable type systems
3. REM for spacing: Set padding and gap values in REM for consistent, scalable layouts