Hi everyone,
We’ve established a design system in Figma using templates. Our current process involves duplicating templates and then manually adjusting the colors, typography, and other design properties for each project. While this works, we’re looking to streamline the management of design tokens, especially when it comes to colors.
For example, when we change the primary color, we want the related color variations (like hover states) to automatically adjust without manually updating each one. At the moment, we’re unsure how to automate this process effectively.
Question
Design system tokens
The way we solved this in our team was having a library to hold our colours, typography, etc, we use these colours in our “white label” product. We can then change the pages in our working document to a different mode that will change brand colours and fonts depending on the mode(brand) selected. I created a plugin to apply the mode of one page in all other pages of the document so we could do it faster.
Thanks for responding. That sounds promising,
Is this plugin for public use, so that we can try it?
Yes, it is, here’s the link: https://www.figma.com/community/plugin/1421219059899002248/apply-modes-to-all-pages
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.