Help auto resize component based on text length?

[mads1]

Hi, im trying to make a “smart component” which would auto resize based on the length of a text label, as well as resize other elements in the components.

i can successfully create a component with a text label which would automatically resize the frame/component based the length of the text, aka how you would make a normal make a dynamic button component by styling the parent frame, but for flexibility reasons i need the background of the button to be a separate component, that i can change and the effect will take effect multiple places, but i can’t seem to make this work with the ‘vanilla’ version of Figma, and would therefore like to ask if anyone out there have suggestions on how to achieve this, perhaps another layout plugin to assist, could point to related topics (already googled without much success).

i have added an illustration to help trying to explain what i am trying to achieve and how i currently have it set up in Figma.

thanks in advance
//Mads

[tank666]

1. Wrap the text layer and the background layer in an auto layout frame;
2. Set the absolute position for the background layer;
3. Set top and bottom and left and right constraints for the background layer;
4. Change the size and position of the background layer.

[mads1]

YES :D… that did it, the key was absolute, i constantly got stuck in “auto layout” forcing elements to be positioned side by side, i wish this was a bit more logical, but at least it’s following logic’ish from css :D.
thank you all for the quick replies.

[Robert_Wildling]

Old post, but I am facing the same problem. The solution here says: “set the absolute position for the bag layer” – how do you set an absolute position in Figma?

[Gayani_S]

Hey @Robert_Wildling, thank you for reaching out!

Absolute position is now called Ignore auto layout.

When you ignore auto layout, you can manually position an object inside an auto layout frame without following the auto layout structure.

To ignore auto layout, select a child of an auto layout frame, then click in the properties panel.

On the left you can see the previous design and on the right from UI3.

Alternatively, hold ‘⌃ Control’ while dragging an object into an auto layout frame to set it to absolute position.

Please let me know if you have any further questions!