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.

Transcript

1. Truly Portable Design Patterns
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/
18. DOM Manipulation Component Creation
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
33. Paul Hebert Designer & Developer https://cloudfour.com/is/paul/
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
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!
48. JavaScript Frameworks
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
62. ?
67. ?
70. ?
81. ?
85. ?
86. ?
87. Thank You!