Sign up

< all workshops

online workshop

Figma Masterclass

5 sessions of 2.5h + Q&A
March 4th – 13th, 2025
09:00 – 11:30 PT / 18:00 – 20:30 CET
Check your time zone 

Book now

Do you have some (Figma) design skills but aren’t an expert yet? Would you like to design more responsively? Want to discover 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, you’ll learn how to elevate your design from a beautiful picture to a scalable, working UI by embracing Figma’s impressive features.

We’ll explore topics like general file setup, variables, components, variants, component properties, a lot of auto layout, responsive design, and prototyping.

This course focuses on understanding the technical aspects of design setup to enhance communication, documentation, and handoff between design and (front-end) development. Let’s demystify the issues you’ve never fully understood!

The course will include a blend of theory, hands-on exercises, and ample time for your questions.

Who Is This For?

This course is ideal for beginner/intermediate-level UI designers or those transitioning from graphic design to UI design, who are eager to dive deeper into Figma’s technical features.

You’ll also enjoy this workshop if you’re switching from other design tools like Sketch or Adobe XD.

And, of course, a special welcome to developers who want to improve design-to-code collaboration.

You should have basic Figma knowledge and be able to set up a design, but you don’t need to be an expert.

Course Breakdown

 

Day 1 – Starting with the Smallest: Figma Variables

  • General setup in Figma
  • Introduction to Figma variables
  • Introduction to Figma styles
  • Mixing variables and styles
  • Understanding modes

 

Day 2 – All About Components

  • Setting up components and instances
  • Dos and don’ts for overriding
  • Nested components
  • Component sets and variants
  • Component properties
  • Interactive components
  • More component magic with modes
  • Organising and documenting components
  • Useful tips, tricks, and hacks

 

Day 3 – Responsive Design: Auto Layout and Constraints

  • Setting up auto layout frames
  • Basic and advanced auto layout settings
  • Resizing behavior and suggested auto layout
  • Nesting auto layout
  • Ignoring auto layout, min/max width, and wrapping in Figma
  • Creating advanced components and entire pages
  • Understanding auto layout limitations
  • Is auto layout like flexbox? What is it?
  • What are constraints and how to use them
  • What are constraints and how to use them with grids and auto layout
  • Responsive design with variables and modes
  • Tips and tricks
  • Lots of exercises (auto layout requires practice, practice, and practice!)

 

Day 4 – Prototyping with Figma

  • Viewing prototypes in presentation mode, in-file, and on mobile
  • Fixing scroll positions
  • Nested scrolling behavior
  • Connecting screens
  • Overlays
  • Trigger and animation types
  • Smart animate magic!
  • Interactive components
  • Stateful design
  • Prototyping with variables in Figma
  • Conditional statements with variables

 

Day 5 – Documenting and Collaborating

  • Figma team libraries
  • Why document?
  • For whom to document?
  • Where to document: Figma files vs. design systems
  • What and how to document: Colours, typography, spacing, components, and more
  • Figma dev mode
  • Time for your questions

Join the workshop

5×2.5h + Q&A

 

Workshop, 5×2.5h + Q&A
March 4th – 13th, 2025
09:00 – 11:30 pt /
 18:00 – 20:30 cet
Check your time zone 

Tue, March 4, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Wed, March 5, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Thu, March 6, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Wed, March 12, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Thu, March 13, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

check your time zone 
all sessions are recorded

00

DAYS

00

HOURS

00

MINS

00

SECS

BOOK NOW

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!"

 

There will be more! Stay informed! 

Sign up and be the first to know about new releases, workshops, and articles.