Design Systems Master Post

How to get started with Design Systems?

Note: This is a live/active reference document for those looking into improving their UI design skills.

There are a few concepts I feel are essential to push you to learn more about design systems. Perhaps the most important concept is collaboration. Design Systems are meant for designers and developers to collaborate of projects easily. The process of handouts are usually tedious and there can be a lot of communication issues between both sides. Design systems are not a new concept but for those who are getting their feet wet on this subject like myself, this post is going to serve of help.

What is atomic design?

Atomic design is a design philosophy for web and app design. It uses the way molecules are made of as an analogy of the structure of your screens. The smallest particle is the atom which can be a simple graphical elements in your artwork, such as color, fonts, image styles, etc. Then you have a molecule which a bundle of atoms meaning, this can be a button or a headline, or a progress bar. Then you have organisms, templates, pages, etc. It all helps you with the order you should be constructing your site. This allows you to re-use these different elements like “atoms” and “molecules” to build the a variety templates and pages while keeping a visual consistency throughout your app or website.

*Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.* (Image from http://atomicdesign.bradfrost.com )

What are design systems?

Design systems basically are the guides with standards that will inform both designers and developers how these atoms, molecules and organisms are going to be used or put together, and how they are going to interact with the user.

Why do you need to learn about them?

If you want to work in design teams in startups, or big companies, design systems are a must. They make communication between designers and developers easy and they make the design/dev process more agile.