Building an atomic design system
Building a customised design system to work for multiple teams
Project Overview
My teams lacked a tailored design system, to unify the organization’s look-and-feel, brand and optimize efficiency. The out-of-the-box solutions they had previously tried didn’t fully meet their needs, leading to a inconsistent design, no reusability and slower development process.
What was done: Designed and rebuilt a more scalable and flexible design system, based on the Atomic Design principles and with foundations and inspiration from Tailwind, Shadcn and Ant Design. The new system included for instance:
Key Features
Designing new and improving existing UI components: to be more flexible and accessible.
Consistent usage: of iconography and typography
Implementing shared libraries, themes and naming conventions for variables Figma. : This allowed us to easily toggle between different modes, such as light and dark mode, with just a few clicks.
Consistent usage: of iconography and typography
Storybook integration: Defined detailed behavior and interaction patterns
to create multi-dimensional, flexible components that allowed users to effortlessly customize size, layout, and styling: for components, such as table cell and spreadsheet behaviour, mapping out keyboard interaction
Using a Atomic design apporach: to create components that could be nested within other components, providing greater modularity.
Speccs
- Domain:
- Video Gaming
- Category:
- Design System
Challenges & Solutions
# Threat: ToDo
ToDo
# Remedy: ToDo
ToDo