Skip to main content

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

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



Any visual references?

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

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

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