Sign up

Figma Masterclass

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

Outline

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 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.

 

5×2.5h + Q&A
 

Thu November 17, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

Fri November 18, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

Wed November 23, 09:00 – 11:30 am pt (18:00 – 20:30 cet)*

Fri November 25, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

Thu December 1, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

* was changed from 24th to 23rd due to holiday in the US 

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

Join the November online workshop

5×2.5h + Q&A
 

Thu November 17, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

Fri November 18, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

Wed November 23, 09:00 – 11:30 am pt (18:00 – 20:30 cet)*

Fri November 25, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

Thu December 1, 09:00 – 11:30 am pt (18:00 – 20:30 cet)

* was changed from 24th to 23rd due to holiday in the US 

00

DAYS

00

HOURS

00

MINS

00

SECS

Book now

Stay informed about future workshops

Sign up and be the first to know about new releases, workshops, and articles.