Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Systems Aren’t Hard

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

milsyobtaf

May 26, 2022
Tweet

More Decks by milsyobtaf

Other Decks in Technology

Transcript

  1. DUSTIN YOUNSE
    DESIGN SYSTEMS

    AREN’T HARD

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  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

    View Slide

  6. DESIGN SYSTEMS

    AREN’T HARD
    But they are complex.


    And also hard.

    View Slide

  7. WHAT IS A DESIGN SYSTEM?
    If you ask ten different people who work on
    design systems, you’ll get ten different answers.

    View Slide

  8. View Slide

  9. Organizations which design systems …


    are constrained to produce designs


    which are copies of the


    communication structures of


    these organizations."
    CONWAY’S LAW

    View Slide

  10. MARKETING


    DEPARTMENT
    PRODUCT


    TEAMS
    PROFESSIONAL


    SERVICES
    TECH CONTENT


    WRITING
    RESEARCH,


    CORPORATE COMMS
    HAL

    View Slide

  11. Your website is a manifestation


    of your organization’s problems
    “UNCLE” DAVE RUPERT’S LAW

    View Slide

  12. View Slide

  13. WHAT ISN’T A DESIGN SYSTEM?

    View Slide

  14. A FIGMA LIBRARY

    View Slide

  15. WHAT ISN’T A DESIGN SYSTEM?

    View Slide

  16. A REACT COMPONENT LIBRARY

    View Slide

  17. WHAT ISN’T A DESIGN SYSTEM?

    View Slide

  18. AN EXTERNAL WEBSITE

    PROMOTING YOUR DESIGN SYSTEM

    View Slide

  19. THESE ARE ARTIFACTS - NOT THE SYSTEM

    View Slide

  20. SO… WHAT IS A DESIGN SYSTEM?

    View Slide

  21. AN AGREEMENT ON HOW

    DIGITAL PRODUCTS ARE MADE

    View Slide

  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

    View Slide


  23. DESIGN SYSTEMS TAKE TIME

    View Slide

  24. View Slide

  25. ⌛💰
    DESIGN SYSTEMS TAKE TIME AND THEY TAKE MONEY

    View Slide

  26. WHY BOTHER WITH A DESIGN SYSTEM?

    View Slide

  27. DESIGN SYSTEMS ARE ALL ABOUT SCALE
    Interface Design at scale


    Interaction Building at scale


    Content Creation at scale

    View Slide

  28. DESIGN SYSTEMS ARE ALL ABOUT SCALE
    When everyone on your team knows how a thing should be built, they
    can just build it.

    View Slide

  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?

    View Slide

  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?

    View Slide

  31. DESIGN SYSTEMS HELP EVERYONE

    View Slide

  32. ACCESSIBILITY AT SCALE
    Buttons that work as buttons

    View Slide

  33. ACCESSIBILITY AT SCALE
    Buttons that work as buttons


    Links that work as links

    View Slide

  34. ACCESSIBILITY AT SCALE
    Buttons that work as buttons


    Links that work as links


    Animations that respect prefers-reduced-motion

    View Slide

  35. ACCESSIBILITY AT SCALE
    Buttons that work as buttons


    Links that work as links


    Animations that respect prefers-reduced-motion
    INCLUSION AT SCALE

    View Slide

  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

    View Slide

  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

    View Slide

  38. A DESIGN SYSTEM IS A SERVICE


    NOT A PRODUCT

    View Slide

  39. YOU NEED TO ANSWER QUESTIONS,

    NOT WRITE CODE,


    NOT PUSH PIXELS

    View Slide

  40. View Slide

  41. IF YOU ONLY HAVE THE TIME OR THE MONEY FOR


    ONE ARTIFACT

    View Slide

  42. WRITE DOCUMENTATION

    View Slide

  43. DESIGN SYSTEMS ARE HARD


    View Slide

  44. DESIGN SYSTEMS ARE HARD


    AND THAT’S THE WORK

    View Slide

  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


    View Slide