Skip to main content

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

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

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.

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

Figma – 21 Jun 22

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

Terms & ConditionsCookie settings