Percentage based scaling in autolayout

I’m not sure if this has already been requested, but I still wanted to share this idea.

Right now you can use Fill container to make elements responsive inside an Autolayout frame. But what if I want 1 element to be larger/smaller than the rest, but still responsive (so not using fixed)?

For example: you can set the width of a child element to 50% relative to its parent frame, which uses auto layout, while leaving the other elements set to Fill Container. This way, when the design is scaled down, the layout adjusts automatically without requiring you to apply a new fixed width each time you scale up or down.

This approach would make creating responsive designs much easier and faster. It would also improve the handoff to development, as developers can directly use percentage units in the CSS. There’s no need to explain how you want the responsiveness to work, since the units are already built into the design.

7 Likes

2 posts were merged into an existing topic: Use percentages for heights, widths, margins, gutters in auto layout

12 votes have been moved.

Hey @Bram_Huinink, thanks for the feedback!

This is already on our radar for the future. Feel free to add your feedback for the team and vote here:

1 Like