What is it technically

Web Components Library

React Wrapper

Tailwind Preset

Open Source

Another Components Library?

Not just any Components Library

Template for new projects

Storybook

Figma Format

Chromatic

What else

Framework agnostic

How to work with the UX team (UX-Dev Cycle)

Mindset

Goals

Increase collaboration between Devs and Designers

Offer a starting point for new projects

The Problem

Often, the process looks something like this:

• UX designer designs something
• Web developer develops something

linear workflow with no feedback

The Result

• design and implementation drift apart
• little understanding between UX and devs
• inconsistent UI, visual regression

Proposed UX-Dev Cycle

To develop and improve the Design System:

1. UX designer uses design token to define component
2. developer uses design token to implement component
3. developer gives technical feedback to UX designer
4. other developers review the component code
5. UX designers review the visual snapshot diffs
6. UX designers test implemented component

Advantages

• ensure correct visual implementation
• prevent visual regression
• UX designers stay in the loop
• regular interactions between UX and devs (both learn from each other)
• design and implementation are in sync

Setup

• React app uses the Design System React wrappers and Tailwind preset
• Design System gets published to the internal registry upon tagging commit with a version
• Chromatic is run on the main branch and changes regularly get checked by UX
• local linking of Web Components from the React app possible for development (using npm link)
• merged stories get tested by UX on the test environment

Experience: the good stuff

• setup easy to understand and use
• consistent styling in components and throughout the app
• clear communication between development and UX
• accountability to both development and UX to be aligned with each other and with the defined token
• low effort to build simple parts of the UI
• easy to add, extend and adapt components

Experience: the not quite as great stuff

• missing changelog
• hard to find/prevent side effects from changes sometimes in the app itself
• added round-trip time to implement a story if changes in Web Components are needed
• Chromatic only on the main branch after merging as we only use the free tier, which has a limit on the snapshots per month

What do we want to do next? 🚀

• comprehensive documentation
• example applications in React and Angular (and more?)
• full infrastructure with Storybook, Chromatic, …
• update to new Figma template/variables