Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Minimum Viable Design System — Design Systems for the Rest of Us

The Minimum Viable Design System — Design Systems for the Rest of Us

When we build out a design system we tend to aspire to recreating something as grand, comprehensive and complete as an open source design system like Material, Carbon or Polaris. In this talk I will talk about the value in starting small and building the right kind of design system for your team. As part of my work with Interplay I will discuss the challenges we’re facing with our current design tools and what we’re doing to help designers and developers share a common vocabulary.

Peter McDonagh

July 30, 2019
Tweet

Other Decks in Design

Transcript

  1. The Minimum Viable Design System — Design Systems for the

    Rest of Us Peter McDonagh @petermcdonagh_
  2. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  3. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  4. What is an MVDS*? * Disclaimer: The term Minimum Viable

    Design System is not a real term, I made it up for this talk.
  5. MVP — A minimum viable product (MVP) is a product

    with just enough features to satisfy early customers, and to provide feedback for future product development.
  6. MVDS — A minimum viable design system (MVDS) is a

    design system with just enough components and documentation to empower early teams, and to provide feedback for future design system development.
  7. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  8. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  9. “Just because you can’t afford a Ferrari doesn’t mean you

    have to walk to work. Sometimes a Volvo is just fine.” — Chris Armstrong, Niice
  10. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  11. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  12. Creators Consumers A creator contributes to the design system A

    consumer uses the design system Credit: Nikolas Klein, DesignSystems.com
  13. Team sizes Large Small team All creators are consumers •

    Internalised knowledge • Speed over rigidity • Eg. Interplay Mid-size Platform Credit: Nikolas Klein, DesignSystems.com
  14. Platform Team sizes Large Small team All creators are consumers

    • Internalised knowledge • Speed over rigidity • Eg. Interplay Mid-size Not all creators are consumers • Gatekeepers integrated with existing teams • Still lots of to-dos • Ad-hoc communication • Eg. Figma Credit: Nikolas Klein, DesignSystems.com
  15. Team sizes Large Separate Design Ops Team develops • Creators

    are not consumers • Increasingly Self-serve • More complete docs • Playgrounds, code snippets, custom tools • Eg. FB, Netflix, Airbnb Small team All creators are consumers • Internalised knowledge • Speed over rigidity • Eg. Interplay Mid-size Not all creators are consumers • Gatekeepers integrated with existing teams • Still lots of to-dos • Ad-hoc communication • Eg. Figma Platform Credit: Nikolas Klein, DesignSystems.com
  16. Team sizes Large Separate Design Ops Team develops • Creators

    are not consumers • Increasingly Self-serve • More complete docs • Playgrounds, code snippets, custom tools • Eg. FB, Netflix, Airbnb Small team All creators are consumers • Internalised knowledge • Speed over rigidity • Eg. Interplay Mid-size Not all creators are consumers • Gatekeepers integrated with existing teams • Still lots of to-dos • Ad-hoc communication • Eg. Figma Platform External consumers rely on you • For use by third parties • Comprehensive docs • Open Source • Eg. Material, Apple HIG, Polaris Credit: Nikolas Klein, DesignSystems.com
  17. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  18. Part 1 Principles of an MVDS What is it? Why

    does it matter? Who is it for? What should it include?
  19. What should it include? Things you use a lot Things

    you already have Minimum Viable Design System
  20. What should it include? Things you haven’t made yet Things

    you use a lot Things you already have Minimum Viable Design System
  21. What should it include? Things you haven’t made yet Things

    you use a lot Things you already have Minimum Viable Design System in code
  22. 1. The new feature doesn’t match your designs 2. Developer

    updates the component but breaks other instances of the component
  23. 1. The new feature doesn’t match your designs 2. Developer

    updates the component but breaks other instances of the component a. They look a bit janky b. Dev fixes them but sinks a load of time
  24. The challenge with using a design system is that our

    current design tools are completely cut off from everything that already exists in production.
  25. Design System Code (code components with coded behaviour) UI Libraries

    (vector based, static symbols & design components) T H E G A P
  26. Code components contain a wealth of coded behaviour that cannot

    easily be communicated in our current design tools
  27. Have you ever tried to create a prototype of a

    list with hover states and checkboxes in Sketch or Figma?
  28. Interplay connects with your design system repository to make your

    design system available everywhere. So what does it do?
  29. Give designers access to these code components and help them

    get from an idea to a working thing as quickly possible
  30. • Connects with code repo • DSM • Builder •

    Code export • Plugins for design tools So that’s Interplay
  31. What have we got to look forward to? • Real

    Data • Accessibility built in • Token-first • Linting • Logic and states • Collaboration between Design & Dev • Visual development with seamless switching between visual dev and code
  32. Recap Build the MVDS that is right for your organisation.

    Help designers get closer to code components and coded behaviour.