online workshop
Figma Masterclass
5×2.5h + Q&A
Next workshop: July 20th – 28th, 2023
09:00 – 11:30 am pt check your time zone
NEW DATE, SO YOU HAVE ALL THE LATEST CONFIG UPDATES INCLUDED!
Book nowDo 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.
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.
Dates:
Workshop, 5×2.5h + Q&A
July 20th - July 28th 2023
09:00 – 11:30 am pt (18:00 – 20:30 cet) check your time zone
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)
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 to intermediate knowledge of Figma and be able to set up a design, but no need to be an expert.
Overview
A detailed day-by-day overview. This might be slightly adapted, depending on new releases.
Day 1 – The correct setup
Theory:
- pt, px, and resolution. What, why, and how?
- Understanding Grids
- Grids across different screen sizes
- Do I need a grid?
- Spacing systems: Why 8pt and not 8px spacing systems and why in Figma 1px=1pt
- A word on design tokens in Figma
Figma
- Understanding the Figma file structure
- Setting up our file with Frames (and understanding why we use precisely those sizes)
- Setting up responsive Grids
- Adding our design elements to the frame the right way
Day 2 – All about components
Theory:
- Components: Short and sweet intro, because today 90% is in Figma!
Figma
- Setting up components and instances
- Overriding do and don’t
- Nested components and instance swap
- All about Variants
- Component Properties
- Different ways to document components
- Organizing and sharing components
- Some advanced techniques
Day 3 – Color, typography, and styles
Theory: Color in UI Design
- Picking color set for UI Design as well as system colors
- Color variants: why and how
- 60-30-10 rule
- Documenting colors with accessibility in mind
Figma
- We will set up an accessible color stylesheet and save our styles in Figma
- Setting up internal and external libraries
Theory: Typography in UI Design
- Some basics
- Different techniques to create a Typescale
- Px vs. Rem
- The importance of line-height
- Weight, spacing, length, and all the little details
- Different responsive typography approaches
Figma
- We will set up an accessible type scale and save our styles in Figma
- How can we adapt our styles to different screen sizes
Day 4 – Responsive Design: Constraints and Auto Layout
Theory: Responsive Design
- Responsive design and responsive components
- Understanding breakpoints
Figma:
- What are constraints, and how to use them
- When constraints are not enough: Intro to auto layout
- Setting up auto layout frames
- Basic and advanced auto layout settings via the menu
- Resizing behavior
- Nesting auto layout
- Absolute positioning in Figma
- Creating more advanced components and entire pages
- Understanding auto layout limitations
- Is auto layout flexbox?
- Responsive testing and documenting
- A few tips and tricks (aspect ratio, slot components and more)
- Many exercises today as auto layout is all about practice, practice, and practice
Day 5 – Prototyping, sharing, and hand-off
Theory:
none!
Figma:
- Prototyping basics
- Connecting screens
- Different types of animations
- Interactive components
- Smart animate magic
- Documenting Prototypes
- Finishing off our documentation
- Sharing with developers, designers, and anyone else
Is there a recording, in case I miss a session?
Who teaches the class?
How much does it cost?
Can we join in as a company?
Join the June workshop
5×2.5h + Q&A
Workshop, 5×2.5h + Q&A
July 20th - July 28th 2023
09:00 – 11:30 am pt (18:00 – 20:30 cet) check your time zone
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)
00
DAYS
00
HOURS
00
MINS
00
SECS

David Roessli
Founder Cybermedia Concepts
"Thank you so much Christine for a mind-opening workshop on Figma. I feel I’ve discovered and learned so much over the course of 5 days, my brain is bubbling… I really appreciated the clarity and level of detail of your courses and documents"

Gilberto Medrano
Founder & Principal Designer at Skowak Inc.
"Christine - this is the best design tool workshop I have ever participated in. The content was generous and comprehensive. Your energy levels and clear explanations made it easy and fun to go through. Many many thanks!"
Stay informed about future workshops
Sign up and be the first to know about new releases, workshops, and articles.