By Schneider Electric
We built Zeigo Activate from scratch. Instead of building one product, we built a design system and let the product fall out of it. That is Zeus: about 45 component sets in Figma, 22 documented components, 8 token families, maintained in Figma and in code at the same time. When Zeigo HUB came two years later, most of its screens were already designed.
The only thing we inherited was a palette. 118 color values in 9 groups, named after the one place each was used: dark-gray-410 textbox normal state, dark-gray-510 textbox hover state. The Shared Library still documents it as Original Colors, next to what replaced it.
A small team, 2 to 3 designers and 4 to 6 front-end engineers, and every screen re-deciding the basics: which gray, which radius, which spacing. Two or three review rounds per screen on things that should have been settled once. The usual path is build the product first, extract the system later. That path is how you get 118 grays.
The decision was to make tokens the contract between Figma and code, not components. Semantic surface and text tokens, background-page, layer-01 to layer-03, text-standard, text-subdued, text-inverse, plus scaled tokens for space, type, radius and elevation. Named once, published as Figma variables and as CSS custom properties, consumed by every component on both sides.
Naming a layer system so it survives as CSS is an engineering constraint. Prefix plus scale, ordering rules like layer-02 always sits on layer-01. A designer alone misses it, and the palette stays at 118 hand-named values. The hierarchy itself, the avoid deep nesting rule, the accessible contrast for data-dense emissions screens, those come from design. An engineer alone ships a flat palette and a div with a shadow.
Three products had to ship on one component set, so brand could not live in components. It lived in tokens and in one logo component with a variant per product: Zeigo, Power, Network, Activate, Hub. That is what made the later integration into HUB and Network possible without forking.
What broke when Zeus moved from Activate into HUB: the brand color and logo per product, and a handful of card sizes for data-dense tables. Exactly the things that became the logo component and the layer tokens.
Before a component entered Zeus I prototyped it in code, to expose the states Figma could not: hover, loading, empty, error, long content, locale formats. Site Card is the example. Figma had two states. The code prototype, fed with real supplier data, needed created, selected and hover combinations that changed the layout. The Figma set grew to seven states from what the prototype showed, not the other way around.
Designer reviews happened in Storybook rather than in Figma, so the review was on real states. Figma branches for design changes, Git branches for code changes, merged in both. The Shared Library carries a Complete or In progress badge per page, so nobody consumed an unfinished component by accident.
What didn't work: 15 of the 22 documented components are still marked In progress. Documentation lagged behind code once HUB started pulling the team's time. If I did it again I would document at the same pace as I code. What stayed: Zeus V.2, the token set, the library, the Storybook. Three products still ship on it.
“Working with X has been great. He is reliable and fast. The solutions he designs are creative and empathetic to the end-user experience!”
Exelobaiza | Design Engineer