What Are Design Systems?
A design system consists of a collection of reusable components guided by clear standards, that can be assembled to build any number of applications. A design system is a big box of UI Lego pieces that can be assembled in near infinite ways. Each asset will have standards and documentation that accompanies the asset, with a guide on why and how to use them.
A design system follows the Atomic Design methodology. This methodology is the foundation of the building a design system and creating a product using the system.
Atoms - The basic building block such as HTML that forms assets such as buttons or a text input field
Molecules - Is the combination of atoms that form a molecule. For example, a text input field and button creates a form.
Organisms - A group of molecules that form a section of a layout. For example, a navigation consists of a search form and buttons that form the top navigation on a website
Templates - Consists of a number of organisms that are stitch together to form a page.
Pages - Use of templates and with the populated content shows what the user will eventually see.
Link: Atomic Design methodology by Brad Frost
1. Conduct a visual audit
Do a visual of your current design whether that a design of an app, website or other digital products. Take inventory of the CSS you’re using and the visual qualities of the element to see how much of an undertaking of the task can be.
2. Create a visual design language
Colour – Common colours for your design systems including 1-3 primary colours that represent your brand, also include tints and shades as well to give designers a few more options.
Typography – Most design system just needs 2 fonts: 1 for headings and body copy and a monospace font for code.
Sizing and spacing – Define the spacing and sizing of certain elements and how to sizing occurs on different devices.
Imagery – Set guidelines for illustrations and icons and use the best image format for the situation
3. Create a UI/pattern library
Using the audit, collect all of the parts and pieces of your UI currently such as buttons, forms, modules and images. Merge and remove the assets that you don’t need.
4. Document what each component is and when to use it
The most important step is to document each asset and the standards for each asset.