Design a Responsive Airbnb Website with Figma

11h 17m 58s
English
Paid
May 21, 2024

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".

More

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

UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Pixel Perfect Figma to Tailwind
Motion Design with Figma: Animations, Motion Graphics, UX/UI
Figma design system - Figma UI kit and style variables
The Beginner's Guide to Figma

The Beginner's Guide to Figmaegghead

Duration 24 minutes 19 seconds
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
Kickstart your UI/UX Design Career / DesignCourse UI/UX
Advanced Figma Video Course + Let's Design Together Add-on
Mastering Figma

Mastering Figmaleveluptutorials

Duration 3 hours 37 minutes 49 seconds
Figma for Web Designers

Figma for Web Designersflux-academy (Ran Segall)

Duration 5 hours 31 minutes 58 seconds