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