Skip to main content
Alberto11
July 17, 2023
Solved

Auto-layout for asset that has many layouts

  • July 17, 2023
  • 1 reply
  • 356 views

I have the attached design. I’d like to add auto-layout so that I can switch off and add more layers to it as needed. I’d like it to be responsive just in case the line of text becomes greater than 2 lines. I don’t know what I’m doing wrong but nothing seems to work. How do I go about this?

image

image

This topic has been closed for replies.
Best answer by Edwart

To achieve this you need to nest Auto Layouts.

  1. For this setup you start by creating the three text layers and group them in an Auto Layout (vertical).
  2. Then create the button and the number and group them in an Auto Layout (vertical) also.
  3. Create the thumbnail layer
  4. Select the thumbnail layer, the text Auto Layout and the button Auto Layout and create a new Auto Layout (horizontal).

To get the responsive behaviour you need to set the text Auto Layout to fill container, also set the text layers inside to fill container.

Screenshot 2023-07-18 at 08.12.21

The file: https://www.figma.com/file/IRmUlIMmLRoSvrWX0dl22S/Untitled?type=design&node-id=1%3A5&mode=design&t=SBGZgH1RR3744yUm-1

1 reply

Edwart
EdwartSolution
July 18, 2023

To achieve this you need to nest Auto Layouts.

  1. For this setup you start by creating the three text layers and group them in an Auto Layout (vertical).
  2. Then create the button and the number and group them in an Auto Layout (vertical) also.
  3. Create the thumbnail layer
  4. Select the thumbnail layer, the text Auto Layout and the button Auto Layout and create a new Auto Layout (horizontal).

To get the responsive behaviour you need to set the text Auto Layout to fill container, also set the text layers inside to fill container.

Screenshot 2023-07-18 at 08.12.21

The file: https://www.figma.com/file/IRmUlIMmLRoSvrWX0dl22S/Untitled?type=design&node-id=1%3A5&mode=design&t=SBGZgH1RR3744yUm-1

    Terms & ConditionsAccessibility statement