AI WEEK IS HERE: See All New AI Courses here.
Use Code: LEARNAI to get 21% OFF any membership. Expires soon 👇
06DAYS09HOURS18MINS15SECS
Back to courses

Design a Responsive Airbnb Website with Figma

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

15 Days

Average time students take to complete this course.

instructor
Taught by: Daniel Schifano
Last updated: April 2024

Overview

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!

What you'll learn

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

Why Is This Figma Project Awesome?

Because you'll be able to witness the evolution of a client's vision into a tangible digital masterpiece!

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" and go on a journey from initial client brief to a captivating website design, encompassing the entire design process, from concept, to execution, to handoff.

Plus you'll gain practical experience in designing a range of components, spanning from fundamental elements like buttons to more intricate components like feature-rich cards. With a focus on responsiveness, you'll understand the intricacies of designing layouts that adapt seamlessly across various screen sizes and devices.

By the end of this project, you'll have not only have created a stunning website for Flexrent but also gained a deeper understanding of how to harness Figma's advanced features to bring creative ideas to life, transforming client visions into tangible and captivating digital experiences.

Wait... What's a Project?

One of the most common things we hear from students is: "I want to build more projects!"

We love hearing that, because building projects is really the best way to learn. And unique, challenging projects can really make your portfolio stand out for potential employers.

But also...it just feel so good when you actually build something real!

That's why we've created ZTM Projects. A collection of comprehensive portfolio and practice projects that you can use to advance your knowledge, learn new skills, build your portfolio, and sometimes even just have fun!

What Else Should I Know?

By becoming a ZTM member you'll not only get access to all our courses, bytes, and projects.

But you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Most importantly, you'll be learning from an industry professional (Daniel) that has actual real-world experience as a Lead Designer. He teaches you the exact strategies and techniques he uses in his role.

Finally, as with all ZTM courses, this course is a living thing. It will be constantly updated as the landscape changes so you can use it as your go-to resource for building Figma projects now and throughout your career.

Join 1,000s of Zero To Mastery graduates that have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

And you have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start building this Figma project today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Join Zero To Mastery Now

Course curriculum

Here's an overview of what you'll learn in this Figma project.

Introduction

5 lectures

Project Demo2:52

PREVIEW

Project FAQ

BEGIN

Project Resources

BEGIN

Exercise: Meet Your Classmates and Instructor

BEGIN

Set Your Learning Streak Goal

BEGIN

Let's Get Started!

1 lectures

The Brief8:44

BEGIN

Research and Approach

9 lectures

What We're Building In This Section2:21

BEGIN

Competitor UI/UX Audit8:16

BEGIN

User Flows5:40

BEGIN

Sitemaps11:57

BEGIN

Assignment - Create Your Own Userflows and Sitemaps1:14

BEGIN

Wireframes - Assets Overview3:20

BEGIN

Wireframes - Home9:44

BEGIN

Wireframes - Booking12:36

BEGIN

Assignment - Create Your Wireframes1:22

BEGIN

Visual Design and Foundation

7 lectures

Typography13:12

BEGIN

What We're Building In This Section1:21

BEGIN

Colors - Primary and Neutrals7:18

BEGIN

Colors - Accents5:49

BEGIN

Elevations6:08

BEGIN

Icons1:59

BEGIN

Assignment - Set the Foundation1:32

BEGIN

Responsive Reusability

39 lectures

What We're Building In This Section3:16

BEGIN

Badges - Avatars8:10

BEGIN

Badges - Review Badges11:00

BEGIN

Badges - Simple Location Badge3:42

BEGIN

Buttons - Interactive Basic Buttons15:48

BEGIN

Buttons - Interactive Icon Buttons7:02

BEGIN

Buttons - Interactive Profile Menu7:46

BEGIN

Buttons - Interactive Toggles10:43

BEGIN

Buttons - Interactive Like Icon9:45

BEGIN

Data Detail10:32

BEGIN

Assignment - Create Your Basic Components1:37

BEGIN

