Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Design a Responsive Airbnb Website with Figma

via Zero To Mastery

Go to class Write review

Overview

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

Explore advanced Figma features to design a responsive website, enhancing your UI/UX design skills.
Experience the complete design process from a client brief to a final digital product, understanding the journey from concept to execution.
Gain practical experience in designing essential and intricate components, such as buttons and feature-rich cards, for web interfaces.
Learn to create layouts that are responsive and adaptable across different screen sizes and devices, ensuring a seamless user experience.
Develop a comprehensive understanding of the design handoff process, preparing you for collaboration with development teams.
Complete a portfolio-worthy project for a fictional rental service company, showcasing your ability to turn creative ideas into captivating digital experiences.

Syllabus

Introduction

Project Demo
Project FAQ
Project Resources
Exercise: Meet Your Classmates and Instructor
Set Your Learning Streak Goal

Let's Get Started!

The Brief

Research and Approach

What We're Building In This Section
Competitor UI/UX Audit
User Flows
Sitemaps
Assignment - Create Your Own Userflows and Sitemaps
Wireframes - Assets Overview
Wireframes - Home
Wireframes - Booking
Assignment - Create Your Wireframes

Visual Design and Foundation

Typography
What We're Building In This Section
Colors - Primary and Neutrals
Colors - Accents
Elevations
Icons
Assignment - Set the Foundation

Responsive Reusability

What We're Building In This Section
Badges - Avatars
Badges - Review Badges
Badges - Simple Location Badge
Buttons - Interactive Basic Buttons
Buttons - Interactive Icon Buttons
Buttons - Interactive Profile Menu
Buttons - Interactive Toggles
Buttons - Interactive Like Icon
Data Detail
Assignment - Create Your Basic Components
Navigation - Main Navigation Desktop
Navigation - Main Navigation Mobile
Navigation - Footer Desktop
Navigation - Footer Mobile
Navigation - Tabs
Cards - Image Cards
Cards - Image and Button Card
Cards - Stacked Search Results Card
Cards - Horizontal Search Results Card
Cards - Booking Card Desktop
Cards - Booking Card Mobile
Forms - Messages
Forms - Inputs
Forms - All Purpose Inputs
Forms - Checkboxes
Forms - Radio Buttons
Action Panels - General Action Panel
Action Panels - Callout Panel
Action Panels - Search Panel Desktop
Action Panels - Search Panel Mobile
Action Panels - Reserve Panel
Popovers - Desktop Filters
Popovers - Mobile Filters
Popovers - List Menu
Popovers - Guests Menu
Reviews - Rating Scale
Reviews - Collapsible Card
Assignment - Create Your Advanced Components

High Fidelity Designs and Prototypes

What We're Building In This Section
Homepage - Hero Section
Homepage - Locations Section
Homepage - Attractions and Rentals Section
Homepage - Action Panels and Footer Section
Search - Filters and Results
Search - Map and Alternate Views
Listing - Page Setup
Listing - Amenities and Reviews
Listing - Policies
Listing - Layout and Responsiveness
Booking - Booking Creation
Booking - Booking Creation Alternate Layout
Booking - Confirmation
Booking - Confirmation Alternate Layout
Assignment - Create High Fidelity Designs
Prototyping - Search Interaction
Prototyping - Search Results Sticky Header
Prototyping - Search Results Filtering
Prototyping - Listing Scroll Behaviour
Prototyping - Booking Flow
Assignment - Create High Fidelity Prototypes

Handoff and Portfolio

The Handoff Doc
What We're Building In This Section
Component and Screen Documentation
Showcasing Designs
Showcasing Prototypes

Where To Go From Here?

Review This Project!

Taught by

Daniel Schifano

Reviews

Start your review of Design a Responsive Airbnb Website with Figma