Objects that respect padding with a fluid-width text layer
November 6, 2018 at 10:23pmObjects that respect padding with a fluid-width text layer
November 6, 2018 at 10:23pm (Edited 2 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
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.
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.
November 8, 2018 at 12:24am
December 10, 2018 at 8:58pm
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
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.
December 18, 2018 at 4:12pm
December 19, 2018 at 2:38am
February 7, 2019 at 9:45pm
March 27, 2019 at 5:39pm
or create multiple components that are all detached but basically the same
March 29, 2019 at 1:47am
April 22, 2019 at 9:32am
This channel has been archived