Minimum text width in auto frame component

Ask the community
1

Hi all

I am creating my component library and for one component I have a text entry box.

I would like it such that there is a blank state (cursor and helper text only) and a fixed width, plus a positive state (green border and tick icon at right of frame when any text is entered).

I have done all of this succesfully using auto layout, other than the fact I want the text frame to have a minimum width and only expand when text exceeds that width.

image

At present, I have the text set to hug so when the text entered is short the width of the box decreases. However, I am wanting the box to stay at the minimum (original) width of the blank state box until the text is long enough to expand whilst maintaining the gap between text and icon as set in auto layout.

Would appreciate any help! Thank you

2

Hi Brendan,

Here is a way to do it, feels like a hack but easy :slight_smile:

Have an invisible object (line or similar) to hug inside your field so it prevents the frame from getting too small:

image
image2553×687 94.9 KB

4 Likes
3

Thank you so much JanKragh!

Got this working; I really appreciate the quick help :smiley:

1 Like
4

Your welcome Brendan :+1:

I hope Figma implements min/max height/width at some point, it will make things a lot easier

1 Like