Sign up

Figma Masterclass for Teams

5 day class / 2,5-3h per day + Side Project.
Available online or in-person.

Contact to book
 

Outline

In this course, we will learn how to push your design from a pretty picture to a working and scalable UI design that fully uses all of Figma's impressive features.

We will work with a good mix of theory and hands-on exercises and plenty of room for your questions.

This course is for you if you are a graphic designer, UI Designer, or developer with basic knowledge in Figma and would like to bring your skills to the next level.

Day 1 – The correct setup

Theory:

  • pt, px, and resolution. What, why, and how?
  • Understanding Grids
  • Grids across different screen sizes
  • 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

Course Project:

  • We are setting up the foundation for our project and adding some first elements.

 

Day 2 – All about components

Theory:

  • Components: Short and sweet intro, because today 90% is in Figma!

Figma

  • Setting up components and instances
  • Nested components
  • Variants
  • Component Properties
  • Organizing and sharing components
  • Some advanced techniques

Course Project:

  • Let's run through our project file and turn it into a component-based design.

 

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
  • White space and line length

Figma

  • We will set up an accessible type scale and save our styles in Figma

Course Project:

  • We are adding our type scale and color stylesheet to our documentation and linking the styles to our design.

 

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
  • Resizing behavior
  • Nesting auto layout
  • Absolute positioning in Figma
  • Limitations
  • Responsive testing and documenting
  • Many exercises today as auto layout is all about practice, practice, and practice

Course Project:

  • Let's convert our components into auto-layout frames and add constraints to the grid positioning.

 

Day 5 – Prototyping, sharing, and hand-off

Theory:

none!

Figma:

  • Prototyping basics
  • Connecting screens
  • Different types of animations
  • Interactive components
  • Documenting Prototypes
  • Finishing off our documentation
  • Sharing with developers, designers, and anyone else

Course Project:

  • Adding our prototype links and inviting each other in view mode for feedback

FAQ

Interested? Let's chat

Contact to book

Not a team, just one person? Then this is for you:

  • Figma Workflow Masterclass for individuals
  • Live online workshop. Hosted by Smashing Conference
  • 5×2.5h + Q&A
  • Thu & Fri, November 17 – December 1, 2022
  • 09:00 – 11:30 am pt ( 18:00 – 20:30 cet ) check your time zone 
Book workshop