Figma Course Updates | Alex On Design

Autoplay
Autocomplete

Previous Lesson Complete and Continue

UX / UI Design Mastery - From Theory To Live Website In Adobe Xd, Figma And Webflow

Intro And Course Structure

Course Intro (2:31)
Course Structure And Project Files (1:45)
Figma Course Updates (3:40)

UX Design Basics

SECTION 1 - UX Design Basics (0:42)
What is UX Design (0:48)
What does UX designer do (2:07)
Is UX the same as UI (3:47)
Skills UX designer needs (1:39)
In House VS Freelance UX Designer (3:36)
Tools for UX Designers (14:13)
UX Design Basics Resources
SECTION 1 ASSIGNMENT (1:15)

Design Briefs

SECTION 2 - Design Briefs (0:16)
What is a design brief (2:42)
Creating a design brief in Adobe Xd (18:22)
Design Brief in Figma (9:36)
Design Briefs Resources
SECTION 2 ASSIGNMENT (0:47)

Project Proposals

SECTION 3 - Project Proposals (0:56)
What is a project proposal (2:00)
When should you send it (2:41)
Creating a project proposal in Adobe Xd (6:02)
Proposal cover (4:29)
Project details (8:32)
Project pricing (9:10)
Terms and conditions (9:15)
About You (7:15)
Project Proposal in Figma (8:26)
Project Proposal Resources
SECTION 3 ASSIGNMENT (0:27)

User Research and Personas

SECTION 4 - User Research and Personas (0:40)
What is a User Persona (2:57)
Types of research methods (2:45)
Quantitative VS Qualitative (5:17)
Choosing your participants (5:35)
Visualising your data (2:43)
Creating Your User Persona (9:41)
User Persona in Figma (6:28)
User Research and Personas Resources
SECTION 4 ASSIGNMENT (0:39)

Competitive Analysis

SECTION 5 - Competitive Analysis (0:40)
What is a competitive analysis (2:34)
Types of competitive analysis (3:46)
How to do a complete analysis (9:22)
How to do a feature analysis (10:42)
Which tools to use (2:49)
Things to look out for (2:23)
SECTION 5 ASSIGNMENT (1:11)

User Flows

SECTION 6 - User Flows (0:31)
What are user flows (3:15)
Different user flow types (3:39)
When are they used (3:00)
Creating user flows in Adobe Xd (10:19)
Working with flowcharts in Adobe Xd (14:09)
Sharing your flows (4:53)
User Flows Resources
SECTION 6 ASSIGNMENT (0:35)

Paper Wireframes

SECTION 7 - Paper Wireframes (0:53)
What are paper wireframes (1:30)
Which elements to include (3:44)
Wireframe styles (7:32)
Equipment you need (6:56)
Drawing on plain paper (14:49)
Drawing on dot grid paper (13:45)
Using printable templates (6:29)
Sharing your wireframes (2:16)
Paper Wireframes Resources
SECTION 7 ASSIGNMENT (0:41)

Layout and Grids

SECTION 8 - Layout and Grids (0:29)
What is a layout (1:29)
What is a grid system and why it's important (1:57)
How to set up grids in Adobe Xd (5:14)
Working with Bootstrap (18:03)
Working with 8px grid system (5:23)
Horizontal rhythm in Adobe Xd (8:21)
Layout and Grids Resources
SECTION 8 ASSIGNMENT (0:44)

Typography and Font Pairing

SECTION 9 - Typography and Font Pairing (0:26)
Typefaces VS Fonts (1:45)
Font types (3:26)
Font weights and how to use them (8:06)
Choosing fonts (3:26)
Font Pairing (7:25)
Font scale (10:01)
Typography Resources
SECTION 9 ASSIGNMENT (0:44)

Iconography

SECTION 10 - Iconography (0:34)
What Are Icons (1:32)
Different Types Of Icons (5:21)
Icon Libraries, Packs And File Formats (20:21)
Free VS Premium Icons (8:45)
Tips For Best Results (5:30)
Iconography Resources
SECTION 10 ASSIGNMENT (1:01)

Color Selection

SECTION 11 - Color Selection (0:29)
Why color is important (4:47)
Which colors exist (7:48)
Color combinations (4:17)
Color selection tools (13:00)
Style guides for developers (10:05)
Color Selection Resoruces
SECTION 11 ASSIGNMENT (1:05)

Images

SECTION 12 - Images (0:25)
Why are images important (1:29)
3 types of project images (4:14)
How to choose niche images (4:13)
Free VS Premium (9:04)
Image Optimization (8:18)
Naming Structure (4:56)
Images Resources
SECTION 12 ASSIGNMENT (0:27)

Mood Boards

