---

We will look at aspects such as general file setup, color and typography and variables, components, variants, component properties, a loooot of auto layout and responsive design, and prototyping.

This course will focus on understanding the technical aspects of setting up your design to improve the communication, documentation, and handoff between design and (front-end) development. Let’s demystify all the issues you never fully understood!

We will work with a good mix of theory and hands-on exercises and plenty of room for your questions.

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

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:

• Wed, November 13, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Thu, November 14, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, November 20, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Thu, November 21, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Fri, November 22, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

$450^.00 Register for this workshop → 5 × 2h live sessions + Q&A. Nov 13–22.
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.