Design Systems Aren’t Hard

Design systems aren’t hard.
But they are complex.
And they’re also hard.

Design systems are often thought of in terms of the visible parts - a Sketch file, a repository of React code, a documentation website. But these are only the artifacts of the system. A design system is actually the thinking and the decision making and the principles of your organization. Producing the artifacts is the easy part - maintaining the institutional value of the design system is the hard part.

In this talk we’ll dive into the lessons I’ve learned during my time working on a large design system for a fast growing company. Hopefully we can help you avoid some of the common pitfalls and enjoy the quiet satisfaction of working on a design system so successful no one ever thinks twice about it.

Presented at:
That Conference TX

Full Slidedeck with Speaker Notes:
https://github.com/milsyobtaf/prez/blob/primary/2022/ThatConference/design-systems-arent-hard-v2-thatconf-speaker-notes.pdf

Transcript

1. DUSTIN YOUNSE DESIGN SYSTEMS 
 AREN’T HARD
5. ABOUT ME @milsyobtaf from the internet I’ve worked on large websites since 2008 I’ve worked with “design systems” since we called them “swatches” or “style tiles” Currently working in Design Engineering at Indeed, a job that comes with the best laptop sticker
6. DESIGN SYSTEMS 
 AREN’T HARD But they are complex. And also hard.
7. WHAT IS A DESIGN SYSTEM? If you ask ten different people who work on design systems, you’ll get ten different answers.
9. Organizations which design systems … are constrained to produce designs which are copies of the communication structures of these organizations." CONWAY’S LAW
10. MARKETING DEPARTMENT PRODUCT TEAMS PROFESSIONAL SERVICES TECH CONTENT WRITING RESEARCH, CORPORATE COMMS HAL
11. Your website is a manifestation of your organization’s problems “UNCLE” DAVE RUPERT’S LAW
13. WHAT ISN’T A DESIGN SYSTEM?
14. A FIGMA LIBRARY
15. WHAT ISN’T A DESIGN SYSTEM?
16. A REACT COMPONENT LIBRARY
17. WHAT ISN’T A DESIGN SYSTEM?
18. AN EXTERNAL WEBSITE 
 PROMOTING YOUR DESIGN SYSTEM
19. THESE ARE ARTIFACTS - NOT THE SYSTEM
20. SO… WHAT IS A DESIGN SYSTEM?
21. AN AGREEMENT ON HOW 
 DIGITAL PRODUCTS ARE MADE
22. DESIGN SYSTEM AGREEMENTS User Interface Design: how a digital experience looks Interaction Design: how a digital experience feels Content Strategy: how a digital experience sounds Documentation: how a digital experience is crafted
23. ⌛ DESIGN SYSTEMS TAKE TIME
25. ⌛💰 DESIGN SYSTEMS TAKE TIME AND THEY TAKE MONEY
26. WHY BOTHER WITH A DESIGN SYSTEM?
27. DESIGN SYSTEMS ARE ALL ABOUT SCALE Interface Design at scale Interaction Building at scale Content Creation at scale
28. DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your team knows how a thing should be built, they can just build it.
29. DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your team knows how a thing should be built, they can just build it. #1 Support Request: How do I do X?
30. DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your team knows how a thing should be built, they can just build it. #1 Support Request: How do I do X? #2 Support Request: Why do I do X?
31. DESIGN SYSTEMS HELP EVERYONE
32. ACCESSIBILITY AT SCALE Buttons that work as buttons
33. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links
34. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion
35. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE
36. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE Form fields that accept accented characters
37. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE Form fields that accept accented characters Right-to-left text presentation that just works
38. A DESIGN SYSTEM IS A SERVICE NOT A PRODUCT
39. YOU NEED TO ANSWER QUESTIONS, 
 NOT WRITE CODE, NOT PUSH PIXELS
41. IF YOU ONLY HAVE THE TIME OR THE MONEY FOR ONE ARTIFACT
42. WRITE DOCUMENTATION
43. DESIGN SYSTEMS ARE HARD
44. DESIGN SYSTEMS ARE HARD AND THAT’S THE WORK
45. - Conway’s Law / Uncle Dave's Law - Anatomy of a Design System - How the Right Design System Streamlines a Large Organization’s Digital Development RESOURCES - Design Systems Slack - Design Systems Podcast - Design System Checklist