How to Build a Cross-Platform Design System in React
summary
Shows how to build a cross-platform design system implemented in code using React Native, React Figma, Styled System and related tools. Targets designers at product companies and developers of design systems, demonstrating a workflow for describing UI components across platforms.
AI-written summary · about
chapters (26)
- 0:00Introduction
- 2:14Talk goals
- 3:19Design challenges
- 4:24Cross-platform tools
- 6:57React benefits
- 8:01Atomic Design
- 10:52Figma plugins
- 13:27React Figma
- 15:13Figma primitives
- 16:57Styling solutions
- 18:42Design system example
- 20:08Color palette
- 23:36Icons and SVG
- 26:07Button states
- 29:46Accessibility
- 31:11Cross-platform imports
- 32:58Component catalog
- 35:34Complex components
- 37:42Creation process
- 40:55Roles in design system
- 43:21Recommendations
- 45:51MDX docs
- 46:14Future plans
- 48:23Automation challenges
- 53:23Conclusion
- 54:26Q&A
related talks
41mBuilding a design system with React in 2025, what's new?
36mCross-platform DS in React Native: Musixmatch’s case study
32mYour Guide to Making Scalable Design Systems
36mThe sorcery of building a cross platform Design System architecture
35mDesign system - From a Developer Point-of-View
33mHow to Build a Universal Design System
20mDesign Systems for the Rest of Us
30mDesigning with React