SECTION 13 - Mood Boards (0:40)
What are mood boards and why use them (2:38)
Which elements to consider (1:38)
How to do your research (8:00)
Create mood board in Adobe Xd (14:12)
Share or export your mood board (9:02)
Mood Boards Resources
SECTION 13 ASSIGNMENT (0:46)

UI Kits

SECTION 14 - UI Kits (0:20)
What are UI Kits and why are they useful (2:39)
Types of UI Kits (7:13)
Which components are important (6:23)
UI Kit structure in Adobe Xd (7:57)
UI Kit creation in Adobe Xd (14:35)
UI Kit VS Design Systems (3:43)
Premium VS Free UI Kits (3:19)
Creating and selling your UI Kit (12:05)
UI Kits Resources
SECTION 14 ASSIGNMENT (0:35)

Design Systems

SECTION 15 - Design Systems (0:53)
What is a Design System (2:54)
Structure of a design system (4:55)
Design system examples (17:18)
Creating a design system in Adobe Xd (24:35)
Design tokens (7:35)
Scaling your design system (5:50)
Design Systems Resources
SECTION 15 ASSIGNMENT (1:12)

Website Design in Adobe Xd and Figma

SECTION 16 - Website Design in Adobe Xd (0:43)
Design Brief (16:27)
Project Proposal (10:26)
User Persona (6:07)
Competitive Analysis (15:04)
User Flows (16:56)
Sitemap - Content Architecture (15:58)
Paper Wireframes (27:54)
Project Images (11:49)
Mood Board Creation (9:51)
Grid, Typography and Colors (15:50)
Home Page Design (18:52)
Home Page Design Part 2 (19:17)
Home Page Design Part 3 (13:14)
Home Page Design Part 4 (11:39)
Cars Page Design (11:55)
Car Details Page (17:17)
Car Details Page Part 2 (19:07)
Lightbox Design (6:17)
Loans Page (13:02)
Contact Us Page (3:14)
Animating The Design (6:53)
Exporting The Assets (9:33)
Designing For Responsive (9:15)
Future Of Adobe Xd (5:36)
Website Design Project Files
Website Design In Figma Introduction (3:28)
Mood Board And Sitemap (16:45)
User Flow (16:12)
Creating Style Guide (14:20)
Creating Style Guide 2 (20:07)
Design Page Setup (7:56)
Home Page Design Part 1 (30:50)
Home Page Design Part 2 (16:33)
Cars Page Design (12:18)
Selected Car Page Design (23:06)
Loans, Contact Us and Lighbox Pages Design (14:24)
Creating Prototypes in Figma (4:58)
Export Assets From Figma (5:44)
Figma To Webflow Plugin (9:33)
SECTION 16 ASSIGNMENT (1:03)

Webflow Build

SECTION 17 - Webflow Build (0:31)
Introduction To Webflow
Setting Up The Project (20:47)
Creating Style Guide (19:48)
Navbar Build (16:34)
Home Hero Section (15:18)
Who We Are Section (9:07)
Car Selection Section (16:07)
Offer Section (11:06)
Benefits Section (10:35)
Contact Form (17:31)
Map Section (16:26)
Footer Section (15:47)
Creating CMS Collection (19:08)
Using CMS Collection (10:57)
Cars Page Build (12:41)
Cars Template Build (16:14)
Cars Template Build Part 2 (15:10)
Cars Template Build Part 3 (15:29)
Cars Template Build Part 4 (27:01)
Linking Car Cards (6:49)
Loans Page (15:42)
Contact Us Page (1:54)
Adding Links (14:42)
Responsive - Tablet (31:27)
Responsive - Mobile Landscape (10:41)
Responsive - Mobile Portrait (16:08)
Animations in Webflow (26:52)
Publish And Code Export (5:56)
SEO Optimization (12:04)
SECTION 17 ASSIGNMENT (1:09)

Case Studies

SECTION 18 - Case Studies (0:57)
What Is A Case Study (2:00)
Elements To Include (17:41)
Creating Case Study Structure (12:56)
Awesome Case Study Examples (13:27)
Content Writing (2:21)
Presentation Tips (8:46)
Case Studies Resources
SECTION 18 ASSIGNMENT (0:40)

Finding A Job

SECTION 19 - Finding a Job (0:11)
Freelance VS Agency (2:36)
Design Contests (6:00)
Gig Platforms (3:33)
Digital Nomads (2:48)
Design Platforms (4:39)
Webflow Jobs (2:24)
Portfolio Tips (3:36)
Finding A Job Resources

Course Conclusion And Next Steps

Course Conclusion And Next Steps (2:13)

Teach online with

Figma Course Updates

Complete and Continue