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

All the things I know about building design systems

Diana
April 01, 2016

All the things I know about building design systems

Lightning talk for the Clarity conference closing party.

Diana

April 01, 2016
Tweet

More Decks by Diana

Other Decks in Design

Transcript

  1. How people build software ! " G’day

  2. How people build software ! " I’m Diana Mounter @broccolini

  3. How people build software ! Diana Mounter! Come to Buzzfeed

    and do a talk! 3 About what? All the things you know!
  4. How people build software ! " All the things I

    know About building design systems
  5. How people build software ! ! 5 !

  6. How people build software ! Write down your principles 6

    1
  7. How people build software ! Yup! 7 You’re gonna do

    it OOCSS/ functional/atomic/BEM right?
  8. How people build software ! 8 When you actually see

    the code
  9. How people build software ! 9 Lots of arguments vibrant

    discussions
  10. How people build software ! 10 After 6 months of

    learning the hard way… Principle led development!
  11. How people build software ! ! 11 !

  12. How people build software ! 12 IT’S A UNIX SYSTEM

    I KNOW THIS!
  13. How people build software ! "

  14. How people build software ! "

  15. How people build software ! 15

  16. How people build software ! ! Write down your principles

    16 •Styleguide driven design and development •Obvious and transparent •Components, Objects, Utilities •Naming convention •Property order
  17. How people build software ! Naming things is hard, but

    it can be easier 17 2
  18. How people build software ! 18 Choose a naming convention

    • Show the options in code • Describe the pros and cons
  19. How people build software ! 19 Is it searchable? •

    In markup and CSS
  20. How people build software ! 20 Easy to understand, quick

    to internalize <div class="box xs-mt-2 bg-gray">
  21. How people build software ! 21 Make a list of

    all 
 your classes .boxed-group .simple-box .box-group .box-simple
  22. How people build software ! You can keep things (mostly)

    up-to-date 22 3
  23. How people build software ! 23 Use routine events to

    make updates • Onboarding • Training
  24. How people build software ! 24 Make it part of

    your code review checklist • Did you update the docs?
  25. How people build software ! Make it easy for everyone

    to contribute to documentation 25 4
  26. How people build software ! 26

  27. How people build software ! Let people play with the

    lego 27 5
  28. How people build software ! Let people play with the

    lego 28 1
  29. How people build software ! 29 Cap: Check out basscss.

    It’s a class library that lets you build new UI elements quickly. Sam: I hate it! https://medium.com/buzzfeed-design/how-i-learned-to-stop- worrying-and-love-the-atomic-class-98d6ccc45781#.ootp6rbxh
  30. How people build software ! 30 Give designers a prototyping

    environment that is easy to setup and uses production CSS.
  31. How people build software ! 31 Styleguides are a gateway

    drug for empowering designers to code.
  32. How people build software ! Look forward, don’t look back

    32 6
  33. How people build software ! 33

  34. How people build software ! 34 Not everything needs to

    be changed all at once.
  35. How people build software ! Just do it (but choose

    your ships!) 35 7
  36. How people build software ! " Thanks!