Do 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