Pro Yearly is on sale from $80 to $50! »

All the things I know about building design systems

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
April 01, 2016

All the things I know about building design systems

Lightning talk for the Clarity conference closing party.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

April 01, 2016
Tweet

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!