Azion Design System
Figma, Design Tokens, Zeroheight, Component Architecture, Roboto Typography, Semantic Color System, Iconography, Figma Plugins
The design system behind the console customers use to run their applications: the first shared set of components, patterns and rules the product ever had.
Challenge
There was no documentation to build from. A team copied an existing screen and guessed the rest, so the same flow came out differently in each product. The rules lived with a handful of people: designers spent their time reviewing and correcting flows instead of designing, and a front-end engineer could not put an interface into production without one of them alongside.
Solution
Tokens, components, patterns and the documentation that says how to apply them, published at azion.design. Most screens were legacy, inside the monolith, so the system went in with the roadmap: whenever a product area was opened for a customer, its screens were rebuilt on the system and pulled into a modular architecture. A dedicated design and front-end team owned the system and the handoff to every product team.
40+
Documented components
6+
Product teams building from it
1
Team owning the system and the handoff
No customer ever woke up to a different-looking product. The system arrived one component at a time, inside work that was already going to happen.
Global Tokens — Figma
The variables the system stands on, open in Figma. Colour, spacing and type are defined once here and consumed by every component.
RTM Components — Handoff
The library as engineers receive it: variants, states and the notes that say when each one applies.
Project
Azion Design System
Client & Role
Design Director
Year
2021-22
Technologies
Figma, Design Tokens, Zeroheight, Component Architecture, Roboto Typography, Semantic Color System, Iconography, Figma Plugins
Credits