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.

Jason Grigsby

April 05, 2022
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Components all the way down Design system components JS Framework

    components Design tools components CMS components Web components
  2. Demo web components Button Color Swatches Radio Buttons Group Stepper

    Star Ratings Product Illustration Text Columns Product Lockup Containers
  3. <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>
  4. Custom Elements Shadow DOM HTML Template create new HTML elements

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

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

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

    Templates ✅ Virtual DOM ✅ Data Binding ✅ SSR ✅ CSS Processing …compiles to a vanilla web component!
  8. ?

  9. ?

  10. ?

  11. ?

  12. ?

  13. ?