Skip to main content
Question

Interactive Component Icon Component Set Variant Not Being Preserved

Alex_Payne

I created a component set of icons with two properties: icon type and hover

I created a component set of cards with one property: hover, so that whenever you hover over an instance of that component, it changes to the hover variant.

The card contains an instance of the icon set and a label.

In my frame, when I toggle a card’s hover state, it shows the proper icon with the proper label.

But when I play it, hovering over a card shows the correct label and just the icon I happened to have in the hover state of the card’s hover variant.

What am I missing? Is this a bug?

Screen Shot 2022-06-20 at 10.39.00 PM

Screen Shot 2022-06-20 at 10.38.42 PM

Screen Shot 2022-06-20 at 10.38.27 PM

Screen Shot 2022-06-20 at 10.38.14 PM

This topic has been closed for comments

4 replies

Alex_Payne
  • Alex_Payne
  • Author
  • 6 replies
  • June 21, 2022

Here is the link: https://www.figma.com/file/AVT3bAhDQYnNqwebCUqgjp/Purple-Cards

Alex_Payne
  • Alex_Payne
  • Author
  • 6 replies
  • June 21, 2022

I managed to find a work around by just having a generic Font Awesome Icon and use that in my card component set.

Then every instance of the card in my actual frame has a text override for the generic Font Awesome icon, allowing me to preserve the icon used in the card’s hover variant.

It would be really nice if I could have the icon variants be the actual icons I want to use, instead of having to text override every card instance.

Screen Shot 2022-06-20 at 11.43.18 PM

Does anyone have any better ways of doing this that still preserve the icon used when hovering?

The shared file is up to date with my work around.

tank666
  • tank666
  • 4859 replies
  • June 21, 2022

I modified your file and everything should work properly now. Try swapping the instance at the “icon” layer level.

Figma – 21 Jun 22
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
A
  • Anonymous
  • 0 replies
  • July 21, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

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