Free course
Paper: From Canvas to Code
Design with web-native structure, build a reusable token system, and collaborate with AI from first frame to shipped interface.
What you'll learn
A hands-on course for product designers and design-minded builders learning Paper. You will create and structure a small product flow, bring in existing work from Figma or HTML, build a token-driven visual language, edit custom vectors, connect Paper Desktop to an AI agent through MCP, and translate a selected design into responsive code. The course is based on Paper's official documentation and turns its reference material into one coherent studio project.
Curriculum
Module 1 — Find Your Way Around Paper
- Start a file and learn the canvas grammarreading · 35 min
- Compose, select, and arrange at speedreading · 30 min
- Module 1 Check-In — Canvas Fluencyquiz · 10 min
Module 2 — Bring Work In and Make It Systematic
- Import from Figma, HTML, and Snapshotreading · 40 min
- Build a token-driven themereading · 45 min
- Module 2 Check-In — Import and Tokensquiz · 10 min
Module 3 — Draw, Direct, and Collaborate with AI
- Create and edit purposeful vectorsreading · 35 min
- Connect Paper MCP and direct an agent safelyreading · 45 min
- Module 3 Check-In — Vectors and MCPquiz · 10 min
Module 4 — Ship a Responsive Vertical Slice
- Design for translation into codereading · 45 min
- Capstone — The resource directory vertical slicereading · 60 min
- Final Check — From Canvas to Codequiz · 15 min
Your instructor
Zen Lara
Product designer and systems practitioner working across design systems, creative operations, research, and human-centered agentic workflows.
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.