A course for hybrid designers and frontend engineers. Two parallel tracks — Figma (design library) and Code (React Native component library) — built simultaneously so students see every decision made in both mediums.
- What a design system is and why both tracks matter
- Tools: Figma (variables, components, auto layout), Expo + React Native, a token pipeline (Style Dictionary or equivalent)
- Repo structure and Figma file structure walkthrough
- How design tokens bridge the two tracks
Each lesson covers the concept, the Figma implementation, and the code implementation side-by-side.
| Lesson | Figma | Code |
|---|---|---|
| Color | Color styles → Figma Variables (primitives + semantic aliases) | Theme object, StyleSheet constants |
| Typography | Text styles, type scale, font choices | Text variants, font loading in Expo |
| Spacing | Spacing scale as variables | Spacing constants, consistent gap/padding |
| Border Radius & Borders | Radius variables, stroke styles | Radius tokens |
| Elevation / Shadow | Layer blur + spread styles | shadow* props, platform handling |
| Grid & Layout | Auto layout, layout grids on frames | Flexbox patterns, SafeAreaView, responsive units |
| Iconography | Icon component setup, naming conventions | react-native-vector-icons or custom SVG setup |
Reference: component.gallery/components
All 60 components from The Component Gallery:
- Accordion
- Alert
- Avatar
- Badge
- Breadcrumbs
- Button
- Button group
- Card
- Carousel
- Checkbox
- Color picker
- Combobox
- Date input
- Datepicker
- Drawer
- Dropdown menu
- Empty state
- Fieldset
- File
- File upload
- Footer
- Form
- Header
- Heading
- Hero
- Icon
- Image
- Label
- Link
- List
- Modal
- Navigation
- Pagination
- Popover
- Progress bar
- Progress indicator
- Quote
- Radio button
- Rating
- Rich text editor
- Search input
- Segmented control
- Select
- Separator
- Skeleton
- Skip link
- Slider
- Spinner
- Stack
- Stepper
- Table
- Tabs
- Text input
- Textarea
- Toast
- Toggle
- Tooltip
- Tree view
- Video
- Visually hidden
Note: A handful of these are web-centric and may need adaptation or replacement for React Native: Color picker, Rich text editor, Skip link, and Visually hidden. The rest map cleanly to native UI patterns.
- Why — the problem this component solves
- Figma — build the component live (auto layout, variants, interactive states via component properties)
- Code — build it in React Native (props API, style tokens, platform considerations)
- Bridge — explicitly connect the two (e.g., "this Figma variant maps to this RN prop")
Combine components into full screens. Each template is built as a Figma frame and a React Native screen.
- Onboarding flow — splash, sign in, sign up
- Home / Dashboard — cards, list items, header
- Detail / Profile — avatar, stats, tabs
- Form / Settings — grouped inputs, toggles, selects
- Empty states & Error screens
- Linking screens with interactions and transitions
- Smart animate, scroll, overlays
- Sharing a clickable prototype
- React Navigation setup (stack, tab, drawer)
- Wiring screens together with real navigation
- Adding gesture interactions (swipe, pull-to-refresh)
- Running on device / simulator via Expo Go
- Publishing the Figma library for a team
- Documenting components (Storybook for RN, or inline docs)
- Versioning the token pipeline
- The handoff workflow: how a designer and engineer use this system together
Every lesson follows this consistent structure:
- Why — the problem this element solves
- Figma — build it live
- Code — build it live
- Bridge — explicitly connect the two (e.g., "this Figma variable maps to this token in code")
- Token pipeline tool (Style Dictionary is the most common bridge between Figma Variables and code)
- Target platforms: iOS / Android / Web or all three
- Component scope for Module 2 — curating 15–20 well is better than rushing all 60