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

Design Systems - Polish Berlin Tech

651dcfe41723207fbb0aa044a4f7c07f?s=47 Mariusz Cieśla
January 11, 2018

Design Systems - Polish Berlin Tech

A primer in design systems, what they are, why you want one and a couple of sales tactics on getting the ball rolling for your team and company.

Originally given as a talk at Polish Berlin Tech event in January 2018.


Mariusz Cieśla

January 11, 2018


  1. Design Systems

  2. Hello!

  3. Let’s talk scaling.

  4. Step 1: Your company grows.

  5. Step 2: You launch more products.

  6. Step 3: You hire more people.

  7. Step 4: Those people launch their own experiments, initiatives and

    internal and external products.
  8. Marketing landing pages.

  9. Mobile apps.

  10. Flyers.

  11. Websites.

  12. Banner campaigns.

  13. Everyone works inside their neat little silo of a team,

    without paying attention to what happens at a global level.
  14. Step 5: You’re successful and you go global. Communication gets

    more fragmented as you go.
  15. Suddenly…

  16. ! : Dan Mall

  17. !

  18. How do you fix that?

  19. Enter design systems.

  20. Design systems are a shared language.

  21. Design systems work at three levels.

  22. Level 1: Reusable library of documented components.

  23. Level 2: Reusable library of documented rules, principles, best practices,

    ideas and values.
  24. Level 3: Connected community of people invested in consistency and

    quality of the products.
  25. In other words: Design system is a product used to

    build other products.
  26. That’s all great, but how do we actually build one?

  27. Getting buy-in.

  28. “Tear down this wall.” http://www.history.com/this-day-in-history/reagan-challenges-gorbachev

  29. Designers: We can maintain consistency across our designs so you

    can focus on innovation rather than pixel pushing.
  30. Designers: Oh, if you enjoy pixel pushing, come work on

    design systems with me, so we can do pixel pushing at a global level.
  31. Developers: We’ll work on a UI framework that you can

    use like Bootstrap / Material / something they know, so you can focus on important code things.
  32. Executives: We can build better, more consistent products, faster.

  33. Executives:

  34. Customer success: UI bugs and issues are basically a thing

    of the past.
  35. Product management: You’ll be able to quickly mock up your

    experiments using a kit of elements without investing a lot of time.
  36. Product management: More product ideas in less time.

  37. Marketing: We can easily align marketing message with visual language

    — principles-based design.
  38. Marketing: You can easily generate marketing materials out of blocks

    that designers supply.
  39. Gathering requirements.

  40. ✅ Sketch Library ✅ CSS Framework ✅ UI kit for

    Visio (for PMs)
  41. Interface inventory.

  42. Pro tip: print it out.

  43. Building a team.

  44. “Tear down this wall.” http://www.history.com/this-day-in-history/reagan-challenges-gorbachev

  45. R/A/C/I

  46. Responsible/A/C/I

  47. R/Accountable/C/I

  48. R/A/Consulted/I

  49. R/A/C/Informed

  50. Interface inventory.

  51. Building it out.

  52. Document everything.

  53. Design tokens.

  54. “Design tokens are the visual design atoms of the design

    system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.” https://www.lightningdesignsystem.com/design-tokens/
  55. Good design token represents meaningful value and a design choice.

  56. $brand-blue

  57. $color-link-regular

  58. Component library.

  59. Atomic Design.

  60. None
  61. http://atomicdesign.bradfrost.com/

  62. !

  63. !

  64. Congratulations, you now have a design system.

  65. Congratulations, you now have a design system style guide.

  66. !

  67. Level 3: Connected community of people invested in consistency and

    quality of the products.
  68. Evangelize.

  69. Add design system as part of your company onboarding.

  70. Do workshops.

  71. Explain.

  72. Get everyone on board.

  73. Extra points: Build a dedicated Design Systems Engneering team whose

    sole purpose is maintaining, updating and evangelizing design system.
  74. Congratulations, you now have a design system.

  75. Get inspired:

  76. WeWork (hi! ) Plasma http://plasma.guide/

  77. VMWare Clarity https://vmware.github.io/clarity/

  78. IBM Carbon http://carbondesignsystem.com/

  79. Salesforce Lightning https://www.lightningdesignsystem.com/

  80. Design Systems community on Slack http://designsystems.herokuapp.com/

  81. Have fun and explore!

  82. Thanks!

  83. @dotmariusz