The Concept of Atomic Design applied to a frontend package
What is Atomic Design
Atomic Design is a methodology for creating design systems in a hierarchical structure, starting from the simplest elements (atoms) to more complex structures (molecules and organisms).
This approach allows designers to build consistent, scalable, and reusable components for user interfaces. By treating parts of the UI as part of a larger whole, Atomic Design streamlines the development process, ensuring a more efficient and cohesive design system that can be easily maintained and scaled over time.
Pros:
- Access components from different packages shared within the T&I team
- Focus on enhancing the overall quality and maintainability when adding new features
- Add new code without degrading the existing code base
- Allow easy migration and refactoring of features whenever needed
- Creating complex components will be easier since we will have common building blocks in place from the start
- Once the library starts growing, creating new interfaces can be as simple as combining existing elements
- Existing components become a guide for how we build, keeping the code clean and consistent
Cons:
- Within the team, we all need to understand what is an atom/molecule/organism in order to keep the library consistent and clean
- Communication with the design and product team is crucial to make the best out of the library and standardize user experience
- Overhead and over-engineering could be an issue if we add code that will end up not being reused in the future
Definition and examples
Atoms
Atoms are components that can’t be broken down into smaller components. For example: buttons, dividers, links.
Source
Molecules
Molecules can be formed by many different atoms. For example, a button with a loading icon.
Source
Organisms
Complex components made of groups of molecules or a mix of atoms and molecules.
Example: a Tab component with a div attached that displays different content on click.
Source
Templates
Formed by organisms, molecules and atoms that structure content. For example: A profile template page, that can be filled with different information from any user.
Source
Pages
Pages are templates (or groups of molecules, organisms, etc.) filled with real representative content. For example, the profile template we mentioned before, now with the user’s data.
Source
Creating a UI Kit
What is a UI Kit for:
- Making it easier to reuse components within a team’s or company’s features, cataloging them, and making them accessible for the whole team (including design/product).
- Maintaining and enhancing components (accessibility, testing, performance).
- Keeping our UI consistent, making the user feel more at home when navigating the product.
- Improving our design-development process by speaking one common language and having one common place for our building blocks.
- Internal knowledge of the team, having everything in one place makes it easier for everyone to know what we have and how to maintain it.
- It’s more about effective component management and modular development within our existing codebase.
What is a UI Kit not for:
- Adding anything related to the design system. Examples: color variables, common design patterns/elements such as typography or input fields.
- Having components with data fetching/handling. Examples: a form submission calls our backend to create a ticket.
- Maintaining and enhancing our components (accessibility, testing, performance).
Resources
Source link
lol
