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
The Beginner's Guide to Figma
Duration 24 minutes 19 seconds
Course
Figma for Web Designers
Duration 5 hours 31 minutes 58 seconds
Course
Learn Figma - UI/UX Design Essential Training
Duration 3 hours 55 minutes 26 seconds
Course
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
Duration 21 hours 31 minutes 53 seconds
Course
Mastering Figma
Duration 3 hours 37 minutes 49 seconds
Course
Kickstart your UI/UX Design Career / DesignCourse UI/UX
Duration 16 hours 33 minutes 33 seconds
Course
Complete Web Design: from Figma to Webflow to Freelancing
Duration 19 hours 10 minutes 59 seconds
Course
Motion Design with Figma: Animations, Motion Graphics, UX/UI
Duration 10 hours 11 minutes 31 seconds
Course
UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Duration 31 hours 51 minutes 43 seconds
Course