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
   

   View Slide

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

   View Slide

3. How people build software
   !
   Diana Mounter! Come to
   Buzzfeed and do a talk!
   3
   About what?
   All the things you know!
   

   View Slide

4. How people build software
   !
   "
   All the things I know
   About building design systems
   

   View Slide

5. How people build software
   !
   !
   5
   !
   

   View Slide

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

   View Slide

7. How people build software
   !
   Yup!
   7
   You’re gonna do it OOCSS/
   functional/atomic/BEM
   right?
   

   View Slide

8. How people build software
   ! 8
   When you actually
   see the code
   

   View Slide

9. How people build software
   ! 9
   Lots of arguments
   vibrant discussions
   

   View Slide

10. How people build software
    ! 10
    After 6 months of learning
    the hard way…
    Principle led development!
    

    View Slide

11. How people build software
    !
    !
    11
    !
    

    View Slide

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

    View Slide

13. How people build software
    !
    "
    

    View Slide

14. How people build software
    !
    "
    

    View Slide

15. How people build software
    ! 15
    

    View Slide

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
    

    View Slide

17. How people build software
    !
    Naming things is hard,
    but it can be easier
    17
    2
    

    View Slide

18. How people build software
    ! 18
    Choose a naming convention
    • Show the options in code
    • Describe the pros and cons
    

    View Slide

19. How people build software
    ! 19
    Is it searchable?
    • In markup and CSS
    

    View Slide

20. How people build software
    ! 20
    Easy to understand,
    quick to internalize
    
    

    View Slide

21. How people build software
    ! 21
    Make a list of all 

    your classes
    .boxed-group
    .simple-box
    .box-group
    .box-simple
    

    View Slide

22. How people build software
    !
    You can keep things
    (mostly) up-to-date
    22
    3
    

    View Slide

23. How people build software
    ! 23
    Use routine events to
    make updates
    • Onboarding
    • Training
    

    View Slide

24. How people build software
    ! 24
    Make it part of your code
    review checklist
    • Did you update the docs?
    

    View Slide

25. How people build software
    !
    Make it easy for
    everyone to contribute
    to documentation
    25
    4
    

    View Slide

26. How people build software
    ! 26
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

30. How people build software
    ! 30
    Give designers a
    prototyping environment
    that is easy to setup and
    uses production CSS.
    

    View Slide

31. How people build software
    ! 31
    Styleguides are a gateway
    drug for empowering
    designers to code.
    

    View Slide

32. How people build software
    !
    Look forward,
    don’t look back
    32
    6
    

    View Slide

33. How people build software
    ! 33
    

    View Slide

34. How people build software
    ! 34
    Not everything needs to be
    changed all at once.
    

    View Slide

35. How people build software
    !
    Just do it
    (but choose your ships!)
    35
    7
    

    View Slide

36. How people build software
    !
    "
    Thanks!
    

    View Slide