Figma Workflow Masterclass

Christine Vallaure

Your instructor: Christine Vallaure

Workshop includes:

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, November 17 – December 1 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. Nov 17 – Dec 1.
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 November 17, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Fri November 18, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Wed November 23, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Fri November 25, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Thu December 1, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

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

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