Skip to main content

Figma Workflow Masterclass

Christine Vallaure
Your instructor
Christine Vallaure
Tickets
Get a ticket

Workshop includes:
  • 🔖  Examples to take away
  • 🗣  Interactive sessions
  • 📺  Workshop recordings
  • 🎤  Dedicated Q&A time
  • 🏅  Smashing Certificate

Workshop, 5×2.5h + Q&A Thu & Fri, July 7–22 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.

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!

$350 .00 $450.00 Register for this workshop → 5 × 2h live sessions + Q&A. July 7–22.
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 22, 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. July 7–22.
With all video recordings & slides. Get a ticket.

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


Day 1

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

9:00 AM – 11:00 AM
Why do we even care about file setup? We’ll run through the Figma file setup. How does a finished style guide look? Christine will show which systems she uses with traffic lights and notes.

We’ll dive into colors in Figma. How to choose, mix and match colors. How to name and document them. We’ll also cover the 60, 30, 10 Rule for excellent color distribution.

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

Day 2

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

9:00 AM – 11:00 AM
Day two is all about Grid and Responsive. What is the difference between a grid and a spacing system? What are breakpoints, mobile, responsive, and adaptive grid behavior, and how do we set them up in Figma? How does CSS Grid work, and how is this applied in Figma?

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

Day 3

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

9:00 AM – 11:00 AM
We’ll kick off day two with Christine’s favorite design snobbery: typography. Say hello to your friend: The type scale where you’ll get to know different scaling methods. And, of course, you’ll learn about responsive typography.

We’ll end the day with Images & Vectors: using images in Figma, aspect ratio, icons and hero images with text.

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

Day 4

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

9:00 AM – 11:00 AM
Get to know the 8pt Spacing System and the difference between a hard and soft 8pt grid approach.

Components & Variants in Figma. If you use it more than once, it’s a component! You’ll learn how to nest, override and organize components. And we’ll take a look at interactive components and variants, and how to document different states.

We’ll end the day with Figma Autolayout.

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 present your prototype.

Lastly, we’ll look at the Figma Team library: updating and accepting changes and version control.

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.

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

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