A course for hybrid designers and frontend engineers on building a design system in Figma and React Native simultaneously — so every design decision has a direct code counterpart.
- Foundations — color, typography, spacing, grid, elevation, and iconography as design tokens in both Figma Variables and React Native
- Components — 60 components sourced from The Component Gallery, built in Figma (variants, auto layout, component properties) and React Native (typed props, token-based styles)
- Templates — combining components into full screens: onboarding, dashboard, detail, forms, and empty states
- Prototyping — Figma interactive prototypes and React Navigation wiring in code
- Handoff — publishing Figma libraries, versioning token pipelines, and the designer–engineer workflow
Each lesson follows a consistent rhythm:
- Why — the problem this element solves
- Figma — build it live
- Code — build it in React Native
- Bridge — explicitly connect the two (Figma variable → code token, Figma variant → RN prop)
| File | Description |
|---|---|
course-outline.md |
Full module-by-module course plan with all 60 components |
- Figma — design system library (variables, components, prototyping)
- Expo + React Native — component library and app prototype
- Style Dictionary — token pipeline bridging Figma and code
- The Component Gallery — component reference and naming conventions