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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

The Beginner's Guide to Figma

The Beginner's Guide to Figma

Sources: egghead
Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices.
24 minutes 19 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
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
Advanced Figma Video Course + Let's Design Together Add-on

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

Sources: Andrija Prelec
Become a master of Figma and soar up the career ladder in design. The course is filled with real tips and tricks from a senior product designer with...
20 hours 58 minutes 42 seconds
Figma Academy 2.0

Figma Academy 2.0

Sources: Michael Riddering
The most advanced online design course. See for yourself why over 5,000 designers and leading tech teams are trained in Figma...
11 hours 19 minutes 17 seconds