The Figma Mastery Course

Course
97 Lessons

Learn Figma from A to Z from a lead designer with a decade of experience.

Buy now

Welcome

In this section, you will learn about Figma and how to use this course effectively.

How to Use this Course

Course Files

Basics

Figma Starter Screen

How to Move

How to Move in Figma (project file)

Move & Scale Tools

Rectangle Tool

Pages & Layers

Lines & Arrows

Ellipse Tool

Polygon Tool

Star Tool

Groups vs Frames

Typography Basics

Intermediate

Adding & Editing Images

Colors & Gradients

Masks

Drop Shadows

Pen Tool

Frames, Positioning & Alignment

Resizing Frames without Resizing Content

Strokes & Borders

Background Blur

Copying Style Properties

Outline Stroke

Advanced

Autolayout

Layout Grids

Intro to Components

Intro to Variants

When to Use Components

Responsive Designs

Shortcuts

Shortcuts (project file)

Slice Tool

Figma to PDF

Collaboration

How to Share Projects.mp4

Comments & Collaborative Features.mp4

Exporting 101.mp4

Intro to Figjam.mp4

Figma Community.mp4

How to Install Plugins.mp4

Dev Mode.mp4

Developer Hand-off.mp4

Set up a Team Project.mov

Prototypes & Animations

Prototyping 101.mp4

How to Use Sections in Figma.mp4

Sections.fig

Smart Animate 101.mp4

Smart Animate: Project.mov

Smart Animate - Onboarding animation.fig

Smart Animate & Delays.mp4

Design Systems

What is a Design System

Structure a Design System like a Pro

Color Styles

Typography Styles

Iconography

Shadows, Grids, Spacing and more

Fortune 500 Design Systems: Analysis & Freebies

Atomic Design Principles 101

Let's Build a Landing Page from Scratch

In this section we will go through a live web design project from scratch, from the very first client interaction all the way to the finished design solution

Discovery Call & User Personas

Content Architecture

Wireframe Foundations

Wireframe Progress

UI Design Foundations

Social Proof and Features

Content Features

Pricing UI

Footer

Website.fig

Web App with Autolayout

In this section we'll create a web app UI from a live project and we'll be using autolayout in the process.

Intro to the Project

Side Menu

Header

Head

Currency Components

Filters Menu

Dashboard.fig

Essential Plugins

Plugins are like the secret sauce in the Figma recipe! They're the magic touch that takes our designs to the next level, breaking down barriers and unleashing a world of endless creativity.

Pitch Decks: Design & Export to Slides or Powerpoint

Text around a Path

Lorem Ipsum

Variable Width Strokes

Mesh Gradients

Content Reel

Editing Images with PhotoPea.mov

Html to Figma

Unsplash

Remove Backgrounds Fast

Image to SVG

Additional Resources

Additional resources to help you advance in your journey towards mastering Figma

How to Install a Font in Figma

Publish Files to Figma Community

Figma File Thumbnails

Image Optimization for the Web

Figma to WebP

Top Sites for Royalty Free Images

Figma Files Management 101

Full Design Process overview

Bonus Resources

Figma Cheat Sheet.fig