Scalable Design Systems with Sketch
•
2 likes•681 views
The document discusses building scalable design systems. It notes that design teams are growing, problems are more complex, and teams are distributed. Maintaining design debt can fracture the user experience. A design system, defined as a reusable set of components governed by standards, can help by providing consistency, communication, efficiency, maintainability, and scalability. The document outlines components of a design system and benefits. It shows examples from companies and tools for design systems. It discusses approaches to starting a design system like inventorying existing design, structuring the system, and standardizing. It also notes design systems require ongoing extension and maintenance.
Report
Share
Scalable Design Systems with Sketch
- 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. BESTIN CLASS @lauravandoore
- 16. Atlassian Design
- 18. Atlassian Design
- 19. Shopify Polaris
- 21. IBM Carbon
- 22. Meetup Swarm
- 23. Adele Design System Repository
- 24. AQUICKPREVIEW Design Systems at Fathom @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.
- 39. Building a Design System is a marathon, not a sprint.
- 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
- 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
- 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
- 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
- 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.
- 62. Don’t forget to take stock @lauravandoore