Alex is a software engineer for Stripe, working remotely out of Austin, TX. He enjoys open-source frontend infrastructure, internationalization, and design systems. He helped create Modernizr, and MessageFormat.js, and served as a member of the jQuery team and the JS Foundation board of advisors.
“Design Systems” and component libraries are a popular solution for abstracting common UI elements and flows to be reusable across many applications.They allow you to spend more time on the details, and reduce the complexity of implementing consistent experiences.There’s a good chance that you’re using one already!
Scaling these systems to provide value to lots of teams across your organization, or in open - source - land, requires solving for each team’s different use-cases simultaneously. How do you add in support for internationalization, accessibility, theming (dark mode!), server rendering, or multiple render targets? How do you support the teams that need it in React and the teams that need it in Svelte? How do you provide a system that is flexible enough, but doesn’t become prohibitively complex? How can you export your components to popular design tools for your designers to build with?
Let’s dive into approaches to solving these problems in scalable ways, and take a look at how Stripe has chosen to tackle some of these issues in the real world. Let’s look at how to make sure a design system specifies design choices and allows users to build quickly, but doesn’t lock you into specific frameworks or trendy tools out of the gate.
for free. You
can too.