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

1177e050db6bafe62885362edf6e3537?s=128

Laura Van Doore

June 19, 2018
Tweet

Transcript

  1. BUILDING SCALABLE Design Systems Laura Van Doore
 @lauravandoore


  2. Designing & building software is complex. @lauravandoore

  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
  4. Maintaining design debt is starting to feel like this:

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

    NATE FORTIN
  6. So how can we design the process in order to

    deliver better products & user experience?
  7. Answer: 
 A DESIGN SYSTEM

  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
  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
  10. Benefits of 
 Design Systems

  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
  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
  13. So … How popular are Design Systems?

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

    Design System
  15. A quick look at the best design systems being used

    around the world. BEST IN CLASS @lauravandoore
  16. Atlassian Design

  17. Atlassian Design Product Marketing Brand

  18. Atlassian Design

  19. Shopify Polaris

  20. Salesforce Lightning Design

  21. IBM Carbon

  22. Meetup Swarm

  23. Adele 
 Design System Repository

  24. A QUICK PREVIEW Design Systems at Fathom @lauravandoore

  25. None
  26. None
  27. None
  28. PLUGINS & WORKFLOWS Sketch Essentials @lauravandoore

  29. Auto Layout 
 Responsive Design in Sketch

  30. Sketch Icons 
 Use your icon font seamlessly in Sketch

  31. Style Libraries 
 Push & Pull layer styles from your

    Design System
  32. Toybox Roller 
 Find & fix design inconsistencies in Sketch

  33. InVision Inspect 
 For getting your Design System from Sketch

    to code
  34. Sketch Library Design System
 ≠ @lauravandoore

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

    successful Design System.
  36. Design Systems are a team sport @lauravandoore

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

    & development.
  38. Getting started @lauravandoore

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

  40. EXPECTATION REALITY vs

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

  42. Approach it like a product. With a roadmap, objectives &

    many different groups of users.
  43. Inventory Take stock of where you are. 1

  44. It might look something like this …

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

  46. Structure Define a structure for your Design System 2

  47. Define a new structure Atoms & Molocules?


  48. Define a new structure GE Predix System

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

  50. ROLLING OUT YOUR OWN Design System @lauravandoore

  51. Chip Away #1 @lauravandoore

  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
  53. Hibernation #2 @lauravandoore

  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
  55. Piggyback #3 @lauravandoore

  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
  57. Chip Away 1 Hibernation Piggyback 2 3 @lauravandoore Rollout strategies

  58. EXTENDING & MAINTAINING Design Systems @lauravandoore

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

  60. Have a plan & a process for how to extend

    on your system.
  61. None
  62. Don’t forget to take stock @lauravandoore

  63. Thanks Laura Van Doore @lauravandoore