Spectrum is now read-only. Learn more about the decision in our official announcement.


Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!


Objects that respect padding with a fluid-width text layer

November 6, 2018 at 10:23pm
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Objects that respect padding with a fluid-width text layer

November 6, 2018 at 10:23pm (Edited 4 years ago)
I have a component that contains a text layer and an edit icon component, and I position this next to a text layer with 8px padding space. I'd like it for a component to maintain a specific px or % padding respective of a text field, the same way that in web design you can define the objects to behave with either standard inline-block positioning or with flexbox.
This is one feature Sketch still has that I've built out my entire product design component library around and is the only feature preventing me from totally converting to use Figma 100%.
The problem is exacerbated because you can't adjust the spacing of a subcomponent, so I can't push the edit icon component to the left or right without breaking apart the component.

November 6, 2018 at 10:53pm
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.

November 7, 2018 at 9:03am
+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

November 7, 2018 at 3:59pm
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
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.

November 8, 2018 at 12:24am
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 :/

December 10, 2018 at 8:58pm
I've built some manual workarounds, but I requires opening the wire-view to ensure I'm not clipping anything

December 17, 2018 at 9:30pm
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.

December 18, 2018 at 10:11am
For that design I'd keep the track and bar separate. You could presave different % as nested components.

December 18, 2018 at 4:12pm
Thanks. That's what I ended up doing for now

December 19, 2018 at 2:38am
This is my ONLY beef with Figma. I need this now 🙏

February 7, 2019 at 9:45pm
💯 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.

March 27, 2019 at 5:39pm
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

March 29, 2019 at 1:47am
Another lack of Stacks issue? I think so.

April 22, 2019 at 9:32am
Please Figma, we need this, it's essential. 🙏