Lessons learned from working on an open source design system at Uber

Description

A design system is a set of reusable components that, in combination with a set of rules and design tokens (named entities that store visual design information like colors or spacing), enables you to build consistent and accessible applications quickly. At its core, Base UI is a foundational set of reusable React components with an architecture that enables teams to create new design languages on top of it. By default, these component use the Base UI design language that, as the name suggests, acts as a base design language you can further customize.

Gergely Nemeth shares the lessons he learned while diving into an open source design system project at Uber, including design-engineering collaboration, documentation, InnerSourcing, and measuring impact. One of the biggest challenges was (and remains) improving collaboration between design and engineering teams so the teams can use multiple channels to communicate: demo meetings, Figma comments, collaborative visual regression testing, and common chat channels. The original documentation site used wasn’t effective enough, so the team rolled out its own, which included copy/paste examples and editable code snippets and autogenerated API documentation. Historically, whenever Uber used an open source project with UIs, the team had to recreate a minimal design to be open-sourced along with the project, but the team was able to use InnerSourcing, letting people from different teams working on internal design systems contribute. Gergely and his team measured the impact by collecting statistics on how many projects adopt Base UI internally at Uber using Sourcegraph and through surveying—then set out goals to improve.