Scaling Design Efficiency Through Figma Variables

As part of our effort to unify the design experience across multiple products, our UX team had been migrating to a shared component library using Angular and Material 3 (M3) in Figma. I was working on a feature slated for release across three separate products, each with its own visual theme.

The Problem

Despite using a shared library, I quickly realized that our team lacked a scalable way to switch themes. Each product’s design had to be recreated manually, which:

  • Wasted time
  • Increased the risk of inconsistency
  • Created bottlenecks when changes were needed across multiple versions

My Role

l

Senior UX Designer

cross-product scope

T

Self-led initiative

in system optimization

l

Collaboration with team

design system owner and UX lead

What I Did

Actions Taken

The above image shows a page from the internal presentation.

E

Identified the inefficiency

Noticed that Figma’s component library did not support dynamic theming, which made cross-product design painful and inefficient.

E

Upskilled myself

Took a Figma course on variables to better understand how to implement a scalable, themeable system.

E

Prototyped a solution

Set up a test library using Figma variables to demonstrate how styles and components could dynamically switch between product themes.

E

Evangelized the impact

Created a short presentation outlining:

  • Time lost to manual recreation
  • Risk of visual inconsistencies
  • Long-term benefits of variable-based theming
E

Got leadership buy-in

Presented to our UX team lead, who gave the green light to move forward with implementation

E

Collaborated to integrate

Worked directly with the design system owner to implement and scale the variable system into our main library. Ensured all changes were documented and communicated clearly.

Results Achieved

Reduced time

spent redesigning for each product

Instant switching

enabled between themes

Improved consistency

across multi-product design efforts

Empowered others

to adopt the new system with minimal ramp-up

Takeaway

Valuable Lessons Learned

This experience showed me the power of proactively solving design system inefficiencies and how scalable design infrastructure can unlock productivity and quality at the same time. It also reinforced my belief that UX architecture isn’t just about individual experiences—it’s about creating ecosystems that support designers, developers, and users at scale.

Tools

  • Figma
  • Material 3
  • Angular

Focus

  • Systems Thinking
  • Scalability
  • Efficiency

Skills

  • Leadership
  • Strategy
  • Internal Advocacy