Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a Scalable Design System with Sketch

Building a Scalable Design System with Sketch

Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.

In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems

Laura Van Doore

June 19, 2018
Tweet

More Decks by Laura Van Doore

Other Decks in Design

Transcript

  1. BUILDING SCALABLE
    Design Systems
    Laura Van Doore

    @lauravandoore


    View full-size slide

  2. Designing & building
    software is complex.
    @lauravandoore

    View full-size 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 full-size slide

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

    View full-size slide

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

    - NATE FORTIN

    View full-size slide

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

    View full-size slide

  7. Answer: 

    A DESIGN SYSTEM

    View full-size 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 full-size 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 full-size slide

  10. Benefits of 

    Design Systems

    View full-size 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 full-size 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 full-size slide

  13. So …
    How popular are Design Systems?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Atlassian Design

    View full-size slide

  17. Atlassian Design
    Product
    Marketing
    Brand

    View full-size slide

  18. Atlassian Design

    View full-size slide

  19. Shopify Polaris

    View full-size slide

  20. Salesforce Lightning Design

    View full-size slide

  21. Meetup Swarm

    View full-size slide

  22. Adele 

    Design System Repository

    View full-size slide

  23. A QUICK PREVIEW
    Design Systems at Fathom
    @lauravandoore

    View full-size slide

  24. PLUGINS & WORKFLOWS
    Sketch Essentials
    @lauravandoore

    View full-size slide

  25. Auto Layout 

    Responsive Design in Sketch

    View full-size slide

  26. Sketch Icons 

    Use your icon font seamlessly in Sketch

    View full-size slide

  27. Style Libraries 

    Push & Pull layer styles from your Design System

    View full-size slide

  28. Toybox Roller 

    Find & fix design inconsistencies in Sketch

    View full-size slide

  29. InVision Inspect 

    For getting your Design System from Sketch to code

    View full-size slide

  30. Sketch Library Design System


    @lauravandoore

    View full-size slide

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

    View full-size slide

  32. Design Systems
    are a team sport
    @lauravandoore

    View full-size slide

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

    View full-size slide

  34. Getting started
    @lauravandoore

    View full-size slide

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


    View full-size slide

  36. EXPECTATION
    REALITY
    vs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Inventory
    Take stock of where you are.
    1

    View full-size slide

  40. It might look something like this …

    View full-size slide

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

    View full-size slide

  42. Structure
    Define a structure for your Design System
    2

    View full-size slide

  43. Define a new structure
    Atoms & Molocules?


    View full-size slide

  44. Define a new structure
    GE Predix System

    View full-size slide

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

    View full-size slide

  46. ROLLING OUT YOUR OWN
    Design System
    @lauravandoore

    View full-size slide

  47. Chip Away
    #1
    @lauravandoore

    View full-size slide

  48. 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 full-size slide

  49. Hibernation
    #2
    @lauravandoore

    View full-size slide

  50. 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 full-size slide

  51. Piggyback
    #3
    @lauravandoore

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

  54. EXTENDING & MAINTAINING
    Design Systems
    @lauravandoore

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. Don’t forget to take stock
    @lauravandoore

    View full-size slide

  58. Thanks
    Laura Van Doore
    @lauravandoore

    View full-size slide