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
Watch Online Design a Responsive Airbnb Website with Figma
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 commentsSimilar courses
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.
Kickstart your UI/UX Design Career / DesignCourse UI/UX
Sources: Gary Simon
Join the most interactive course for learning UI/UX Design with Gary Simon. The DesignCourse UI/UX Curriculum is taught entirely with Figma. You will go from ab
16 hours 33 minutes 33 seconds
Beginner Figma Video Course
Sources: Andrija Prelec
There is no better place to start learning design than the most popular design application! Learn by doing and begin or enhance your knowledge in Figma.
3 hours 22 minutes 35 seconds
Want to join the conversation?
Sign in to comment