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

Designing with Design Systems

693de2ed24f77254be781fc44c757363?s=47 Sparkbox
April 21, 2020

Designing with Design Systems

After this brief talk, you’ll know the difference between design systems, style guides, and pattern libraries. You’ll also be aware of some common pitfalls of design systems. Finally, you’ll learn how design and development teams can work together to build more than just components.



April 21, 2020


  1. A lightning talk by Ethan Muller, who is a designer/developer

    at Let’s talk about design systems for a little bit.
  2. @ethanmuller #SparkboxUnConf First, what’s a design system?

  3. @ethanmuller #SparkboxUnConf First, what’s a design system?

  4. @ethanmuller #SparkboxUnConf First, what’s a design system?

  5. @ethanmuller #SparkboxUnConf A design system contains both style guide and

    pattern library content.
  6. @ethanmuller #SparkboxUnConf

  7. @ethanmuller #SparkboxUnConf A style guide deconstructs an aesthetic to show

    you what makes it tick.
  8. None
  9. @ethanmuller #SparkboxUnConf A pattern library is a collection of UI

    chunks that can be stuck together to make websites, apps, etc.
  10. None
  11. @ethanmuller #SparkboxUnConf

  12. “When you create a design system, you’re not just creating

    reusable patterns—you’re operationalizing how your company approaches design.” – Yesenia Perez-Cruz, Expressive Design Systems
  13. @ethanmuller #SparkboxUnConf Big organizations have difficult problems.

  14. @ethanmuller #SparkboxUnConf

  15. @ethanmuller #SparkboxUnConf

  16. @ethanmuller #SparkboxUnConf

  17. @ethanmuller #SparkboxUnConf Breaking an existing product into components probably won’t

    make a system that serves everybody.
  18. @ethanmuller #SparkboxUnConf This work needs to be done on the

    brand/organization level to be useful to everybody.
  19. @ethanmuller #SparkboxUnConf Design systems should explain design.

  20. @ethanmuller #SparkboxUnConf

  21. @ethanmuller #SparkboxUnConf The important part isn’t the comp itself. It’s

    the decisions that made the comp.
  22. @ethanmuller #SparkboxUnConf

  23. @ethanmuller #SparkboxUnConf WHAT WHY

  24. @ethanmuller #SparkboxUnConf

  25. @ethanmuller #SparkboxUnConf

  26. @ethanmuller #SparkboxUnConf These what/why combinations belong in your design system.

  27. @ethanmuller #SparkboxUnConf Design systems should start really general.

  28. @ethanmuller #SparkboxUnConf 1. Typography 2. Color 3. Buttons

  29. @ethanmuller #SparkboxUnConf General concepts are more portable across different platforms.

  30. @ethanmuller #SparkboxUnConf Invent design units other than components.

  31. @ethanmuller #SparkboxUnConf

  32. @ethanmuller #SparkboxUnConf The most common unit of design is components.

  33. @ethanmuller #SparkboxUnConf Components don't have to be the only unit

    of design.
  34. None
  35. None
  36. @ethanmuller #SparkboxUnConf Another unit of design: Skins skin { background

    color foreground color link color }
  37. None
  38. @ethanmuller #SparkboxUnConf Design systems should create clear contracts between design

    and development.
  39. @ethanmuller #SparkboxUnConf Get creative about design → development.

  40. @ethanmuller #SparkboxUnConf The End