At Druva, the design team and I have been working for the past few months on making our design system Orion more refined and connected to the codebase. This also means making it more structural, scalable yet open and user & MCP-friendly 🏁.
One effort towards that direction was to 🏷️ re-tokenize the color palette and styles used in our component library so that they are consistent across all formats of user interface: pages, tables, forms, data visualisations, etc.
While doing this, I used Figma's selection colors feature extensively 🙌 . It helped me assigned my revised tokens to my elements at scale. But it did not allow the selection of elements based on their type e.g. backgrounds, text, vectors, etc. And this meant a blocker for us as well since our tokens were designed that way, like is the case with anyone working with a production ready design system.
🌼 Color Me Good was a result of this necessity. The goal was to detect every color in use—both resolved hex values and design token references—and enable designers to search, filter, and select the elements where those colors are applied.
The result: More legacy documents are getting tokenize within a day, handoffs for new features are faster and more accurate, and product is shipped on time.
To know more about the process, lets together on a quick coffee ☕️ break.
Do check it out and share your comments.