It's a painpoint for me as well, centered buttons with an icon left to the text are currently impossible to create in a component based manner.

There's a lot of common UI instances that this would apply to..

+1,000,000 points if it also follows a proper import from my Sketch files

This won’t be a solution for everyone nor does it address all auto-spacing scenarios, but I use FontAwesome which allows me to type the name of the icon (e.g “pencil-alt”) and the icon will appear. So with my button components, I can type “pencil-alt Edit”, highlight “pencil-alt”, set the font to fontAwesome, and now I have an icon next to the button text.

+1 - I'm using Icon Fonts to get around this too, though I do them inline in the text element (some chars are my typeface font, the last char is set to be our icon font).

Generally works fine but it has drawbacks:

1. It's slow to add a new icon (you have to create a new icon font every time)

2. You don't have full control over the icon and how far it is away from the text string

3. All the designers on the project also need to update the icon font when you update it

Bit of a headache

You can resize the container of the text and icon if one is constrained left and the other right but you have to eyeball the gap or use a hidden spacing element on the icon. It's fiddly and linear reflow is much simpler. Even in sketch it's not reliable if the elements overlap.

The problem comes about when its a sub component of larger components, and therefore can't be resized without breaking the component relationship

This is related with this thread https://spectrum.chat/thread/67f9a4b1-d293-4807-9a7f-eabfe1ca5bbc.

Yes, also a problem for me. What I do is placing multiple "icons" in different positions hidden on the master component. While using the instance I show/hide as it fits better. It's silly I know.

This is my white whale. I'll chase that whale to any thread where it breaches.

I've made a feature request for this 2? months ago too, I wish they configured the smart selection feature to help with this at least :/

I've built some manual workarounds, but I requires opening the wire-view to ensure I'm not clipping anything

Aside from keeping these components separate and using a generic group rather than component, is there a different way you'd suggest structuring your components for progress bars? I want to plan ahead and make it easy to change the look of my progress bars by using nested components and I want to be able to mock up varying levels of progress.

For that design I'd keep the track and bar separate. You could presave different % as nested components.

Thanks. That's what I ended up doing for now

This is my ONLY beef with Figma. I need this now 🙏

💯 Inline elements that bump other elements over when their width changes

The 'left + right' and 'top + bottom' constraints are almost there. If only this could work nested within groups, not just for the top-most frame.

For an interface design tool, this is not just a nice to have. It's essential.

Same 🙏🙏🙏🙏

I think many of us have posted on so many threads about this to the point of becoming obnoxious, but it just goes to show how important this feature is. I think maybe 60% of my posts on here for about a year are some variation of asking for this.

I still have to create a component, duplicate, detach from instance all the time for this use case

or create multiple components that are all detached but basically the same

Another lack of Stacks issue? I think so.

Please Figma, we need this, it's essential. 🙏