WorkFusionDS
FusionDSMaking an enterprise design system dynamic
How I made KUBRA’s enterprise design system dynamic and variable-driven for 8 products, 12 designers and 30+ engineers, cutting 128 banner variations down to one component along the way.
Shown as FusionDS, a rebranded copy of the system with sample data, to respect client confidentiality.
- 128 → 1
- Banner variations replaced by one dynamic component
- 10 sec
- To build a data table. It used to take 5–10 minutes.
- 40%+
- Less prototyping time with interactive components
- 25%+
- Faster handoff after the new UI QA process

01 · The challenge
One system, many products, many brands
In 2021 I co-founded KUBRA’s desktop design system, and later founded its mobile counterpart. It grew to serve 8 core billing and payment products, 12 designers and 30+ engineers, for utilities and enterprise clients across North America, each with its own brand.
Building components was the easy part. The hard part was keeping hundreds of them flexible, consistent and fast to use as the products, the brands and the team kept growing. My focus was to make the system dynamic: fewer parts, more options, and less manual work for every designer who used it.
02 · Foundations
Variables as the single source of truth
I introduced and orchestrated variables for colour, typography, corner radius, spacing and margins, organised into clear collections: primitive colours, semantic tokens, typography, UI elements, and a client configuration layer.
Modes switch the same design between light, dark and wireframe, and between client brands. In wireframe mode, radius and borders drop to zero and colours turn neutral, so one file serves both early UX and final UI.



03 · Headline result
128 banners, one component
The system had 128 banner variations, many of them hidden inside variant sets, one for every mix of status, icon and content. I rebuilt them as a single component driven by advanced variables and component properties.
Designers choose a status, then switch the icon, title, extra content, hyperlink and close button on or off. The same approach now runs through badges, tabs and other components, and I trained the team to build this way.
128 banner variations became one component. There’s nothing to hunt for and nothing to keep in sync.


04 · Components
Fewer components, more flexibility
- Variants with toggles. One master component shows or hides elements with boolean properties, instead of a separate component for every variation.
- Responsive components. Components reflow to fit their container, so the same instance works from mobile to wide desktop layouts.
- Interactive by default. Buttons and other controls ship with hover, click and mouse-out states already connected. Drop one into a prototype and it already behaves like the real thing. This cut prototyping time by at least 40%.
- Prototyping with variables. Advanced prototyping with variables replaced duplicate screens for every state, saving screens and time.



05 · Tables
From columns to rows: a table in 10 seconds
Tables used to be built column by column. Hover and selected states were painful, and each table took 5–10 minutes to build.
I rebuilt tables as rows with variants: header, row and cell variations with default, hover, selected and loading states built in. Then I built a Figma plugin that generates a table from the existing UX design. Once the header, row and cell variants exist, a complete table takes about 10 seconds.

06 · How the team works
Structure, status and quality
- Templates and guides. I defined how pages and screens are laid out and organised, with page and section templates and a how-to guide. A plugin creates a new page with every section in place, and the spacing between status cards, screens, flows and sections already set.
- Progress cards. Every flow carries a status card: Design in progress, In design review, Ready for approval, Done by design, In production. Anyone opening the file can see where the work stands.
- UI QA, end to end. I designed the design inspection process from A to Z and the team adopted it. Each issue it caught led to a new step or an update to the process, which reduced defects and made handoff at least 25% faster.
See FusionX, the plugin suite I built to maintain the system

07 · AI in the workflow
Bringing AI into the design team
- Prompted variations. I came up with a way to use the AI agent in Figma with specific prompts to generate component variations, instead of duplicating and editing by hand.
- Figma Make skill libraries. I introduced the team to Figma Make and built libraries of skills for different uses, producing realistic, presentation-ready prototypes to replace the old prototyping method.
- Claude MCP with Figma. I connected Claude to Figma through MCP and showed the team what it can and can’t do.
- Teaching it. In the past year I ran 8 workshops for 22 people across UI, UX, UX writing, UX research and team leads, plus tutorials and 1:1 sessions with designers.

08 · Impact
What changed
| Area | Before | After |
|---|---|---|
| Banner variations to maintain | 128 | 1 |
| Build a data table | 5–10 minutes | ~10 seconds |
| Prototyping | A screen for every state | 40%+ less time with interactive components |
| Design-to-development handoff | Baseline | At least 25% faster with UI QA |
| Rebrand a full project (with FusionX) | Weeks | ~20 minutes |
| Team enablement | — | 8 workshops, 22 people trained |
Prototyping and handoff gains are conservative estimates.
Hiring a senior product designer? Let’s talk.