Color chaos - Figma tooling
Design systems doesn't just mean libraries. I used AI tools to rapidly iterate to solve breakdowns in design processes between design and engineering and to measure what exactly is design system success.
Legacy color systems
While leading the design system team for Fanatics Sportsbook I led the project to modernize how we apply color with variables in both design and code (See Fanatics Design System for more). But, new ways of applying colors means replacing old ways.
There were multiple libraries supplying color styles, variable iterations, local colors and unattached hex values to production ready designs across the product. Designers were confused with what old colors mapped to what new colors and engineers weren't sure what values were the source of truth causing delays in the handoff process and unnecessary back and forth.
Using a Node.js developed dashboard I developed to report Figma library utilization, we could see exactly how designs were performing on their journey through design system adoption.
Working with design and engineering
By talking with engineers and designers, I tried solving the problem from two fronts.
With designers, I ran workshops and created video tutorials on how to swap variables, wrote documentation and secured dedicated time every sprint to allow designers to focus on design system implementation
With engineers I put together maps of variables and old values from the codebase and created a simple plugin to identify variable replacements.
Rapidly iterating with AI
Engineering didn't want a plugin in their process, they just wanted accurate values. Designers were overwhelmed and migration with current tools took too much time. Using AI code editors I began rapidly iterating on that simple plugin to see what was possible within the Figma ecosystem and began concepting design solutions to process problems.
One click fix
The new plugin allows designers to not only get an overview of a screen's color usage from all sources, but to instantly migrate colors to the new variable structure. No more lengthy migration by hand or reference docs. Product designs were instantly ready for advanced features like mode switching saving designers significant time.
Through AI iteration, I was able to concept features that I wouldn't have thought of and anticipate potential problems.
Measuring success
Through the use of the Figma rest API dashboard I created, I could easily measure what success actually looks like for design system adoption. By tracking style and variable usage over time we could quickly see uptake of the new variables in design, lessening confusion in the handoff process and freeing up designers time for more important work.
Future of design tooling
Through my work designing and building innovative plugins and dashboards, the problem of variable adoption in our design files was mitigated. Old design libraries could be deprecated and confusing and large dropdowns of options and modes consolidated. Learning how to integrate AI into my own workflow helped to iterate and create scalable solutions.
I'm interested in how to integrate that work through AI into the larger process in order to avoid problems like this in the future. Why create plugins to migrate variables when I could create plugins to suggest components, design patterns, or variables through AI linting. The future of this plugin is potentially a place for all variable management within Figma. There are a number of other problems to be solved that I have created a platform solution for the future.