Cross-platform DS in React Native: Musixmatch’s case study
summary
Musixmatch builds a single cross platform design system called Ritmo using React Native plus React Native for web so one codebase ships to iOS Android and web and the UI renders identically across platforms. Components include built in skeleton loading, light and dark themes, and a responsive dialog ↔ bottom sheet component swap that changes behavior by screen size. Design tooling is Figma and Storybook, foundations are tiny — just 11 type styles — and the system is a dependency installed in all apps.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 4:49Design system concepts
- 6:59Cross-platform vision
- 9:45Design phase
- 12:41Design system foundations
- 16:22React Native setup
- 18:53Component swapping
- 21:03Building a page
- 25:31Maintaining design system
- 27:45Contribution process
- 30:15Q&A
related talks
01h 14mHow to Build a Cross-Platform Design System in React
33miOS Engineer’s Journey in the Realm of React Native
18mZero to Music Hero: Building Cross-Platform Games in Months With React Native & Skia
39mCross Platform & Beyond
36mThe sorcery of building a cross platform Design System architecture
59mOne Codebase to Rule Them All - Using React Native Everywhere
28mCross-Platform React
23mThe State of One Codebase For All The Platforms