---

$350^.00 $450^.00 Register for this workshop → 5 × 2h live sessions + Q&A. Sep 23–29.
With all video recordings & slides. Get a ticket.

Many teams skip the fundamentals and jump straight to design systems, advanced tooling, or AI. The result is messy files, unclear structure, and friction with development. We do it the other way round. We build the foundation first, so your Figma files stay clear, scalable, and ready for everything that comes next.

You will learn to take your work from a beautiful picture to a scalable, working UI: file setup, variables, components, variants, component properties, a lot of auto layout, responsive design, and prototyping. The focus is the technical side of design that makes communication, documentation, and handoff to development actually work, right up to the newer AI workflows and MCP that are quietly changing how design reaches code.

Expect a blend of theory, hands-on exercises, and plenty of room for your questions. Let us demystify the parts you have never quite pinned down.

Who Is This For?

This course is ideal for beginner/intermediate-level UI designers who are eager to dive deeper into Figma’s technical features and upskill on new AI handoffs.

And, of course, a special welcome to developers who want to improve design-to-code collaboration.

You should have basic Figma knowledge and be able to set up a design, but you don’t need to be an expert.

What Will Attendees Learn In This Workshop?

By the end of the course, you’ll have an in-depth understanding of:

• Professional file setup with Figma that scales
• Component-based design: instances, variants, properties, and slot components
• Variables and styles: colour hierarchy, aliasing, modes, and typography
• Responsive design: auto layout in and out, constraints, and grids
• Prototyping and the new animation features
• Documenting and collaborating with development and AI agents for handoff
• How all of these features align with real code
• AI features you actually need, like MCP, DESIGN.md and skills, what they are and how to use them
• Understand how agents read your file, how to prep, and even set up your own first Claude agent translating Figma to code

By the end of this class, your design setup will be optimised for development, so your work gets built exactly as you imagined, by humans and agents alike. You will not just prompt and hope. You will understand what is happening and steer your design to production.

---

About Christine Vallaure

Christine Vallaure is the founder of moonlearning.io, a UX, UI Design, and Figma learning platform where design meets code.

With years of experience working for leading brands, agencies, and startups across Berlin, Mexico City, and London, she is now based in sunny Madrid.

Christine is passionate about sharing her expertise in Web and App Design, particularly in the areas where design and technology intersect. In addition to creating video tutorials on moonlearning and YouTube, Christine also writes about design and code on her Medium blog, providing insights into the latest developments in the industry. She also offers live and online workshops and frequently speaks at conferences, always encouraging UI designers and developers to stay curious about each other’s work.

Time & Schedule

This workshop is split over five days. The workshop sessions will run on the following days:

• Wed, September 23, 9:00 – 11:30 AM PT (18:00 – 20:30 CEST)
• Thu, September 24, 9:00 – 11:30 AM PT (18:00 – 20:30 CEST)
• Fri, September 25, 9:00 – 11:30 AM PT (18:00 – 20:30 CEST)
• Mon, September 28, 9:00 – 11:30 AM PT (18:00 – 20:30 CEST)
• Tue, September 29, 9:00 – 11:30 AM PT (18:00 – 20:30 CEST)

$350^.00 $450^.00 Register for this workshop → 5 × 2h live sessions + Q&A. Sep 23–29.
With all video recordings & slides. Get a ticket.

---

Course Breakdown

Day 1 — Components

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM

• Components and instances, overriding, reverting, and nesting
• Variants and component sets, including multi-dimensional and interactive
• Component workflow: naming, organising, storing, and team libraries
• Extra mile: component properties and new slot components
• Design ↔ Code: how components map to code and what an agent reads

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 2 — Variables and Styles

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM

• Figma variables in depth
• Styles and typography
• Extra mile: modes
• Design ↔ Code: the reality of variables and tokens

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 3 — Auto Layout and Responsive Design

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM

• Auto layout, in and out
• Auto layout grids
• Workflow and setup
• Design ↔ Code: the reality of layout

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 4 — Prototyping and Motion

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM

• Prototypes in presentation mode, in-file, and on mobile
• Scroll positions and nested scrolling
• Connecting screens and overlays
• Triggers, animation types, and smart animate
• Interactive and stateful design
• The new Figma Motion (Config 2026 release explored)

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 5 — Handoff

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM

• Handing off to Development
• Introduction to agentic AI for designers, a new handoff
• Demystifying MCP, Skills and DESIGN.md
• Different workflows for different team setups explored
• The current state of the design industry and AI
• Design ↔ Code: how agents read your files
• Setting up a simple agentic team with Claude

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Subjects and day-by-day might be slightly adapted.