Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Figma for UI/UX: Master Web Design in Figma
First Section
Introduction (2:47)
Download all the resources here
What is Figma and is it better than other design programs? (13:12)
How to get help fast (1:35)
The welcome screen in Figma (5:00)
Getting started with Figma (5:26)
Best ways to move around in Figma (4:28)
Exercise: how to move elements around (2:47)
Solving the exercise and a few pro tips (6:30)
Discover Figma’s interface & why professionals use it (7:36)
Create your first mini website (7:48)
Editing icons: colors & size (6:25)
Here's why so many beginners give up (4:23)
Why I don’t code (and I don’t plan to) (2:00)
Discover the most important things about Figma
Introduction (0:57)
The biggest difference in Figma versus other programs (3:26)
Here’s how you create buttons in Figma (6:45)
The basics of working with color (6:15)
How to work with color like a pro (6:03)
How to add images: frames vs rectangles (6:21)
Create a gallery / collage in Figma (4:42)
How to mask in Figma (4:32)
Here are the 3 types of text in Figma (5:43)
Discover the properties of text layers (7:10)
How to work with text like a pro (5:02)
Effects in Figma: blur, shadows & more (5:44)
Everything you need to know about grids (6:17)
An overview of components (7:50)
Drafts & Projects in Figma (7:33)
Here’s makes you a good web designer (3:40)
Conclusions (1:04)
First web design project
Introduction (1:53)
Set up the desktop version the correct way (5:18)
Create the header (5:27)
Create the main menu (5:38)
Set up the search box (6:06)
Create a dropdown menu (4:19)
Create the most important item – the card (6:20)
How to improve the cards (5:56)
Set up the secondary navigation (4:41)
Create the pagination (4:06)
Create the foundation for the footer (5:03)
Adding content in the footer (6:48)
How to handle visual imperfections (5:08)
Here’s what you need to remember (3:11)
The first key to great web design
Introduction (1:57)
Best settings & website components (5:39)
Case study: Non-standard layouts (5:45)
Exercise: Create a standard website layout (1:54)
How to size your web elements correctly (5:26)
My formula for perfect text (5:47)
Case study: text layers (6:12)
8 color contrastWhat you need to know about color contrast (4:09)
Case study: Colors – Part 1 (5:18)
Case study: Colors – Part 2 (7:53)
How to align elements in the hero area (6:43)
3 rules for web design icons (7:51)
Case Study: Visual Balance (5:39)
Final thoughts (2:01)
The second key to great web design
Introduction (1:51)
What’s the point of the website? (4:20)
The user versus the business owner (7:06)
Analytics in web design (7:45)
Templates & Website Builders – The web designer’s death? (9:47)
Case Study: 4 versions of the same website (12:17)
E-commerce homepage layout (7:00)
E-commerce product details (4:55)
E-commerce checkout (8:24)
Why aren’t websites perfect? (7:27)
Case studies: the client’s needs (7:21)
Lead generation in landing pages (9:01)
Why landing pages have a bad reputation (10:42)
Digital product landing page (8:57)
Testing landing pages (7:07)
Case studies: the client’s needs (7:29)
Case study: my landing page (12:22)
Final thoughts about the client’s needs (4:58)
The third key to great web design
Introduction (3:43)
What’s UX? (5:00)
The best example of good UX and attention to detail (8:15)
Improve the checkout process to double sales (9:52)
Improve the mobile version to double sales (4:47)
7 website tweaks that show attention to detail (4:52)
Upgrading the mobile product page (4:02)
Doing 1-on-1 sessions with a coder (6:31)
Here's what you need to remember (2:00)
Redesign an e-commerce business
The most important question when starting a new project (6:45)
How to research/find inspiration for your project (4:51)
Set up the foundation of the project (5:21)
Create the top bar (3:46)
Set up the header (4:35)
Decide on a styling for the header (6:17)
Create the most important part – the hero area (5:37)
Create the secondary navigation – product categories (7:04)
Here’s where sales are made … or not! (4:22)
Create the first version of the card (5:15)
Set the style for the card (5:45)
Finishing touches for the card design (5:05)
Don’t forget about this important detail! (2:56)
Create the FAQ section (4:41)
Here’s why auto-layout is awesome (4:22)
Create a newsletter sign up form (5:50)
Set up the footer’s foundation (6:17)
Finishing the footer (4:30)
Explore variations & improve your design (6:03)
How to approach the interior pages (3:44)
Set the top area for the product’s page (5:11)
Adding content to the product’s page (5:25)
How to add clear calls to action for visitors (4:45)
Main content area (5:07)
Create a table for the sidebar (5:04)
Conclusions (1:22)
Responsive design: from desktop to mobile
Introduction to the mobile version (2:21)
How to start the mobile version for the homepage (5:45)
Create the header for the mobile version (5:17)
How to rearrange the hero area (4:38)
Set up the card for the grid of products (6:36)
Don’t skip this step when creating product cards (5:00)
Arrange the FAQ section for the mobile version (4:01)
Recreate the newsletter in a narrow space (2:49)
Create the footer for the mobile version (4:11)
Conclusions (0:57)
Discover how the design gets transformed to the live version
Preparing the design for coding (4:40)
Zeplin - the missing link! (2:59)
How to set up the project for the coder/client (4:26)
Server-side content and multi-layer graphics (4:59)
Here’s what developers want from your design (4:53)
6 essential (3:51)
What's next?
Final thoughts and what’s next (1:14)
Best ways to move around in Figma
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock