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! But you can join the waiting list in case a ticket becomes available:

Workshop, 5×2.5h + Q&A • Thu, Fri & Wed, Feb 1–9 2024
09:00 – 11:30 AM PT • 18:00 – 20:30 CET • Check your time zone ⏰

Do you have some (Figma) design skills, but are not an expert yet? Like to be able to design better responsively? Want to find out about new features like variables and dev mode and generally feel like you could optimize your Figma workflow? This Figma Masterclass is just right for you!

In this course, we will learn how to push your design from a pretty picture to a working and scalable UI, embracing all of Figma’s impressive features.

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 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.

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:

Thu February 1, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Fri February 2, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Wed February 7, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Thu February 8, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Fri February 9, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)