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 commentsSimilar courses

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
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
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
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
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
Want to join the conversation?
Sign in to comment