Building a Scalable Design System with Sketch

Transcript

1. BUILDING SCALABLE
   Design Systems
   Laura Van Doore

   @lauravandoore

   

   View Slide

2. Designing & building
   software is complex.
   @lauravandoore
   

   View Slide

3. • Growing design teams

   Organisations are investing more in design
   • Infinitely more complex design problems

   Software needs to become more sophisticated to keep up with the demands
   & desires of our users.
   • Distributed teams

   Agile delivery models encouraging cross functional teams.
   Why is design struggling to scale?
   @lauravandoore
   

   View Slide

4. Maintaining design debt is starting
   to feel like this:
   

   View Slide

5. “A fractured process makes for
   a fractured user experience.”

   - NATE FORTIN
   

   View Slide

6. So how can we design the process
   in order to deliver better products &
   user experience?
   

   View Slide

7. Answer: 

   A DESIGN SYSTEM
   

   View Slide

8. Design System (noun)

   [de-zine sis-tuhm]
   A collection of reusable components, governed by
   clear standards, that can be assembled together to
   build any number of applications or products.
   @lauravandoore
   

   View Slide

9. Design System Style Guide

   ‣ Design Principles
   ‣ Live Code & Implementation info
   ‣ UX & Accessibility Metrics
   ‣ Animation Timing & Easing
   ‣ Voice & tone Guidelines
   ‣ Style Guide & Design Resources
   ‣ UX Personas
   ‣ Typography
   ‣ Colour Palettes
   ‣ Component Styling
   ‣ Grids
   ‣ Static Code Samples
   @lauravandoore
   

   View Slide

10. Benefits of 

    Design Systems
    

    View Slide

11. ‣ Consistency 

    Consistency and clarity in the user interface
    ‣ Communication

    Speaking the same language
    ‣ Efficiency

    Increased ability to roll out new features and software
    products
    

    View Slide

12. ‣ Maintainability

    Both in code base, testing and design assets
    ‣ Scalability

    A solid architecture you can expand into new products
    ‣ Baked in Accessibility
    ‣ Facilitates speedy onboarding for new designers and
    engineers
    

    View Slide

13. So …
    How popular are Design Systems?
    

    View Slide

14. 86%
    According to InVision
    of Product Design teams have a Design System
    

    View Slide

15. A quick look at the best design systems
    being used around the world.
    BEST IN CLASS
    @lauravandoore
    

    View Slide

16. Atlassian Design
    

    View Slide

17. Atlassian Design
    Product
    Marketing
    Brand
    

    View Slide

18. Atlassian Design
    

    View Slide

19. Shopify Polaris
    

    View Slide

20. Salesforce Lightning Design
    

    View Slide

21. IBM Carbon
    

    View Slide

22. Meetup Swarm
    

    View Slide

23. Adele 

    Design System Repository
    

    View Slide

24. A QUICK PREVIEW
    Design Systems at Fathom
    @lauravandoore
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. PLUGINS & WORKFLOWS
    Sketch Essentials
    @lauravandoore
    

    View Slide

29. Auto Layout 

    Responsive Design in Sketch
    

    View Slide

30. Sketch Icons 

    Use your icon font seamlessly in Sketch
    

    View Slide

31. Style Libraries 

    Push & Pull layer styles from your Design System
    

    View Slide

32. Toybox Roller 

    Find & fix design inconsistencies in Sketch
    

    View Slide

33. InVision Inspect 

    For getting your Design System from Sketch to code
    

    View Slide

34. Sketch Library Design System

    ≠
    @lauravandoore
    

    View Slide

35. A Sketch Library is just one small part
    of a successful Design System.
    

    View Slide

36. Design Systems
    are a team sport
    @lauravandoore
    

    View Slide

37. The best Design Systems
    are a shared asset between
    design & development.
    

    View Slide

38. Getting started
    @lauravandoore
    

    View Slide

39. Building a Design System is a
    marathon, not a sprint. 

    

    View Slide

40. EXPECTATION
    REALITY
    vs
    

    View Slide

41. Don’t think of it like a project.
    

    View Slide

42. Approach it like a product.
    With a roadmap, objectives & many
    different groups of users.
    

    View Slide

43. Inventory
    Take stock of where you are.
    1
    

    View Slide

44. It might look something like this …
    

    View Slide

45. Find patterns & create order out of the chaos …
    

    View Slide

46. Structure
    Define a structure for your Design System
    2
    

    View Slide

47. Define a new structure
    Atoms & Molocules?

    

    View Slide

48. Define a new structure
    GE Predix System
    

    View Slide

49. Standardise
    Also known as “Getting to one”
    3
    

    View Slide

50. ROLLING OUT YOUR OWN
    Design System
    @lauravandoore
    

    View Slide

51. Chip Away
    #1
    @lauravandoore
    

    View Slide

52. Chip Away
    The design system is something that is only worked
    on in spare time, or when designers/engineers are
    between projects.
    @lauravandoore
    #1
    Cost Risk Speed Quality
    

    View Slide

53. Hibernation
    #2
    @lauravandoore
    

    View Slide

54. Hibernation
    Getting a core team of designers & engineers
    working on the Design System full-time. Possibly
    allows the time for designers/engineers to come up
    with the best implementation.
    @lauravandoore
    #2
    Cost Risk Speed Quality
    

    View Slide

55. Piggyback
    #3
    @lauravandoore
    

    View Slide

56. Piggyback
    Plan to get the bulk of the Design System implemented
    as a part of another project. Balances out the cost
    better, as you see the returns immediately.
    @lauravandoore
    #2
    Cost Risk Speed Quality
    

    View Slide

57. Chip Away
    1
    Hibernation
    Piggyback
    2
    3
    @lauravandoore
    Rollout strategies
    

    View Slide

58. EXTENDING & MAINTAINING
    Design Systems
    @lauravandoore
    

    View Slide

59. Just like Design, a Design System
    is never finished.
    

    View Slide

60. Have a plan & a process for how
    to extend on your system.
    

    View Slide

61. View Slide

62. Don’t forget to take stock
    @lauravandoore
    

    View Slide

63. Thanks
    Laura Van Doore
    @lauravandoore
    

    View Slide