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.

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 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 intermediate-level UI Designers or those switching from graphic design to UI Design who are eager to understand a little more about Figma 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 basic and the new

• General setup in Figma
• Understanding UI layout options (Flexbox, CSS Grid, and classic grids)
• Styles and variables
• Spacing concepts
• Colours and Typography in Figma and UI Design

Day 2 – All about components

• Setting up components and instances
• Overriding do and don’t
• Nested components 
• Component sets and variants
• Component properties
• Interactive components
• Variable Modes
  
  

Day 3 – Responsive Design: Constraints, Auto Layout and Variable Modes

• Understanding responsive design versus intrinsic design
• What are constraints, and how to use them in Figma
• When constraints are not enough: Intro to auto layout
• Setting up auto layout frames
• Basic and advanced auto layout settings via the menu
• Resizing behaviour
• Nesting auto layout
• Absolute positioning, min/max width and wrapping in Figma
• Creating more advanced components and entire pages
• Understanding auto layout limitations
• Is auto layout flexbox? When to use what? 
• Responsive testing and documenting
• Responsive design with variables and modes
• A few tips and tricks 
• Many exercises today as auto layout is all about practice, practice, and practice

Day 4 – Prototyping with Figma

• Viewing prototypes in presentation mode, in-file and on your mobile
• fix and scroll positions
• Nested scrolling behaviour
• 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 sharing with development 

• Figma team libraries
• Why document
• For whom
• Where to document: From in-file documentation for small projects to external design systems
• What and how to document: Colours, Typography, Spacing, Components and more
• The new Figma dev mode