Solved

Change padding when toggle off a property

Forum|Forum|3 years ago
July 10, 2023
14 replies
5787 views

Hi, community!

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.

How the component looks like:

I’ve found a solution using variables, although it’s not possible to connect a variable with a property toggle, right?

Ask the community

This topic has been closed for replies.

Best answer by Sergio_Miguel

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.

fernandolins_cs

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.

Smith_Samuel_D

Active Member

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!

.

Sergio_MiguelAuthorAnswer

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.

T

Tsahi_Matsliah

Hey @Sergio_Miguel

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.

I hope it solves your issue 🙏

L

Lynn5

Hi @Tsahi_Matsliah , I am trying to replicate your solution but when both icons are toggled on, I get 16px padding on both sides.

T

Tsahi_Matsliah

Can you elaborate on how you set all the parameters? And which layer do you add the 4px horizontal padding to?

Ricardo_Antonio_Cabral_Mejia

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.

Neil_Johnson

New Participant

Do you happen to have an example file showing the solution? I’ve been trying to get the boolean variables to work with the spacing and it’s driving me crazy. Was in the same situation as yourself trying to avoid creating variants for just changing the padding. Thanks!

Frazer

@Sergio_Miguel I have a similar needs, my solution was to add a wrapper frame around the icon, offsetting the icon to the desired visual location. Gives us adjustability on all the button sizes, and likely easy to refactor in the future when/if we get better access to variables combined with bools.

Let me know if it helps!

Sergio_MiguelAuthor

@Frazer We had that solution in the past, and I am still using it in some components.
Like I mentioned before I ended up solving this with a variable for the padding. However, it would be cool if Figma allow to link boolean properties with variables to avoid the designers having to change the variable manually.

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO