Figma Workflow Masterclass

- Your instructor
- Christine Vallaure
- Tickets
- Get a ticket ↓
Workshop includes:
- 🔖 Examples to take away
- 🗣 Active participation
- 🎁 Workshop recordings
- 🏅 Smashing Certificate
Workshop, 5×2.5h + Q&A • Thu, Fri & Wed, July 20–28 2023
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? 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
Want to join this workshop, but need a thorough introduction on UX/UI design and Figma? Join Christine in April for her UX/UI Design & Figma Introduction.
We will look at aspects such as general file setup, color and typography, components, variants, component properties, a loooot of auto layout and responsive design, and some 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.
$350 .00 $450.00
With all video recordings & slides.
🎪 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 UI design’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:
- 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. - Responsive Typography
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. 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 July 20, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
- Fri July 21, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
- Wed July 26, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
- Thu July 27, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
- Fri July 28, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
$350 .00 $450.00
With all video recordings & slides.
🎪 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 understand why we use those sizes). We’ll be setting up responsive Grids and correctly adding our Design Elements to the Frame.
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: A short and sweet intro because today is 90% in Figma! Loads of Figma fun today: Setting up components and instances, nested components, variants, and component properties. We will also look at different ways to document, organize and share components. And, as usual, some tips, tricks, and advanced techniques to finish off.
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 type scale, 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
Today is a real deep dive into responsive design with Figma.
Starting with the all-mighty auto layout and wrapping our heads around creating truly responsive components. Let’s begin from scratch and work our way up to resizing and the power of endless nesting to create more complex setups and even entire pages.
Then we will learn about constraints and how it’s a lifesaver when it comes to combining auto layout and grids.
Once we make sure we fully understand our responsive tools, we will learn about breakpoints, how they really work under the hood in CSS and how we can set up, test and document our design in Figma accordingly.
11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.
Day 5 — Prototyping
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 about prototyping in Figma. From adding simple connections to more advanced techniques and animations with smart animate. Add consistency to your design with interactive components. To finish, we will document our prototype with flows, and I will show you some trips and tricks to make your presentation shine.
Now that we ran through all the major areas of Figma, let’s look at how all the skills we learned over the past five days come together and make handing off our designs a piece of cake.
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
With all video recordings & slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.