Skip to main content

Figma Workflow Masterclass

Christine Vallaure

Your instructor
Christine Vallaure

Workshop includes:
  • 🔖  Examples to take away
  • 🗣  Active participation
  • 🎁  Workshop recordings
  • 🏅  Smashing Certificate

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:


Workshop, 5×2.5h + Q&A Thu & Fri, July 7–21 2022
09:00 – 11:30 AM PT ( 18:00 – 20:30 CET ) • Check your time zone

Ever handed off this fantastic design to development and then wasn’t quite so happy (putting it politely) when seeing it in the browser? Do you have some experience with designing, but don’t know how to set up your project in such a way to get your ideas across? Then this workshop might be just right for you.

We will look at aspects such as color, typography, responsive designs, components, exporting assets with Figma. We will be working with a good mix of theory and hands-on exercises and plenty of room for your questions.


Here’s What You Should Be Expecting:

  • Interactive live sessions

    5 × 2.5h live sessions

  • Practical insights

    From file setup to handoff

  • Hands-on exercises

    With reviews by your teacher

  • Life-time access

    To all video recordings and examples

  • Dedicated Q&A time

    To ask all your questions

  • Smashing Certificate

    A well-deserved reward for your work


We’ll dive deep into file setup in Figma. We will learn why setting up your files the right way and establishing a system is key to creating solid designs, whether working alone, in a team or sharing designs for development.

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

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

🎪  Save up to 25% on this workshop with a Smashing Membership.

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 the technicality of UI Design.

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

What Will Attendees Learn In This Workshop?

At the end of the course, you will have gained an in-depth understanding of:

  • Professional file setup with Figma;
  • How to share designs for development with Figma;
  • Setting up accessible styles for color, typography, and spacing systems;
  • Setting up component libraries and specs for re-usable items;
  • Exporting and sharing assets for different screen resolutions;
  • Understand different ways to deal with and demonstrate responsive design and grids.

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.

In this workshop, we’ll explore:

  • Structure and Setup in Figma
    Layers, Pages, and Frames setup. How to set up a style guide and how to work with a system of traffic lights and notes.
  • Colors in Figma
    How to choose, mix & match color variants and the 60, 30, 10 Rule. How to name and document colors.
  • Grids & Responsive Setup
    Difference between grid and spacing system. Basic setups like Columns, Grutter, Margin, and Rows. Learn about responsive and adaptive grid behavior, breakpoints and CSS grid, and how to set them up.
  • Fonts
    Units, line height and different scaling methods. Contrast and accessibility. Christine will show you three approaches to Responsive typography and some tools to help you.
  • Images & Vectors
    Why we design at 1x and what that means, Using images in Figma, how to export images.
  • 8pt Spacing System
    How and why we use an 8pt Spacing System.
  • Components & Variants
    Nesting, overriding and interactive components. Variants and documenting them. Creating components overview and specs.
  • Auto Layout
    Nesting layout, resizing and constraints. Tips and tricks and how do we troubleshoot problems.
  • Prototyping
    How to add flows and interaction.
  • Teamwork and Handoff to Development
    The Figma team library. Version control, updating and accepting changes.

About Christine Vallaure

Christine is a UX/UI Designer with over ten years of experience and founder of moonlearning.io. She has worked internationally, in-house, and remotely on projects for leading brands, agencies, and startups. She cares deeply about creating well-thought-through and aesthetic products, and she firmly believes that designers should understand code and that UX/UI is a match made in heaven.

Currently, she is running moonlearing.io full-time and also writing about Design & Code on Medium.

She loves Figma, sunshine, and Dieter Rams and 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:

  • Thu July 7, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Fri July 8, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Thu July 14, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Fri July 15, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Thu July 21, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

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

🎪  Save up to 25% on this workshop with a Smashing Membership.


Day 1 — The Right Setup

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

9:00 AM – 11:00 AM
We’ll start with some design theory. pt, px, and resolution. What, why, and how? Understanding Grids and Spacing systems: Why 8pt and not 8px spacing systems, and why in Figma 1px=1pt?

Then we’ll jump into Figma. We’ll set up our File with Frames (and understanding why we use those sizes). We’ll be setting up responsive Grids and adding our Design Elements to the Frame the right way.

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
Day two starts with Components: Short and sweet intro because today is 90% in Figma! Loads of Figma fun today: Setting up components and instances, nested components, variants, component properties, organizing and sharing components and some advanced techniques.

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

Day 3 — Color, typography, and styles

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

9:00 AM – 11:00 AM
We’ll start with color in UI design: Picking color set for UI design and system colors, color variants: why and how. You’ll learn about the 60-30-10 rule and documenting colors with accessibility in mind.

We will set up an accessible color stylesheet, save our styles in Figma, and set up internal and external libraries.

Typography! We’ll kick off with some basics. You’ll learn about different techniques to create a typescale, Px vs. Rem, and the importance of line height, and white space, and line length. We’ll end the day by setting up an accessible type scale and saving our styles in Figma.

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

Day 4 — Constraints and Auto Layout

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

9:00 AM – 11:00 AM
We’ll dive into responsive design and responsive components and understanding breakpoints. After that, we’ll be back in Figma again with what constraints are and how to use them, layout and auto-layout, the limitations, responsive testing and documenting, and many exercises as this takes some time to get used to in Figma!

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

Day 5

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

9:00 AM – 11:00 AM
On the last day, you’ll learn how to prototype by adding flows and interaction. How to add fixed and overflowing elements and presenting and sharing your prototype.

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.


Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:

x