KUBRA Design System From static library to dynamic, variable-driven system

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.

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.

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.

• 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.

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.

• 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 ↗

• 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.

Prototyping and handoff gains are conservative estimates.