The Interface Anatomy Curriculum
Every session, guest talk, build period and milestone across the 45-day cohort — from design systems as infrastructure to a shipped, coded product.
WEEK 1
Session 1 — Design Systems as Infrastructure
THU 10 SEP · SESSION 1
What a design system actually is
Style guide vs component library vs design system
Systems as decision infrastructure and who they serve
System boundaries: foundations, primitives, components, patterns and templates
Why systems fail
Figma file architecture, naming and documentation
Mature design-system teardowns
Live work — Reverse-engineer mature systems, classifying decisions as deliberate, defaults, product-specific or accidents
Output — Initial system architecture and capstone direction
Session 2 — Advanced Auto Layout + Responsive Systems
TUE 15 SEP · SESSION 2
Advanced Auto Layout and nested layouts
Hug / Fill / Fixed and min/max behaviour
Wrapping and responsive architecture
Grid systems, spacing systems and density
Slots, composition and responsive components
Live work — Rebuild a product surface across desktop, tablet and mobile
Output — Responsive product shell
WEEK 2
Session 3 — Visual Foundations + Variables
THU 17 SEP · SESSION 3
Typography systems and type scales
Colour systems and functional colour
Spacing, grids, radius, elevation and motion
Primitive vs semantic naming
Figma Variables, collections and modes
Accessibility foundations
Live work — Build the foundation layer of your system
Output — Foundation library
Session 4 — Component Architecture
TUE 22 SEP · SESSION 4
Component anatomy: primitives, components, compound components, patterns, templates
Variants, properties, slots and instance swapping
Composition, states, content extremes and responsive behaviour
Component APIs and when not to componentise
Live work — Build one simple and one complex component architecture
Major assignment — Component Sprint (~5 complex and 5–7 simple components)
Milestone 1 — Figma System v1
Build Period 1 — Component Sprint
23 – 27 SEP · BUILD
No new mandatory core curriculum — absorb the first jump in system complexity
Build ~5 complex and 5–7 simpler components with required variants
Interaction states, responsive behaviour and content extremes
Proper Auto Layout and foundation-variable integration
Support — TA clinic, pod reviews, async critique, recorded references, recovery tracking
28 Sep — buffer / recovery day before core teaching resumes
WEEK 3
Session 5 — Design Tokens + Scalable Theming
TUE 29 SEP · SESSION 5
What tokens actually solve
Primitive, semantic and component tokens — a three-tier architecture
Aliasing, collections and modes
Typography, spacing and motion tokens
Dark mode, multi-theme and multi-brand thinking
Naming systems
Live work — Convert your foundations into a three-tier token architecture
Pod Review
WED 30 SEP · REVIEW
Pod review and asynchronous correction window
Resolve critique and close missing milestones
WEEK 4
Session 6 — Accessibility + QA + Documentation
THU 1 OCT · SESSION 6
WCAG foundations: contrast, keyboard behaviour, focus and target size
Typography accessibility, reduced motion and accessible tokens
Component-state coverage, QA and regression thinking
Documentation anatomy: usage guidance, do/don’t and behaviour
Accessibility notes and decision documentation
Critique model — every review returns PASS / FAIL / CAN’T TELL
Milestone 2 — Production-ready Figma System
Session 7 — Strategy, Governance & Adoption
TUE 6 OCT · SESSION 7
Design-system strategy, scope and maturity
Centralised vs federated teams and contribution models
Governance, versioning, release management, deprecation and migration
Stakeholder management and designer/developer collaboration
Adoption, adoption metrics, system-health metrics, ROI and operating models
Live case — Solve an organisational adoption problem in pods and defend your operating strategy
WEEK 5
Session 8 — Audit + Real-World System Architecture
THU 8 OCT · SESSION 8
Systems audits and experience audits — severity and coverage
Architecture analysis and mature-system comparisons
Component composition and constraint vs flexibility
Architecture patterns and system evolution
Case studies — ARC, shadcn-style architectures and Linear-like systems as architectural references
Milestone 3 — System Strategy + Audit
Build Period 2 — System Recovery & Consolidation
10 – 12 OCT · BUILD
Do not enter Design Engineering with a broken foundational system
Complete missing work and apply feedback
Repair component architecture and finish token architecture
Resolve accessibility issues and improve documentation
Complete code and tool prerequisites
Session 9 — Code for Designers + Design-to-Code Mental Model
TUE 13 OCT · SESSION 9
HTML, CSS and DOM mental models
JavaScript vocabulary and the React mental model
Components, props, state, composition and component APIs
TypeScript vocabulary, packages, Git, GitHub and repository anatomy
Storybook
Principle — Teach code through the system students already designed, not generic programming
Output — Inspect a coded component and map it to your Figma architecture
Wed 14 Oct — optional technical recovery / environment clinic
WEEK 6
Session 10 — Figma → Tokens → Code → Storybook
THU 15 OCT · SESSION 10
Figma Variables → token representation → CSS variables
Coded components → Storybook → documentation → deployment
Infrastructure — a Molades starter repository to modify working infrastructure instead of configuring tooling from scratch
Milestone 4 — Design System running in code
Session 11 — AI Coding Agents + Modern Development Workflow
TUE 20 OCT · SESSION 11
Coding agents, repository context and context engineering
AGENTS.md / CLAUDE.md-style instruction files
Specifications, planning and task decomposition
Agent execution and subagents / parallel work where useful
Component and token constraints
Git workflow, reviewing diffs, testing and debugging
Visual QA, accessibility QA, iteration and deployment
Core workflow — Brief → Plan → Agents → Code → Test → Visual QA → Fix → Deploy
Principle — AI increases implementation leverage; it does not replace system understanding or design judgement
FINAL WINDOW
Session 12 — Product Build Studio + Final System Audit
THU 22 OCT · SESSION 12
Almost no conventional lecture — build a coherent product experience
Use your tokens, components, coded system, documentation, coding agents, Git and deployment
Include responsive behaviour, loading, empty and error states
Meaningful interactions, component reuse, accessibility and system consistency
When the product exposes weaknesses, repair the system rather than patching screens
Milestone 5 — Working Product
Final Build / Case Study / Defence Clinic
FRI 23 OCT · CLINIC
Optional live support combined with recorded case-study material
Prepare your case study and defence
Demo Day — Final Graduation & Showcase
SAT 24 OCT · DEMO DAY
A special cohort event rather than a normal class
Demonstrate the complete journey: Problem → Decisions → Figma System → Architecture → Tokens → Code → Product → Evidence → Trade-offs
pricing