---

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

We’ll explore topics like general file setup, variables, components, variants, component properties, a lot of auto layout, responsive design, and prototyping.

This course focuses on understanding the technical aspects of design setup to enhance communication, documentation, and handoff between design and (front-end) development. Let’s demystify the issues you’ve never fully understood!

The course will include a blend of theory, hands-on exercises, and ample time for your questions.

Who Is This For?

Ideal for beginner/intermediate-level UI Designers or those switching from graphic design to UI Design who are eager to understand a little more about Figma’s technicality.

You might also like this workshop if you switch from another software like Sketch and XD. And, of course, as a special welcome to developers who want to improve the collaboration between design and code from the other side.

You should have basic knowledge of Figma and be able to set up a design, but no need to be an expert.

In this workshop, we’ll explore:

• Professional file setup with Figma and team libraries
• Setting up accessible style sheets and variables for color, typography, and spacing systems;
• Setting up and working with components and keeping them organized
• When and how to use variants and component properties to add an extra layer of structure to your designs
• How to create nested, responsive components and even entire responsive pages with auto layout and constraints as well as the new variable modes feature
• How to test responsive components and pages
• How to create compelling prototypes for showcasing and testing
• Different approaches to documenting and sharing your work with the new brand new dev mode

At the end of this class, you will have the perfect setup for your design to get coded the way you imagined it to be. And your developers will probably love you this little bit more.

---

About Christine Vallaure

Christine is a UI Designer with a passion for code with over ten years of experience. She is the founder of moonlearning.io, an online UX, UI and Figma learning platform. Christine firmly believes designers and developers should understand each other’s tools to enable constructive dialogue.

Currently, she is running moonlearing.io full-time and also writing about Design & Code on Medium. She loves Figma, sunshine, and Dieter Rams. She also hates writing about herself, so let’s meet in FigJam instead!

Time & Schedule

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

• Tue, March 4, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, March 5, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Thu, March 6, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, March 12, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Thu, March 13, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

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

---

Day 1 — Starting with the Smallest: Figma Variables

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

9:00 AM – 11:00 AM

• General setup in Figma
• Introduction to Figma variables
• Introduction to Figma styles
• Mixing variables and styles
• Understanding modes

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

Day 2 – All About Components

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

9:00 AM – 11:00 AM

• Setting up components and instances
• Dos and don’ts for overriding
• Nested components
• Component sets and variants
• Component properties
• Interactive components
• More component magic with modes
• Organising and documenting components
• Useful tips, tricks, and hacks

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

Day 3 – Responsive Design: Auto Layout and Constraints

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

9:00 AM – 11:00 AM

• Setting up auto layout frames
• Basic and advanced auto layout settings
• Resizing behavior and suggested auto layout
• Nesting auto layout
• Ignoring auto layout, min/max width, and wrapping in Figma
• Creating advanced components and entire pages
• Understanding auto layout limitations
• Is auto layout like flexbox? What is it?
• What are constraints and how to use them with grids and auto layout
• Responsive design with variables and modes
• Tips and tricks
• Lots of exercises (auto layout requires practice, practice, and practice!)

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

Day 4 — Prototyping with Figma

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

9:00 AM – 11:00 AM

• Viewing prototypes in presentation mode, in-file, and on mobile
• Fixing scroll positions
• Nested scrolling behavior
• Connecting screens
• Overlays
• Trigger and animation types
• Smart animate magic!
• Interactive components
• Stateful design
• Prototyping with variables in Figma
• Conditional statements with variables

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

Day 5 – Documenting and Collaborating

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

9:00 AM – 11:00 AM

• Figma team libraries
• Why document?
• For whom to document?
• Where to document: Figma files vs. design systems
• What and how to document: Colors, typography, spacing, components, and more
• Figma dev mode
• Time for your questions

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.