Building a Scalable Design System with Sketch

Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.

In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems

Transcript

1. BUILDING SCALABLE Design Systems Laura Van Doore
 @lauravandoore

2. Designing & building software is complex. @lauravandoore
3. • Growing design teams
 Organisations are investing more in design • Infinitely more complex design problems
 Software needs to become more sophisticated to keep up with the demands & desires of our users. • Distributed teams
 Agile delivery models encouraging cross functional teams. Why is design struggling to scale? @lauravandoore
4. Maintaining design debt is starting to feel like this:
5. “A fractured process makes for a fractured user experience.”
 - NATE FORTIN
6. So how can we design the process in order to deliver better products & user experience?
7. Answer: 
 A DESIGN SYSTEM
8. Design System (noun)
 [de-zine sis-tuhm] A collection of reusable components, governed by clear standards, that can be assembled together to build any number of applications or products. @lauravandoore
9. Design System Style Guide
 ‣ Design Principles ‣ Live Code & Implementation info ‣ UX & Accessibility Metrics ‣ Animation Timing & Easing ‣ Voice & tone Guidelines ‣ Style Guide & Design Resources ‣ UX Personas ‣ Typography ‣ Colour Palettes ‣ Component Styling ‣ Grids ‣ Static Code Samples @lauravandoore
10. Benefits of 
 Design Systems
11. ‣ Consistency 
 Consistency and clarity in the user interface ‣ Communication
 Speaking the same language ‣ Efficiency
 Increased ability to roll out new features and software products
12. ‣ Maintainability
 Both in code base, testing and design assets ‣ Scalability
 A solid architecture you can expand into new products ‣ Baked in Accessibility ‣ Facilitates speedy onboarding for new designers and engineers
13. So … How popular are Design Systems?
14. 86% According to InVision of Product Design teams have a Design System
15. A quick look at the best design systems being used around the world. BEST IN CLASS @lauravandoore
16. Atlassian Design
17. Atlassian Design Product Marketing Brand
18. Atlassian Design
19. Shopify Polaris
20. Salesforce Lightning Design
21. IBM Carbon
22. Meetup Swarm
23. Adele 
 Design System Repository
24. A QUICK PREVIEW Design Systems at Fathom @lauravandoore
28. PLUGINS & WORKFLOWS Sketch Essentials @lauravandoore
29. Auto Layout 
 Responsive Design in Sketch
30. Sketch Icons 
 Use your icon font seamlessly in Sketch
31. Style Libraries 
 Push & Pull layer styles from your Design System
32. Toybox Roller 
 Find & fix design inconsistencies in Sketch
33. InVision Inspect 
 For getting your Design System from Sketch to code
34. Sketch Library Design System
 ≠ @lauravandoore
35. A Sketch Library is just one small part of a successful Design System.
36. Design Systems are a team sport @lauravandoore
37. The best Design Systems are a shared asset between design & development.
38. Getting started @lauravandoore
39. Building a Design System is a marathon, not a sprint. 

40. EXPECTATION REALITY vs
41. Don’t think of it like a project.
42. Approach it like a product. With a roadmap, objectives & many different groups of users.
43. Inventory Take stock of where you are. 1
44. It might look something like this …
45. Find patterns & create order out of the chaos …
46. Structure Define a structure for your Design System 2
47. Define a new structure Atoms & Molocules?

48. Define a new structure GE Predix System
49. Standardise Also known as “Getting to one” 3
50. ROLLING OUT YOUR OWN Design System @lauravandoore
51. Chip Away #1 @lauravandoore
52. Chip Away The design system is something that is only worked on in spare time, or when designers/engineers are between projects. @lauravandoore #1 Cost Risk Speed Quality
53. Hibernation #2 @lauravandoore
54. Hibernation Getting a core team of designers & engineers working on the Design System full-time. Possibly allows the time for designers/engineers to come up with the best implementation. @lauravandoore #2 Cost Risk Speed Quality
55. Piggyback #3 @lauravandoore
56. Piggyback Plan to get the bulk of the Design System implemented as a part of another project. Balances out the cost better, as you see the returns immediately. @lauravandoore #2 Cost Risk Speed Quality
57. Chip Away 1 Hibernation Piggyback 2 3 @lauravandoore Rollout strategies
58. EXTENDING & MAINTAINING Design Systems @lauravandoore
59. Just like Design, a Design System is never finished.
60. Have a plan & a process for how to extend on your system.
62. Don’t forget to take stock @lauravandoore
63. Thanks Laura Van Doore @lauravandoore