Skip to main content

Hi guys. I need help with creation of a component.

I want the component to behave like this

But, on different auto-layout options, I am getting the following results:


1




  1. Fill container:

    The text box is expanding to it’s limit even when the text is not enough to fill the space and the download button in the component is moving away from the visible text. But on adding more text, it is showing ideal behaviour.




  2. Hug contents:

    The download button is near the text, but on adding additional text the text box is expanding beyond the frame.




  3. Fixed width:

    The button is staying near the text, but the text box is not expanding it’s width on adding additional text.




I need a way to apply both hug content and auto-width option at the same time for such cases.

@Hemanth1


Here are 2 initial ideas:



  1. Use hug contents for the title + set a max-width

  2. Create a component with 2 variants: one where the title uses hug and the other where the title uses fill.


I lean towards the second option since it will be more responsive when you adjust the width of the main container.


→ Get Example File


Thank you that is really helpful ☺️. I implemented the 2nd idea.

Nate, do I get it right —> this solution is just a convenient way to fix quirks in design when you spot the overfills and you can wuickly switch variants of the same master component used here and there all over the project, but it won’t work automatically and responsively if all the instances will get new dimensions?


and even more interesting — what should the frontend programmer do to make a fully responsive component behaving like thee two variants?

it reminded me of the not yet implemended feature in Figma “container querries” which the guys have shown on figcon2023, utilizing breakpoints feature with enterprize-level access to unlimited variable modes for presentation (from 27:40 or even earlier )





exactly the question in this topic:



and basicly no interest to this idea with just 2 replies…

Reply


Terms & ConditionsCookie settings