Color inheritance with variables when using icon subcomponents in button

Question

Hi, I’m having issues with color inheritance using Figma variables/tokens.

The goal is to have our icons within button components inherit the token applied on the parent component (button). The icons are subcomponents exposed as an Instance Swap within the button component, so whenever we swap icons, ideally we want the icons to inherit the token applied on button. However, the icons inherit the default token applied to the subcomponent (Icon).

How do we persist the button icon token instead of overriding it?

Example setup:
<> = component

<Icon> vectors have token color/icon/default applied, which is Gray.

<Button> has <Icon> as a subcomponent, and <Icon> is exposed as an instance property.

We applied the token button/icon , which is White, to the <Icon> within <Button>

Eric_Carl · Accepted Answer

I was just having the same problem. A similar question was asked here and the solution was to make sure that the artwork layer in each icon component has the same name:

I made that change and it resolved the problem for me. Good luck!

jjortanez · Answer

I was just having the same problem. A similar question was asked here and the solution was to make sure that the artwork layer in each icon component has the same name:

I made that change and it resolved the problem for me. Good luck!

oh my gosh, THANK YOU. I was trying to solve this for hours. The layer naming is such a minor detail that it’s easily overlooked. Really appreciate you sharing this solution

Sign up

Login with SSO

Login to the community

Login with SSO