Navigation - Main Navigation Desktop13:29

BEGIN

Navigation - Main Navigation Mobile9:21

BEGIN

Navigation - Footer Desktop11:42

BEGIN

Navigation - Footer Mobile3:28

BEGIN

Navigation - Tabs9:16

BEGIN

Cards - Image Cards12:18

BEGIN

Cards - Image and Button Card7:23

BEGIN

Cards - Stacked Search Results Card14:03

BEGIN

Cards - Horizontal Search Results Card8:35

BEGIN

Cards - Booking Card Desktop8:48

BEGIN

Cards - Booking Card Mobile7:23

BEGIN

Forms - Messages4:53

BEGIN

Forms - Inputs8:59

BEGIN

Forms - All Purpose Inputs14:08

BEGIN

Forms - Checkboxes9:37

BEGIN

Forms - Radio Buttons8:53

BEGIN

Action Panels - General Action Panel8:21

BEGIN

Action Panels - Callout Panel4:50

BEGIN

Action Panels - Search Panel Desktop7:27

BEGIN

Action Panels - Search Panel Mobile9:47

BEGIN

Action Panels - Reserve Panel9:06

BEGIN

Popovers - Desktop Filters10:34

BEGIN

Popovers - Mobile Filters4:58

BEGIN

Popovers - List Menu7:38

BEGIN

Popovers - Guests Menu8:15

BEGIN

Reviews - Rating Scale9:15

BEGIN

Reviews - Collapsible Card9:44

BEGIN

Assignment - Create Your Advanced Components2:30

BEGIN

High Fidelity Designs and Prototypes

22 lectures

What We're Building In This Section2:45

BEGIN

Homepage - Hero Section11:15

BEGIN

Homepage - Locations Section13:43

BEGIN

Homepage - Attractions and Rentals Section9:56

BEGIN

Homepage - Action Panels and Footer Section11:40

BEGIN

Search - Filters and Results14:20

BEGIN

Search - Map and Alternate Views10:35

BEGIN

Listing - Page Setup9:19

BEGIN

Listing - Amenities and Reviews12:40

BEGIN

Listing - Policies9:31

BEGIN

Listing - Layout and Responsiveness12:36

BEGIN

Booking - Booking Creation19:30

BEGIN

Booking - Booking Creation Alternate Layout5:30

BEGIN

Booking - Confirmation8:15

BEGIN

Booking - Confirmation Alternate Layout4:28

BEGIN

Assignment - Create High Fidelity Designs2:09

BEGIN

Prototyping - Search Interaction11:51

BEGIN

Prototyping - Search Results Sticky Header7:04

BEGIN

Prototyping - Search Results Filtering9:06

BEGIN

Prototyping - Listing Scroll Behaviour6:08

BEGIN

Prototyping - Booking Flow13:00

BEGIN

Assignment - Create High Fidelity Prototypes2:28

BEGIN

Handoff and Portfolio

5 lectures

The Handoff Doc6:51

BEGIN

What We're Building In This Section1:57

BEGIN

Component and Screen Documentation8:50

BEGIN

Showcasing Designs4:18

BEGIN

Showcasing Prototypes7:24

BEGIN

Where To Go From Here?

1 lectures

Review This Project!

BEGIN

Meet your instructor

Your instructor (Daniel) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Daniel Schifano

Hi, I'm Daniel Schifano!

Daniel was most recently the Head of Product Design at Up & Up and is the Design Instructor here at Zero To Mastery. He has over 10 years of experience across many design disciplines (UX, UI, visual design, user research, product strategy and more).

SEE MY BIO & COURSES

Daniel Schifano

Head of Product Design

Frequently asked questions

Are there any prerequisites for this course?

Required:

  • Intermediate Figma knowledge is required, including a fundamental understanding of Figma's interface, tools, and basic design principles. Don't have that? Take the UI/UX Design Bootcamp course now!

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Are there subtitles?

Yes! We have high quality subtitles in 11 different languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

MOST POPULAR

Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.