Figma Layout Fractions

About this plugin

📐 Figma Layout Fractions

Bring CSS-style fractional layouts into Figma — now with full support for px, %, and decimal fr units.

Design responsive layout systems using familiar syntax like:

100px 50% 1fr 2fr

🔧 What it does

Apply flexible widths to any selection inside a Frame or Group

Mix px, %, and fr units in any combination

Support for decimal fractions like 0.5fr, 3.25fr, etc.

Automatically rounds widths for clean pixel-perfect layouts

Works across single or multi-row selections

🧪 Real-World Example

Container: 600px

Padding: 10px each side

Gap: 10px between items

Layout: 100px 50% 1fr 2fr

🧮 Output:

100px (fixed)

300px (50% of full width)

Remaining space split between 1fr and 2fr

53px (1/3 of leftover)

107px (2/3 of leftover)

Perfect for layout prototyping, grids, or creating design systems with math that matches the web.