It is a commonly asked question, why do we need a design System and what it is?
Design System is a collection of reusable components with clearly defined standards for use. The value of a design system is helping developers produce code that is more visually consistent with the design.
Design systems also facilitate collaboration between teams like design, product, development, and marketing by establishing a common language and set of standards.
What is an Atomic Design Methodology and why we should adopt it?
Atomic Design is a visual identity system methodology that separates the entire process when developing visual systems in a more organized way using atoms, molecules, organisms, templates, and pages. For example, a search icon and an input box are two separate atoms and that forms a UI element as a molecule.
There are many benefits to adopting an atomic design system, and the biggest benefits are ensuring consistency, flexibility, reusability, scalability, and maintainability of the project.
I've seen many of the projects without design system, get worse by losing their consistency and it comes to developers as a big concern for the maintenance.
Design System Structure
For this project, based on the Atomic Design methodology, I've categorised it into sections where all fundamental UI elements should be aligned.
1. Atom (Foundation)
This includes Typography, Colours, Logo, Shadow, Spacing, Grid, Iconography
2. Molecule (UI Elements)
This includes Alert, Avatars, Chip, Banner, Button, Button Group, Switch, Checkbox, Radio Button, Input Fields, Breadcrumb, Accordion, Tooltips, Infobox, Slider, Progress, Loaders, Pagenation, Rating
3. Organism (UI Components)
This includes Modal, Pages, Tabs, Top Menu, Dropdown Menu, Header, Side Menu, Charts, Tables, Filter, Tile, Data Picker
Design System Examples
1. Atom (Foundation) (typography and Colours as an example)
2. Molecule (UI Elements)
2. Organism (UI Components)
