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
0:00
/ #1: Project Demo
All Course Lessons (84)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Project Demo 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 |
Unlock unlimited learning
Get instant access to all 83 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Figma for Web Designers
Sources: flux-academy (Ran Segall)
If you've ever found yourself overwhelmed by Figma's extensive features or wished your workflow could be more efficient for web design projects… Then this course is your golden ...
5 hours 31 minutes 58 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
Pixel Perfect Figma to Tailwind
Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 seconds
Figma design system - Figma UI kit and style variables
Sources: Adham Dannaway
The lightweight and powerful design system of Figma and UI kit will help you develop almost any website or application you can imagine.