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. 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
  2. 6.

    So how can we design the process in order to

    deliver better products & user experience?
  3. 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
  4. 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
  5. 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
  6. 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
  7. 15.

    A quick look at the best design systems being used

    around the world. BEST IN CLASS @lauravandoore
  8. 25.
  9. 26.
  10. 27.
  11. 35.
  12. 42.
  13. 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
  14. 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
  15. 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
  16. 61.