Client
Driving01, internal project
Team
1 Diseñador Ux/UI - 1 programador frontend
Applied knowledge
Figma Variables · Design Tokens · Atomic design · Design system · WCAG 2.2 Accessibility · Responsive Design · Low and high-fidelity wireframes
Formats
To maximize product adaptability, the most commonly used screen types were designed in a responsive system (desktop, tablet, and mobile), later serving as reusable design templates.
Customization
To achieve the goal of customisation, a variable system (Figma Variables) was implemented. Variables are reusable tokens that store design values and are applied across components within a design system. They include the following properties:
Project phases
Design system
A scalable and organic design system relies on a well‑defined atomic token structure, intuitive core components, and a coherent set of patterns that work seamlessly together. These three elements ensure the system behaves like a living product—easy to extend, consistent across experiences, and capable of evolving without losing its internal logic.
Challenge and resolution
The main challenge of the project lay in its scale. A large number of screens relied on a robust design system composed of a wide range of components. These components needed to be configured with variables, including nested variable dependencies, and so on.
But thanks to this extensive work, D01 was able to significantly reduce the time required to implement design changes across the interface, enabling the product to be tailored to each client’s needs and visual identity.
