All the things I know about building design systems

Lightning talk for the Clarity conference closing party.

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!