Fractional width autolayout

I love autolayout combined with frames but when I design dashboards I often want to fractionally position my content (such as cards with graphs). E.g. I want a bigger graph to take 2/3 of the available container’s width and the smaller one to take the remaining 1/3. Now I can only set Fill container on both graphs but then each will take up 1/2 of the width.

Is there a way to do this in Figma? If not, I think this is something a lot of designers would benefit from.

4 Likes

My advice when wanting to size by fractions or percentages is to not use autolayout.
Just use a normal frame. Inside, scale the children to fill up all the space. So if you have a frame that is 1440x1024 then all children that you want to set sizes like that also need to be the same size. Then you edit it’s width/height how you want it.

  • For percentages, you replace the width with your desired percentage. Like 66%
  • For fractions you multiply the width with the desired fraction. Like 1440*2/3

So since you have two sections you go for section 1: width*2/3 and for section 2: width/3 (multiplying by 1 is unnecessary)

Then you place them where they need to go.
Lastly you change the constraints to scale.

If autolayout is necessary then just wrap this inside an autolayout frame.

The recent auto layout update is what brought me back to Figma after using in Framer for a while. Figma is good enough for now, but I’d love to see it catch up to Framer’s layout capabilities with “fr” units, grids and wrapping.

2 Likes

This topic was automatically closed after 30 days. New replies are no longer allowed.