Free course
Design Systems in Figma for Agentic Prototyping
Engineer a Figma library that coding agents can actually use — variables, Code Connect, MCP, and Cursor rules, end to end.
What you'll learn
A deep dive into building design systems as machine-readable APIs. Architect three-tier token systems with Figma variables, design component property surfaces that mirror code props, wire Figma to your codebase with Code Connect prop mapping, stand up the Figma MCP server, and author Cursor rule files (.cursor/rules/*.mdc) that govern agentic code generation. Culminates in a measured capstone: one real screen taken from Figma to running code through the full pipeline, with token purity and component reuse as hard targets. For designers, design engineers, and developers building rapid agentic prototyping workflows.
Curriculum
Module 1 — The Design System as an API
- Why Agents Change What a Design System Is Forreading · 15 min
- Figma Variables: Architecting a Three-Tier Token Systemreading · 20 min
- Naming, Structure, and Hygiene Machines Can Parsereading · 15 min
- Module 1 Check-In — Machine-Readable Foundationsquiz · 8 min
Module 2 — Component Architecture Agents Can Map to Code
- Component Properties: Mirroring Your Code Props in Figmareading · 20 min
- Slots, Composition, and Layout Patternsreading · 18 min
- Library Governance: Publishing, Versioning, and Deprecationreading · 14 min
- Module 2 Check-In — Component Architecturequiz · 8 min
Module 3 — Code Connect: Wiring Figma to Real Code
- Code Connect: What It Is and How to Set It Upreading · 16 min
- Prop Mapping in Depth: figma.enum, boolean, string, instance, childrenreading · 22 min
- Code Connect at Scale — and What Agents Actually Receivereading · 15 min
- Module 3 Check-In — Code Connectquiz · 8 min
Module 4 — The Figma MCP Server and the Agentic Loop
- Standing Up the Figma MCP Serverreading · 16 min
- The Agentic Prototyping Loop, End to Endreading · 18 min
- Module 4 Check-In — MCP and the Loopquiz · 8 min
Module 5 — Cursor Rules for Design Systems
- Anatomy of .cursor/rules: MDC Files, Frontmatter, and Activationreading · 16 min
- Design-System Rules That Earn Their Context: A Working Suitereading · 20 min
- Capstone: The Full Stack in One Loopreading · 20 min
- Module 5 Check-In — Rules and the Full Stackquiz · 10 min
Module 6 — Resources & Works Cited
- Primary Sources, Tools, and Further Readingreading · 10 min
Free, funded by supporters
There is no paywall on this course. If it helps you, you can choose to support it — that keeps it free for everyone else.