Design a Responsive Airbnb Website with Figma

11h 17m 58s
English
Paid

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 Design a Responsive Airbnb Website with Figma

Join premium to watch
Go to premium
# Title Duration
1 Project 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

Similar courses to Design a Responsive Airbnb Website with Figma

Advanced Figma Video Course + Let's Design Together Add-on

Advanced Figma Video Course + Let's Design Together Add-onAndrija Prelec

Category: Figma
Duration 20 hours 58 minutes 42 seconds
Motion Design with Figma: Animations, Motion Graphics, UX/UI

Motion Design with Figma: Animations, Motion Graphics, UX/UIzerotomastery.io

Category: Figma
Duration 10 hours 11 minutes 31 seconds
UI UX Design Hybrid from Figma to HTML CSS and JavaScript

UI UX Design Hybrid from Figma to HTML CSS and JavaScriptudemy

Category: Figma
Duration 31 hours 51 minutes 43 seconds
Learn Figma - UI/UX Design Essential Training

Learn Figma - UI/UX Design Essential Trainingudemy

Category: Figma
Duration 3 hours 55 minutes 26 seconds
Complete Web Design: from Figma to Webflow to Freelancing

Complete Web Design: from Figma to Webflow to Freelancingudemy

Category: Figma, Webflow
Duration 19 hours 10 minutes 59 seconds
Mastering Figma

Mastering Figmaleveluptutorials

Category: Figma
Duration 3 hours 37 minutes 49 seconds
Kickstart your UI/UX Design Career / DesignCourse UI/UX

Kickstart your UI/UX Design Career / DesignCourse UI/UXGary Simon

Category: Figma, Other (Graphic)
Duration 16 hours 33 minutes 33 seconds
Figma for Web Designers

Figma for Web Designersflux-academy (Ran Segall)

Category: Figma
Duration 5 hours 31 minutes 58 seconds