I am dealing with an issue and I’d like to see if anyone experienced the same and can share the solution. Any ideas to test are welcome.
So in my company’s Design System, we have components that when we activate a toggle the padding can vary, like a button that by default has 16px left padding but when the button has an icon the padding is only 12px. So if it was the other way around I’d just solve this with, a not-very-nice hack of, having the icon inside a box with the additional padding, but in this opposite scenario I’m not finding a good solution for this.
Did anyone have the same issue and want to share the solution? I’m trying to avoid a new variant for this only because of padding, but it’s not easy.
There are two ways you can solve this, none of them are great:
Instead of using padding, use spacing elements where the padding would be, and then use the visibility toggle to hide/unhide the 12px and 16px spacing elements as needed.
Create a variant of the component where the padding is different, but that means that instead of using a toggle on the property, you’d choose between “Icon” and “No Icon” or something like that.
Adding onto what @fernandolins_cs said, you can use a variant, but still create the component property as if it was a Boolean property. i.e. “Icon Right”:“true, false”. If you write your property in this way, Figma will display a switch control just like a Boolean property. This also works for “on/off” and “yes/no” value pairs!
Thank you both. I am aware of that, although if you read my first comment my goal was to avoid having a variant only because the padding changes when toggling on an icon The way I solved it was adding a boolean variable and a number variable to the padding and this was when I apply the “Icon on” it changes the padding accordingly. This solves the issue, the only thing that is not perfect is that variables are not shown in the properties panel, which means that our designers need to be educated that there are components with properties and variables and they have to look for both.
Maybe this is something Figma can improve in the future and centralize the configurations in one place.
Our daily.dev branding also follows this spacing guideline.
I was able to fix that by following these steps:
Add 12px padding for the button in all variations
Insert the text layer into an “auto layout” layer
Set 4px horizontal padding for the “auto layout” layer
Attached are two images from my library
One icon
When you turn on the toggle to show the “left icon” in the property section, you will have 12px on the left side (where the icon is set) and 16px on the right.
Two icons
Turning on the toggle of both icons gives you a 12px padding on both sides.
Thank you! This is what worked for me without introducing variables or complexity. I wanted 16px padding on both sides without icons or 8px when icons were present.
I set the “default” padding to just 8px on both sides, then put the text within a wrapper with auto layout, which also had 8px padding on both sides.
The way I solved it was adding a boolean variable and a number variable to the padding and this was when I apply the “Icon on” it changes the padding accordingly. This solves the issue, the only thing that is not perfect is that variables are not shown in the properties panel, which means that our designers need to be educated that there are components with properties and variables and they have to look for both.
