Auto layout is great but the ‘fill container’ options spreads the items equally. It would be great to specify that an element should take up two thirds of the parent. This would be possible by adding a property similar to flexbox. I created this codepen to show how this allows nice grids:
By default this property would be ‘1’ for items. If the user has an auto layout frame with two items this property can be set to ‘2’ so the item would take two thirds of the container.
This could be added to the menu where the stacking order and basement align is changed to avoid adding complexity for users who don’t need this feature.
If your layout is easily divisible in fractions like that then that’s a good solution, but if for some reason it needs to be exact, like say 31% for arguments sake, then it really would be nicer to just set a percentage number as the width.
The only and easiest way to do that that I know of is to split the sections up in frames, as wide in pixels as they are supposed to be in percent. I.e. 31% = 31px.
Set the constraints on these frames to scale and then wrap them inside a 100% (100px) frame. Then scale this frame to the supposed size and the inner frames should keep their proportion still.
I am aware of the grid but it does not do the hugging of child elements. The height cannot be changed in the component area instances. The auto layout is also overridable in instances so you could create variants with different layouts.
This could be related to the grid column you set on your document.
You could choose “auto layout” or “flexbox grid”. Once you select the element and the flexbox grid is activated, instead of fill container, or hug, you have the number of columns you want…
+1 for this, we have a lot of components that have mixed column widths. Even with the “stretch” property set, often the items don’t truly remain aligned to the layout grid itself, they stretch based on percentage.