Embedded Files
Design systems doesn't just mean libraries. I rapidly iterated to solve breakdowns in design processes between design and engineering and to measure what exactly is design system success.
The problem
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
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
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, rapid prototypes became easier to validate and improve.
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.
Â
Google Sites
Report abuse