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?

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!

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

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.

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):

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.

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.

1 Like