Hey guys, I was wondering if anyone figured out how to use modes to switch icon sets. So let’s say I have Brand A and Brand B in my modes, and the colors and spacing change when I switch brands. Can I also somehow make the mode switch my icons? (in a way thats actually feasible to use over the long run). Like an edit button that has a pencil icon: both brands would have different pencil icons, both named exactly the same. And switching brands would swap one for the other.
Question
Switching between icon sets in a multibrand design system?
Hello @Julia57, Thank you for reaching out about this.
While we await input from experienced designers in our community, I’d like to share some resources with you. These resources may not perfectly align with your needs, but I hope they could help:
I hope these resources inspire you a bit. If anyone in our community has insights or workarounds for this issue, please feel free to share them here.
Thanks once again for your input.
In case anyone has the same question in the future:
I HAVE THE ANSWER!!!! my team has been struggling with this for months and none of the solutions out there were helping us preserve the color overrides. The issue is that when you use variables and modes to control the variant swap between brands, Figma effectively resets the instance instead of preserving the overrides.
The solution was to separate the shape control from the color control. In each icon, we have one version for each brand as a variant. This then gets wrapped in Boolean operation layer like Union (doesnt matter which one), and the color is applied to the Union layer. This way, the color doesnt get disturbed by the the variant-swapping process.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.