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

YES, OF COURSE I will include all Config updates! 

Day 1 – 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 2 – Figma Variables

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

Day 3 – Responsive Design: Auto Layout and Constraints

• Set up auto layout frames
• Understood the difference between one- and two-dimensional layouts
• Aligned with CSS by comparing
• Flexbox, CSS Grid, and Figma
• Explored basic and advanced auto layout settings
• Learned about resizing behavior and suggested auto layout approaches
• Nested auto layout structures effectively
• Worked with ignoring auto layout, min/max width, and wrapping in Figma
• Created advanced components and entire pages
• Used and nested the new Figma Grid
• Learned what constraints are and how to use them
• Designed responsively using variables and modes
• Picked up various tips and tricks
• Completed lots of exercises (because auto layout requires practice, practice, and more practice!)

Day 4 – Prototyping with Figma

• Viewing prototypes in presentation mode, in-file, and on mobile
• Fixing 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 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