Design System
Helping internal teams build apps faster with a design system for BCG’s no-code platform.
Ever handed off a design that looked great in Figma, only to hear ‘we can’t build this’?
Dais is BCG’s low-code platform for building AI dashboards and workflows. Designs made in Figma often couldn’t be built in Dais, with layouts breaking and charts rebuilt at handoff. This slowed projects and frustrated teams.
That gap between design and build made it clear: we needed a design system rooted in Dais’s real capabilities, so every design started from something buildable.
ROLE
Senior UX Designer
Industry
Enterprise
Duration
2 months
cross-functional team
Lead UX Desginer, engineering lead, product manager, and principal data scientist
Impact
Reduced design-to-dev translation from days to hours by providing ready-to-use components.
Minimized rework at handoff, improving alignment between design and engineering.
Process - designing from what exists
Audit
Before starting the audit, I framed the process around designing from existing capabilities. I mapped how forms, tables, charts, and containers were coded in Dais, which gave me a solid baseline of what the platform could actually support.
Mapping existing components in Miro during the audit phase :forms, tables, and charts coded in Dais.
Note: Certain details and visuals have been anonymized or excluded to respect NDA.
Rebuild
Translating those into Figma wasn’t straightforward: spacing, responsiveness, and chart quirks didn’t copy over neatly. I worked around this by:
Mirroring rules with constraints - e.g. Dais buttons had fixed spacing rules (padding, gaps) coded in. In Figma, I rebuilt them with auto-layout so they kept the same structure but scaled naturally.
Simplifying edge cases - e.g. Dais charts had interactive states (like drill-downs) that Figma could replicate. But I kept the library focused on common behaviors and left complex one-offs for designers to prototype.
Testing against live code - e.g. I compared each Figma component with Dais to ensure it reflected real behavior.
Deliver
I packaged the work into a validated Figma component library with usage guidelines, so every design started with elements mapped directly to Dais’s real capabilities.
Validated Dais design system, a Figma component library with usage guidelines for forms, tables, and charts.
Reflection and future opportunities
Building the system sharpened my skills in Figma’s Auto Layout, components, and tokens.
More importantly, it showed how design systems create a shared language between design and engineering.
Future opportunities
Expand the library as Dais evolves (e.g., support for new charts or layouts).
Gather feedback from active teams using the system to refine components.
Want the full story?
There’s more behind the scenes, let’s chat.