Design Systems in Sketch

Transcript

1. Design Systems in Sketch Xaver Loeffelholz & Jeroen van Dongen
3. With a design system... … there is less work for designers and developers … user interface becomes more consistent … a more collaborative workflow is created
4. Atomic Design http://atomicdesign.bradfrost.com/
5. What is atomic design?
8. Sketch Libraries • Available since Sketch 47 (October 2017) • Replacement for template files • Symbols are always up-to-date
9. Our implementation Sketch library screenshots, maybe a video?
10. Updates in the library
12. Nested symbols
14. Pages • Combined use of molecules and organisms • Highly customizable • Still always up-to-date
16. Creating an Atomic design system • What is an Atom, what is a Molecule? • Agree on wording • Create a clear structure • There will always be exceptions
17. Problems • Overrides do not work well with organisms • Sketch slows down
18. Trade-offs Big Design system Hard to find object that is needed Small Design system Probably missing some elements
19. Limitations • No resize of symbols based on text • Plugins available, but problematic
20. Treat design system like a product
21. Questions? Thank you! … BTW. We are hiring! delightex.com