Skip to main content
Solved

Hug and auto-width on same frame

  • November 6, 2023
  • 5 replies
  • 3221 views
H

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.

Best answer by Nate_G

@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

View original
This topic has been closed for comments

5 replies

Nate_G
  • Nate_G
  • Power Member
  • 180 replies
  • Answer
  • November 6, 2023

@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

1 Attachments
Nate G
Celine_D
H
2 people like this
  • Celine_D
    Celine_D
  • H
    Hemanth1
H
  • Hemanth1
  • Author
  • 3 replies
  • November 7, 2023

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

Nate_G
1 person likes this
  • Nate_G
    Nate_G
MaxZuman
  • MaxZuman
  • 26 replies
  • November 18, 2023

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?

MaxZuman
  • MaxZuman
  • 26 replies
  • November 18, 2023

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 )

H
Nate_G
2 people like this
  • H
    hajime_kitano
  • Nate_G
    Nate_G
MaxZuman
  • MaxZuman
  • 26 replies
  • November 18, 2023

exactly the question in this topic:

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

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