Design a Responsive Airbnb Website with Figma

11h 17m 58s
English
Paid

Course description

In this project-based course you'll delve into the realm of advanced Figma features to craft a responsive website for a fictional, AirBnB-like rental service company called "Flexrent".

Read more about the course

This isn't just any Figma practice project. The project takes you on a journey from initial client brief to a captivating website design, encompassing the entire design process from concept, to execution, to handoff!

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 84 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Project Demo

All Course Lessons (84)

#Lesson TitleDurationAccess
1
Project Demo Demo
02:53
2
The Brief
08:45
3
What We're Building In This Section
02:22
4
Competitor UI/UX Audit
08:17
5
User Flows
05:41
6
Sitemaps
11:58
7
Assignment - Create Your Own Userflows and Sitemaps
01:15
8
Wireframes - Assets Overview
03:21
9
Wireframes - Home
09:45
10
Wireframes - Booking
12:37
11
Assignment - Create Your Wireframes
01:23
12
Typography
13:13
13
What We're Building In This Section
01:22
14
Colors - Primary and Neutrals
07:19
15
Colors - Accents
05:50
16
Elevations
06:09
17
Icons
02:00
18
Assignment - Set the Foundation
01:33
19
What We're Building In This Section
03:17
20
Badges - Avatars
08:11
21
Badges - Review Badges
11:01
22
Badges - Simple Location Badge
03:43
23
Buttons - Interactive Basic Buttons
15:49
24
Buttons - Interactive Icon Buttons
07:03
25
Buttons - Interactive Profile Menu
07:47
26
Buttons - Interactive Toggles
10:44
27
Buttons - Interactive Like Icon
09:46
28
Data Detail
01:38
29
Assignment - Create Your Basic Components
10:33
30
Navigation - Main Navigation Desktop
13:30
31
Navigation - Main Navigation Mobile
09:22
32
Navigation - Footer Desktop
11:43
33
Navigation - Footer Mobile
03:29
34
Navigation - Tabs
09:17
35
Cards - Image Cards
12:19
36
Cards - Image and Button Card
07:24
37
Cards - Stacked Search Results Card
14:04
38
Cards - Horizontal Search Results Card
08:36
39
Cards - Booking Card Desktop
08:49
40
Cards - Booking Card Mobile
07:24
41
Forms - Messages
04:54
42
Forms - Inputs
09:00
43
Forms - All Purpose Inputs
14:08
44
Forms - Checkboxes
09:38
45
Forms - Radio Buttons
08:54
46
Action Panels - General Action Panel
08:22
47
Action Panels - Callout Panel
04:51
48
Action Panels - Search Panel Desktop
07:28
49
Action Panels - Search Panel Mobile
09:48
50
Action Panels - Reserve Panel
09:07
51
Popovers - Desktop Filters
10:35
52
Popovers - Mobile Filters
04:59
53
Popovers - List Menu
07:39
54
Popovers - Guests Menu
08:16
55
Reviews - Rating Scale
09:16
56
Reviews - Collapsible Card
09:45
57
Assignment - Create Your Advanced Components
02:31
58
What We're Building In This Section
02:45
59
Homepage - Hero Section
11:16
60
Homepage - Locations Section
13:44
61
Homepage - Attractions and Rentals Section
09:57
62
Homepage - Action Panels and Footer Section
11:41
63
Search - Filters and Results
14:21
64
Search - Map and Alternate Views
10:36
65
Listing - Page Setup
09:20
66
Listing - Amenities and Reviews
12:41
67
Listing - Policies
09:32
68
Listing - Layout and Responsiveness
12:37
69
Booking - Booking Creation
19:31
70
Booking - Booking Creation Alternate Layout
05:31
71
Booking - Confirmation
08:16
72
Booking - Confirmation Alternate Layout
04:29
73
Assignment - Create High Fidelity Designs
02:10
74
Prototyping - Search Interaction
11:52
75
Prototyping - Search Results Sticky Header
07:05
76
Prototyping - Search Results Filtering
09:07
77
Prototyping - Listing Scroll Behaviour
06:09
78
Prototyping - Booking Flow
13:01
79
Assignment - Create High Fidelity Prototypes
02:29
80
The Handoff Doc
06:52
81
What We're Building In This Section
01:58
82
Component and Screen Documentation
08:51
83
Showcasing Designs
04:19
84
Showcasing Prototypes
07:25

Unlock unlimited learning

Get instant access to all 83 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Motion Design with Figma: Animations, Motion Graphics, UX/UI

Motion Design with Figma: Animations, Motion Graphics, UX/UI

Sources: zerotomastery.io
Learn motion design using Figma from a design industry pro. You'll learn way more than just motion design principles and theory. This projects-based course will
10 hours 11 minutes 31 seconds
Figma for Web Designers

Figma for Web Designers

Sources: flux-academy (Ran Segall)
If you've ever found yourself overwhelmed by Figma's extensive features or wished your workflow could be more efficient for web design projects… Then this course is your golden...
5 hours 31 minutes 58 seconds
Complete Web Design: from Figma to Webflow to Freelancing

Complete Web Design: from Figma to Webflow to Freelancing

Sources: udemy
It gives you a huge self-satisfaction when you look at your work and say, "I made this!". I love that feeling after I'm done working on something. When I lean back in my chair, ...
19 hours 10 minutes 59 seconds
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

Sources: udemy, zerotomastery.io
Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently
20 hours 31 minutes 41 seconds
UI UX Design Hybrid from Figma to HTML CSS and JavaScript

UI UX Design Hybrid from Figma to HTML CSS and JavaScript

Sources: udemy
Learn how to become a Full-Stack Designer with User Interface Design, User Experience Design, Web Development, Bootstrap
31 hours 51 minutes 43 seconds