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? 🤔

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.


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?


Bruno_Figueiredo

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


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?


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