Figma Support Forum

Simple padding system in an auto-layout frame

I want to use auto layout with vertical direction and have all components with horizontal padding of 40 and a few components with 0 padding. Additionally, I want to be able to scale the parent frame horizontally (different device sizes) – in a way so the components preserve their paddings (0 and 40). I don’t see an easy way to do it. Why constraints are not available to children frames of auto-layout. Am I missing anything?

P.S. The solution to this would be to do everything with 0 padding and add 40 paddings to the majority of component. This creates a lot of complexity when dealing with layers. I would love to find an easier solution.

A post was merged into an existing topic: Edit the space between items (paddings) in auto layout independently

Голос был перемещён.

I think the best solution would be the following:

In the case of the vertical auto-layout I would love to be able to set a fixed width of child element and also be able to add “left and right” constraint. This way the child element would scale horizontally with the parent element.

are the components in the stack different, or instances of the same one? why could you not create a variant of the component that has the desired paddings and set all the components, either variant, to “fill container”?

make a component with variants: one is the top-level variant with no padding, the other is your nested variant with the indention padding you want. both have the same overall width. when you put them in a auto-layout frame or group you can set the children to “fill container” in their resizing constraints. now whenever the auto-layout container is resized horizontally the components will also resize and they will maintain the desired paddings.

the only things you need to make sure to set correctly are the anchors of the layers inside the components so they maintain their position as the auto-layout group is resized.

this should satisfy your desires, and i do not see how this adds complexity.