This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 22:02
SECTION: 2
Wireframing - Low Fidelity 13:40
SECTION: 3
Type, Color & Icon Introduction 1:15:06
SECTION: 4
Pages 6:36
SECTION: 5
Prototyping - Level 1 31:04
SECTION: 6
Animation Level 1 14:16
SECTION: 7
Commenting 11:30
SECTION: 8
High Fidelity 14:39
SECTION: 9
Columns 16:54
SECTION: 10
Tips & Tricks 6:49
SECTION: 11
Colors 35:01
SECTION: 12
Text & Fonts Advanced 58:09
SECTION: 13
Drawing 49:33
SECTION: 14
Images 28:16
SECTION: 15
Autolayout & Constraints 38:47
SECTION: 16
Effects 14:55
SECTION: 17
Components & Instances 16:33
SECTION: 18
Variants 14:25
SECTION: 19
Prototyping - Level 2 38:53
SECTION: 20
Teams & Projects 3:37
SECTION: 21
Micro Interactions 12:00
SECTION: 22
Thumbnail Update 3:59
SECTION: 23
Overview of Figma Sites 17:03
SECTION: 24
Exporting 25:51
SECTION: 25
What's next 10:03

Questions

Student class projects

Avatar

Janice Zammit

@janiceZammit
0
Avatar

Kate Smith

@kateSmith
0
Avatar

Tricia Hoadley

@triciaHoadley
0
Avatar

Pete Carr

@peteCarr
0
Avatar

Yvonne Crandall

@yc-creative
0
Avatar

Ieva Raz

@ievaRaz
0
Avatar

Marissa Schaefer

@marissaSchaefer
0
Avatar

Haley Mattice

@haleyMattice
0
Avatar

Tomáš Kovářík

@tomas.kovarik
0
PDF
Avatar

Naomi Kosick

@naoko

These are some of the mistakes I made during this module and a recap with the help of chatGBT of what not to do!. You added Auto Layout to an entire page frame, rather than using it inside smaller sections such as the header, cards, and labels. You tried to resize some items through Scale instead of the normal W and H dimension fields. Some label frames were set to fixed width, and their text boxes were also fixed-width, so “Hug contents” could not shrink them. You were trying to move text manually inside Auto Layout; Auto Layout controls its position through alignment and padding. The blue X you first saw was a prototype interaction marker, not automatically a visible close button. At first, the X/close control was outside the Nav mobile overlay frame. You were testing Close overlay before confirming the burger menu opened Nav mobile using Open overlay. Closing only works when the menu has been opened as an overlay—not when Nav mobile is the starting screen. Quick Figma recap: - Use Auto Layout for small sections, not the entire finished page. - Resize with W and H, not Scale. - For compact labels: frame and text should use Hug contents. - In Auto Layout, use alignment and padding to move text; don’t drag it. - Select actual layers/frames to copy—never just the page name. - For the mobile menu: - Burger menu: On tap → Open overlay → Nav mobile - Close button: a real visible X inside Nav mobile - Its 44 × 44 px clickable rectangle: On tap → Close overlay - Start the prototype on Homepage, then open the menu before testing the X.
0
Avatar

Abbey Oborn

@abbeyOborn
0
Avatar

Ivelina Shopova

@ivelinaShopova
0
Avatar

J J

@JJ

Prototyping - Class project :)
0
Avatar

Adam Wilkinson

@adamWilkinson
0
Avatar

Elisa Giacomuzzo

@elisaGiacomuzzo
0
Avatar

Chiedozie Young

@cheeyoung
0
Avatar

Clara Bille Tvedt

@clarabilletvedt
0
Avatar

hillary lewis

@hillarylewis

Project 17- Prototyping hillary lewis [email protected]
0
Avatar

Ashlee Woodard

@ashleeWoodard
0
Avatar

Nicholas Bolen

@nicholasBolen
0
Avatar

Christopher McKean

@christopherMcKean
0
Avatar

Leah Kissick

@leahKissick
0
Avatar

Stephanie Ottavan

@stephanieOttavan
0
Avatar

Alexandra Voytko

@AlexandraVoytko
0
Avatar

Aneta Horackova

@anetaH
0
Avatar

Ethan Haque

@ethanHaque
0
Avatar

Sophie St Cyr

@riApache
0
Avatar

Francisco Caamano

@franciscoCaamano
0
Avatar

Agnieszka Dymek

@agnieszkaDymek
0
Avatar

Arno Baetz

@arnoBaetz
0

Course info

97 lessons / 10 hours 35 quiz questions 20 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Walter Scott

Daniel Walter Scott

Founder of Bring Your Own Laptop & Chief Instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.

True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • Cookie policy
  • © Bring your Own Laptop Ltd 2026
🎬 After Effects Essentials is Now LIVE!

🎬 After Effects Essentials is Now LIVE!

Kyle Hamrick’s brand-new After Effects Essentials course has officially launched!

Jump in and start bringing your ideas to life with motion, animation, and visual effects, all taught step-by-step from the ground up. 🚀

Whether you’re completely new to After Effects or ready to build your confidence, there’s plenty to explore, create, and animate.

JOIN THE COURSE