Learning
UI Kit
The UI Kit
What is a Design System?
A design system are the “rules and guidelines” that are used to organize what a design should look like. This helps the team by getting all members aligned.
The design system includes both the philosophy of a brand, as well as the tone and form of communication. It is a style guide that serves to guide the entire team, ensuring that the entire team makes consistent decisions and the product works consistently.
Atomic Design in 5 minutes
As explained in the book Atomic Design method by Brad Frost, this methodology is based on reusable nested patterns. Thanks to its type of structure, Atomic Design allows digital products to be resized to any scale. It focuses on:
Consistency in all processes and results
Coordination with different team members
Efficiency in achieving the design
The speed in developing the product
Basically it is about correctly joining the pieces to be able to achieve the final objective, very similar to putting something together with LEGOs. Piece by piece we will get parts and part by part we will be able to build everything.
Atoms
Atoms are the most basic elements, they are components that could not be broken because they would no longer have that function.
Atoms are the most basic elements, they are components that could not be broken because they would no longer have that function.
Molecules
Molecules are very simple elements that form a unit. They are composed of groups of two or more atoms and fulfill only a specific function.
If we join the button that we created before to an input, which would also be an atom, we can create with them the function of a search bar.
Organisms
Organisms are more complex components because they can form sections within the design.
An organism could be the menu of a website. In it we could join the search bar that we have created before with a group of buttons.
Template
Templates are the structure that the page or screen to be designed will have.
We will define the master guides in which the content will be based and we will establish how the disposition of the organisms already created will be in the grid that we are going to use.
In this phase we would carry out Wireframes to validate all the initial work and the experience that the user will have when using the product.
Mistakes to Avoid in a Design System
• Avoid the duplication of elements that may be reusable.
• Hierarchize and maintain consistency in the nomenclature of each element.
• Avoid unbinding instances.
• Make sure all teams use the central design system
What is a UI Kit?
A user interface kit is a set of files that contains critical user interface components such as buttons, tables, forms, sliders, patterns, among others.
UI kits can be fairly simple with just a few components or extremely robust with hundreds of components. These components are elements that can convey meaning and/or provide functionality to users.
Advantages
In essence, it saves a lot of time, so you don't have to do the designs from scratch or complicate yourself with the maintenance or update of the components. It helps to maintain coherence and consistency in the digital product, maintaining a logic between its parts and components.
Finally, versatility, since it allows you to work without limitations and a more structured base, as well as more fluid communication.
Components
Placeholder
Buttons
Icons
Checkbox
Toggle
Tooltip
Popup
Cards
Navigation
What other items do you need? This will depend on the need and usability of your digital product and the users interaction, so different components could be added over time.