All the things I know about building design systems

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!