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.
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.
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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
