moonlearning · Team Training
Figma Foundations to Agentic AI
The full program for design teams. We build core Figma properly, components, variables and auto layout, then go all the way to an agent-ready design system and your team's first working agent. Most AI training is built for developers. This one is built for designers, no engineering background needed.
What your team walks away with
A clear view of the AI universe.
From vibe coding to pair design to agentic design. Know what is hype and what is real, what your team needs when, and which tools to actually add to your workflow.
A scalable Figma foundation.
Components, variants, variables and auto layout done properly, with naming that holds up. A reusable UI blueprint the whole team works from.
Files devs and agents can read.
Understand how Figma structure maps to front-end code, and make files unambiguous for both developers and AI agents.
An agent-ready setup.
Demystify MCP, skills, design.md, layer mapping, context and Code Connect. Understand what you own as a designer and where to collaborate with developers, then build a lightweight agent with Claude that pulls straight from the project your team built.
How the course is built
Four weeks, one focus each.
Components, properly
Components, variants and properties, plus a workflow that keeps them organised. The base your whole team builds from.
View lessons →Variables, styles & tokens
Variables, styles, typography and modes, and how they map to the code reality. Naming and structure that hold up.
View lessons →Auto layout & the handoff
Responsive auto layout, then how Figma structure maps to front-end code. What developers and agents both read, made unambiguous.
View lessons →Agent-ready: build your agent
MCP and Code Connect demystified for designers, plus a live exercise building a lightweight agent in Claude from the project you made.
View lessons →Course breakdown in detail
The AI universe, before we build
- 01The AI landscape, from vibe coding to pair design to agentic design
- 02What is hype and what is real
- 03What your team needs, and when
- 04Which tools to use and add to your workflow
Components, properly
- 01Components: the right way to build them
- 02Variants and component sets
- 03Component properties
- 04Slot components (extra mile)
- 05Component workflow and organising
- 06Components: design to code and what an agent reads
- 07Project step 1: building the base of the website
Variables, styles & tokens
- 01Figma variables in depth
- 02Styles and typography
- 03Modes and theming (extra mile)
- 04Variables and tokens: the design to code reality
- 05Essential vs extra mile: when depth adds value
- 06Project step 2: bring the design alive
Auto layout & the handoff
- 01Auto layout from basics to pro
- 02Responsive layout patterns
- 03Naming that scales
- 04How Figma structure maps to front-end code
- 05What developers and agents both read
- 06Making your file unambiguous for both
- 07Project step 3: a complete, responsive build
Build a lightweight agent in Claude
- 01How AI agents read your file, and why structure is their only context
- 02MCP demystified for designers
- 03Code Connect, explained without engineering
- 04Connecting an agent to your Figma project
- 05Setting up context files
- 06Build a lightweight agent with Claude
- 07Project step 4: your agent-ready Figma project
- 08Where this goes next, and how to scale it
What's included
Live sessions with Christine, all Figma practice files to keep, recordings for the whole team, a certificate of completion, and Figma Pro (EDU) access during the program.
Already strong in Figma?
This program builds the Figma foundation and the agentic layer on top. If your team already has components, variables and auto layout down, you may only need the agentic part.
In that case the short workshop Upskill your design team with agentic AI covers exactly that in half a day to a day.
Your teacher
Christine is a designer and educator with 15+ years in design and product, including work with BMW, P&G and MetaDesign. She speaks globally on design and AI, always hype-free and grounded in craft, and sits on the Awwwards jury.
Through moonlearning.io she helps designers and teams move from overwhelm to a clear, working method. Not theory, real skill your team keeps.
What people say
Practical, well prepared, and immediately useful.
"At Smashing, we love working with Christine. Her talks and workshops are very well delivered and practical, and our audience (a mix of developers and designers) adores her. For us as organisers, it is great that she is not only super well prepared, but also a lot of fun to work with!"
"What makes Christine's work stand out is her balance of creativity, structure, and depth. She brings real product experience into the room and translates it into systems that teams can immediately apply. I highly recommend her training and workshops."
"You can really feel how much heart Christine puts into the preparation, the files, and the sessions. Her expertise goes far beyond Figma. Her end-to-end view from design to implementation is genuinely impressive and incredibly valuable."
Format & investment
One clear package. No surprises.
- A multi-week hybrid program, live sessions plus self-paced lessons
- Core Figma all the way to an agent-ready design system
- One real project, with all files and templates to keep
- Recordings, certificate, and Figma Pro (EDU) during the program
- Delivered in English, German or Spanish
Claude Pro accounts for the team, so everyone can follow week 4 hands-on and build agents together, not just watch.
Also possible: larger teams, recorded sessions to keep, or an ongoing advisory retainer. Tell me what you need.
Bring the full program to your team.
From core Figma to an agent-ready setup, over four weeks or a one-week intensive. Tell me about your team and where they are with Figma, and I will put together a plan. Get in touch at [email protected].
