menu

Figma

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

Channels
Team

Objects that respect padding with a fluid-width text layer

November 6, 2018 at 10:23pm

Objects that respect padding with a fluid-width text layer

November 6, 2018 at 10:23pm (Edited 7 months 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.

Image

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.

like-fill
4
  • reply
  • like

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

like-fill
1
  • reply
  • like

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.

like-fill
2
  • reply
  • like

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

  • reply
  • like

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.

  • reply
  • like

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

  • reply
  • like

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.

like-fill
1
  • reply
  • like

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

like-fill
2
  • reply
  • like

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

like-fill
1
  • reply
  • like

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

  • reply
  • like

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.

Edited
  • reply
  • like
  • reply
  • like

December 18, 2018 at 10:11am

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.

  • reply
  • like

December 18, 2018 at 4:12pm

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

  • reply
  • like

December 19, 2018 at 2:38am

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

like-fill
1
  • reply
  • like

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.

  • reply
  • like

March 27, 2019 at 5:39pm

Same 🙏🙏🙏🙏

  • reply
  • like

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.

  • reply
  • like

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

  • reply
  • like

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

  • reply
  • like

March 29, 2019 at 1:47am

Another lack of Stacks issue? I think so.

like-fill
1
  • reply
  • like

April 22, 2019 at 9:32am

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

like-fill
2
  • reply
  • like
private
This channel has been archived