Active Member

Use percentages for heights, widths, paddings, gutters in auto layout

103 replies
10986 views

This makes it easier to use components in designs for different screen sizes. And then you don’t have to calculate every time what 40% or 60% of the width is.

This also makes it easier to design scalable applications that grow with the width of the screen.

Show previous replies

Mark_Chitty

New Member

Workaround for % based scalable bar-charts (and other scenarios)

Here’s a workaround component for this problem which uses Figma’s grid layout in 10 variants with stepped widths from 100% down to 10%. (It also uses Figma’s new Slot property, but it would work fine with a traditional ‘slot’ component as well). This has worked for me in creating scalable + reusable bar chart components.

My version is limited to 10% increment steps, so you can’t do more fine-grained widths than that, but the principle could be extended for 75:25, 33:66 or any other ratio, or heights instead of widths. You could also have more than 1 slot property so it could work for multi column layouts, etc.

Poliklot

New Member

I strongly support percentage values for Auto Layout dimensions, padding, and gutters.

I would also add support for calculated mixed units. In responsive web UI, we often need rules such as:

calc(50% - 32px)

Percentages alone and “Fill container” do not cover this when the rule belongs to one specific layer and must remain reusable across component instances.

Detailed use case and proposed behavior:
link to my detailed comment

Would love to hear whether this is on the Auto Layout / Design Systems roadmap.