Skip to main content
Solved

Button Variants: How do I prevent swapped icon overrides from showing after setting icon property to "none"?

  • February 1, 2021
  • 5 replies
  • 2952 views
MadsHenriksen

First of all, I apologize if my question is a bit confusing - I found it very difficult to describe the issue I’m having 😅

So I have this button component that uses Variants. The component has an Icon property that can be set to None / Left / Right / Both, and it works great!

Swapping the nested icon also works as intended, but if I, for some reason, decide to hide the left/right icon later (e.g. Icon: None), the icon still shows.

Any idea of what I’m doing wrong here? 🤔

image

If it helps, my button components has the following layer structure:
image

Thank you.

Best answer by Bruno_Figueiredo

Hey, @MadsHenriksen

I explained some best practices here so this doesn’t happen:

Figma – 1 Feb 21

Basically, you should wrap your “icon collection” instance inside a new Icon component that is the one attached to the variant properties.

View original
This topic has been closed for comments

5 replies

Bruno_Figueiredo

Hey, @MadsHenriksen

I explained some best practices here so this doesn’t happen:

Figma – 1 Feb 21

Basically, you should wrap your “icon collection” instance inside a new Icon component that is the one attached to the variant properties.

h.rude
Steven
Rinker_Todd
3 people like this
  • h.rude
    h.rude
  • Steven
    Steven
  • Rinker_Todd
    Rinker_Todd
MadsHenriksen

That did the trick!

Thanks @Bruno_Figueiredo

Thor_Johannes_Wang

Nice! But this does mean you need to go a level deeper when replacing the icon. Which may not be very intuitive for people who don’t know about this workaround?

Lucky
Design_Expert
2 people like this
  • Lucky
    Lucky
  • Design_Expert
    Design_Expert
Bruno_Figueiredo

@Thor_Johannes_Wang Yeah, and I believe the Figma team is working on this for the upcoming Figma Variants updates.

HonzaTmn
Steven
2 people like this
  • HonzaTmn
    HonzaTmn
  • Steven
    Steven
h.rude
  • h.rude
  • 42 replies
  • October 7, 2021

@Bruno_Figueiredo Your solution worked just awesome!! I was really grateful for that … but all of sudden Figma stopped swapping the icons AT ALL?! Is that a bug or did something happen so the concept above is not working anymore?

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings