Scalable Design Systems with Sketch

2020-02-27 206浏览

  • 1.BUILDING SCALABLE Design Systems Laura Van Doore
 @lauravandoore
  • 2.Designing & building software is complex. @lauravandoore
  • 3.Why is design struggling to scale? • 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. @lauravandoore
  • 4.Maintaining design debt is starting to feel likethis:
  • 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 ‣ Design Principles ‣ Live Code & Implementation info ‣ UX & Accessibility Metrics ‣ Animation Timing & Easing ‣ Voice & tone Guidelines ‣ Style Guide & Design Resources ‣ UX Personas Style Guide
 ‣ 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.According to InVision 86% of Product Design teams have a Design System
  • 15.BEST IN CLASS A quick look at the best design systems being used around the world. @lauravandoore
  • 16.Atlassian Design
  • 17.Marketing Atlassian Design Product 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.
  • 26.
  • 27.
  • 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 vs REALITY
  • 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.1 Inventory Take stock of where you are.
  • 44.It might look something like this …
  • 45.Find patterns & create order out of the chaos …
  • 46.2 Structure Define a structure for your Design System
  • 47.Define a new structure Atoms & Molocules?
  • 48.Define a new structure GE Predix System
  • 49.3 Standardise Also known as “Getting to one”
  • 50.ROLLING OUT YOUR OWN Design System @lauravandoore
  • 51.#1 Chip Away @lauravandoore
  • 52.#1 Chip Away The design system is something that is only worked on in spare time, or when designers/engineers are between projects. Cost Risk Speed Quality @lauravandoore
  • 53.#2 Hibernation @lauravandoore
  • 54.#2 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. Cost Risk Speed Quality @lauravandoore
  • 55.#3 Piggyback @lauravandoore
  • 56.#2 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. Cost Risk Speed Quality @lauravandoore
  • 57.Rollout strategies 1 Chip Away 2 Hibernation 3 Piggyback @lauravandoore
  • 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.
  • 62.Don’t forget to take stock @lauravandoore
  • 63.Thanks Laura Van Doore @lauravandoore