The document discusses building scalable design systems. It notes that design teams are growing, problems are more complex, and teams are distributed. Maintaining design debt can fracture the user experience. A design system, defined as a reusable set of components governed by standards, can help by providing consistency, communication, efficiency, maintainability, and scalability. The document outlines components of a design system and benefits. It shows examples from companies and tools for design systems. It discusses approaches to starting a design system like inventorying existing design, structuring the system, and standardizing. It also notes design systems require ongoing extension and maintenance.

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.
BESTIN CLASS
@lauravandoore

16. Atlassian Design

17. Atlassian Design
ProductMarketing
Brand

18. Atlassian Design

19. Shopify Polaris

20. Salesforce Lightning Design

21. IBM Carbon

22. Meetup Swarm

23. Adele
Design System Repository

24. AQUICKPREVIEW
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 Away1
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