Skip to main content
Question

Autolayout list item component with these elements in

L

Hi,

I’m trying to create a fluid component that will have adapt to its wrapper container, but having trouble getting it right. It consists of:

rounded small image + text in two rows + text in two rows + a button

the button should float to the right regardless, but the other parts should just stay left aligned with the chosen padding.

I have two problems: I can’t get the button to float and when choosing fill to container the rounded small image gets distorted, but I don’t want its size to change.

Thanks in advance

This topic has been closed for replies.

5 replies

Alamaki
  • Alamaki
  • 48 replies
  • April 24, 2024

Here’s one way.

  • Frame with horizontal autolayout and gap:auto
    • Frame with horizontal autolayout
      • image set to fixed width and height
      • Frame with vertical autolayout and two text items
      • Frame with vertical autolayout and two text items
    • button
Pavel_Kiselev

Any visual references?

L

Not that I can share at this point, but imagine a list populated with instances of the component — could be eg. employees with an avatar, some metadata and a cta for each row where the cta floats right, but the rest just stays left aligned with a natural padding

Pavel_Kiselev

Hard to say, but according to what you have described I’d do it this way

Figma – 24 Apr 24

Copy to your drafts and see how it works

L

Thanks a lot Pavel. Works perfectly — and makes total sense why you’d do it like that now that I see it

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings