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

Truly Portable Design Patterns

Truly Portable Design Patterns

One of the main promises of design systems is to create a pattern or component once and see it reused by designers and developers throughout your organization. This promise is mostly unrealized. The most common design tools cannot consume our front-end patterns, which are often locked in to a specific framework that may not work for every team or project

Fortunately, our tools and web standards are catching up with our design system aspirations. New web-based design tools like Framer X and UX Pin make it possible to import pattern library components directly. Even more traditional design tools like Sketch can be now consume pattern libraries. And web components have the potential to become a lingua franca for design systems allowing us to create components that can be used with whatever JavaScript framework your team chooses.

In this session, Jason will demonstrate how close we are to the promise of design systems by showing how components can flow through our design tools and development frameworks and what challenges remain to be solved.

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

April 05, 2022
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Truly Portable Design Patterns

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Design System Intermediaries • Distributors • Translators • Themers Nathan

    Curtis
  10. Design System Intermediaries • Distributors • Translators • Themers Nathan

    Curtis • Translators
  11. https://medium.com/eightshapes-llc/design-systems-intermediaries-955ef18c9409

  12. https://medium.com/eightshapes-llc/design-systems-intermediaries-955ef18c9409

  13. User-Friendly Integrated Collaborative Pick Any Two https://cloudfour.com/thinks/qualities-of-successful-pattern-libraries/

  14. None
  15. None
  16. None
  17. None
  18. DOM Manipulation Component Creation

  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. Components all the way down Design system components JS Framework

    components Design tools components CMS components Web components
  28. https://twitter.com/maxlynch/status/1154844592610656256

  29. None
  30. None
  31. None
  32. None
  33. Paul Hebert Designer & Developer https://cloudfour.com/is/paul/

  34. None
  35. Demo web components Button Color Swatches Radio Buttons Group Stepper

    Star Ratings Product Illustration Text Columns Product Lockup Containers
  36. What is a web component?

  37. Define our own custom HTML elements <c4-button>I'm a c4-button!</c4-button>

  38. <c4-button> I'm a c4-button! </c4-button> <c4-button button-class="secondary"> I'm a secondary

    c4-button! </c4-button> <c4-button button-class="tertiary"> I'm a tertiary c4-button! </c4-button> <c4-button disabled="true"> I'm a disabled c4-button! </c4-button> <c4-button tag="a"> I'm actually a link! </c4-button>
  39. Custom Elements Shadow DOM HTML Template create new HTML elements

    encapsulates style and markup defines fragments of markup for later use
  40. None
  41. ✅ Encapsulation ✅ Shadow DOM ✅ ES Modularity ✅ HTML

    templates A basic web component…
  42. ✅ Encapsulation ✅ Shadow DOM ✅ ES Modularity ✅ HTML

    templates Virtual DOM CSS Processing Declarative templates Reactive data binding SSR
  43. ✅ Encapsulation ✅ Shadow DOM ✅ ES Modularity ✅ JSX

    Templates ✅ Virtual DOM ✅ Data Binding ✅ SSR ✅ CSS Processing A Stencil component…
  44. ✅ Encapsulation ✅ Shadow DOM ✅ ES Modularity ✅ JSX

    Templates ✅ Virtual DOM ✅ Data Binding ✅ SSR ✅ CSS Processing …compiles to a vanilla web component!
  45. None
  46. None
  47. None
  48. JavaScript Frameworks

  49. None
  50. None
  51. None
  52. None
  53. React Sketch.app only supports React Native https://airbnb.io/react-sketchapp/docs/FAQ.html#view--text-where-are-the-shapes-talk-to-me-about-your-api-decisions

  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. ?

  63. None
  64. None
  65. None
  66. None
  67. ?

  68. None
  69. None
  70. ?

  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. ?

  82. None
  83. None
  84. None
  85. ?

  86. ?

  87. Thank You!