Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scalable Design Systems with Sketch

307 views

Published on

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

About Laura
Laura is a Senior Product Designer at Fathom, a B2B SaaS product in the fintech domain. Over the last nine years, she has worked her way through design and UX roles in a variety of environments, from small agencies to corporate giants. Her experience includes creating digital solutions for travel, government, SaaS, health, fintech, real estate and ecommerce. Laura has a natural curiosity for solving 'people problems’, which makes her a passionate advocate for unravelling complexity, measuring UX, and crafting design systems.

Published in: Design
  • Be the first to comment

Scalable Design Systems with Sketch

  1. 1. BUILDING SCALABLE Design Systems Laura Van Doore
 @lauravandoore

  2. 2. Designing & building software is complex. @lauravandoore
  3. 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. 4. Maintaining design debt is starting to feel like this:
  5. 5. “A fractured process makes for a fractured user experience.”
 - NATE FORTIN
  6. 6. So how can we design the process in order to deliver better products & user experience?
  7. 7. Answer: 
 A DESIGN SYSTEM
  8. 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. 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. 10. Benefits of 
 Design Systems
  11. 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. 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. 13. So … How popular are Design Systems?
  14. 14. 86% According to InVision of Product Design teams have a Design System
  15. 15. A quick look at the best design systems being used around the world. BESTIN CLASS @lauravandoore
  16. 16. Atlassian Design
  17. 17. Atlassian Design ProductMarketing Brand
  18. 18. Atlassian Design
  19. 19. Shopify Polaris
  20. 20. Salesforce Lightning Design
  21. 21. IBM Carbon
  22. 22. Meetup Swarm
  23. 23. Adele 
 Design System Repository
  24. 24. AQUICKPREVIEW Design Systems at Fathom @lauravandoore
  25. 25. PLUGINS &WORKFLOWS Sketch Essentials @lauravandoore
  26. 26. Auto Layout 
 Responsive Design in Sketch
  27. 27. Sketch Icons 
 Use your icon font seamlessly in Sketch
  28. 28. Style Libraries 
 Push & Pull layer styles from your Design System
  29. 29. Toybox Roller 
 Find & fix design inconsistencies in Sketch
  30. 30. InVision Inspect 
 For getting your Design System from Sketch to code
  31. 31. Sketch Library Design System
≠ @lauravandoore
  32. 32. A Sketch Library is just one small part of a successful Design System.
  33. 33. Design Systems are a team sport @lauravandoore
  34. 34. The best Design Systems are a shared asset between design & development.
  35. 35. Getting started @lauravandoore
  36. 36. Building a Design System is a marathon, not a sprint. 

  37. 37. EXPECTATION REALITY vs
  38. 38. Don’t think of it like a project.
  39. 39. Approach it like a product. With a roadmap, objectives & many different groups of users.
  40. 40. Inventory Take stock of where you are. 1
  41. 41. It might look something like this …
  42. 42. Find patterns & create order out of the chaos …
  43. 43. Structure Define a structure for your Design System 2
  44. 44. Define a new structure Atoms & Molocules?

  45. 45. Define a new structure GE Predix System
  46. 46. Standardise Also known as “Getting to one” 3
  47. 47. ROLLING OUT YOUR OWN Design System @lauravandoore
  48. 48. Chip Away #1 @lauravandoore
  49. 49. 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
  50. 50. Hibernation #2 @lauravandoore
  51. 51. 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
  52. 52. Piggyback #3 @lauravandoore
  53. 53. 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
  54. 54. Chip Away1 Hibernation Piggyback 2 3 @lauravandoore Rollout strategies
  55. 55. EXTENDING & MAINTAINING Design Systems @lauravandoore
  56. 56. Just like Design, a Design System is never finished.
  57. 57. Have a plan & a process for how to extend on your system.
  58. 58. Don’t forget to take stock @lauravandoore
  59. 59. Thanks Laura Van Doore @lauravandoore

×