Skip to main content
Question

Can text in a variant have a bounding box?


Hi! I’m very new to Figma and need your help!
I would like to resize the width of the frame around the text. I made the auto layout frame with “Hug” for width and height. I can drag the bounding box on text from left to right and the frame will change the width and height accordingly. This is what I want.

I made it into a component and it still keeps the same behavior. Great!

I then create a variant with it. Now it has lost the bounding box on the text layer and I can’t change the width at all. Does anyone know the work around or plug in to keep the resizing ability?

4 replies

Celine_D
Figmate
  • Community Support
  • 3381 replies
  • October 25, 2023

Hi Jun!
Thank you for reaching out to the community. The variant you called is “the instance”, if you would like to edit the instance, you can “detach the instance” by right-clicking in your component instance, and select “detach instance”. This will let you to resize the bouding box. Hope it helps!


  • Author
  • 1 reply
  • October 30, 2023

Thanks @Celine_Figma !
So… assuming you cannot resize sublayer inside the instance? I was hoping there’s a way.


Celine_D
Figmate
  • Community Support
  • 3381 replies
  • October 31, 2023

You are welcome!
Can you clarify how you cannot resize sublayer inside the instance? If you have an example, this will help us to visualise it.

As a reminder, by detaching the instance, this allows you to create a variation of a Component from your changes.

When you detach an Instance Figma will:

  • Make the Instance a regular frame, while keeping the current layers and properties.
  • Remove the link to the original Component.
  • No longer apply any changes made to the Component, to that object.

Bauke_Schildt
  • Active Member
  • 55 replies
  • November 27, 2023

Yes, in instances you won’t be able to resize the bounding box. If this is a behaviour you need all the time, maybe you should just use a text layer in an autolayout, not a component.

There are 2 workarounds (besides detaching the instance, which would negate most of the advantages of using a component):

One:
In the instance, change the properties of the bounding box to “fixed width” and set the width (In pixels). You can’t drag the bounding box, but you’ll be able to control the width of the bounding box that way.

Two:
Set the text layer to “Fill” and change the right-hand padding on the Autolayout layer above the text to control the width of the text.


Reply


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