This document outlines an atomic design methodology for creating design systems. It discusses the five levels of atomic design - atoms, molecules, organisms, templates and pages. It then explains sketch symbols and libraries, the workflow, and pros and cons of using this approach. Key benefits include consistent designs, a fast designing process, reusable libraries, and easier team collaboration.

1. Design system
based on atomic design

2. Agenda
• Atomic design principle
• Sketch symbols
• Libraries
• Workflow
• Pros & cons

3. Atomic design
methodology for creating design systems, based on
5 distinct levels:
atoms molecules organisms templates pages

4. Atoms
basic building blocks of interfaces

5. Molecules
groups of atoms bonded together

6. Organisms
groups of molecules joined together to form
a relatively complex section of an interface
Search the site
SearchHome About Contact

7. Templates
groups of organisms
Search the site
SearchHome About Contact

8. Pages
specific instances of templates, represent the
highest level of fidelity

9. Sketch symbols

15. Nested symbols

17. nested symbol

18. Overrides

21. Libraries

26. Workflow
wireframe library mockup

27. Cons
• overrides not supported by Zeplin
• text color overrides not possible (can be done on white
bg)
• text styles not supported
-

28. Pros
• consistent designs (designers, end users)
• fast designing process
• reusable libraries
• symbols easily replaceable
• automatic library updates
• teamwork made easier- single source of truth
+

29. Further reading
• http://atomicdesign.bradfrost.com
• https://sketchapp.com/docs/symbols/
• https://www.designbetter.co/design-systems-handbook
• https://www.smashingmagazine.com/design-systems-
book/

30. Thank you!
Let’s keep in touch: