Recreating the Airbnb's Mobile Experience
During the UI Design Bootcamp, I recreated Airbnb’s core mobile experience – not just by designing screens, but by building a scalable design system in Figma. I created and applied variables for dimensions, spacing, colors, text styles, responsiveness, and more to ensure flexibility and consistency across the project.
This 8-week project gave me the chance to reflect on how far I’ve come as a designer. Instead of simply replicating what exists, I focused on efficiency, building solid structures, and making it easy for anyone to onboard later on – the same principles I’d apply in a real-world product team. The result is a case study I’m genuinely proud of, showcasing both my skills and my mindset as a designer.
The Challenge
The content of the bootcamp itself felt quite easy for me, and the weekly tasks weren’t much of a stretch either. To still challenge myself, I decided to push my case study beyond the brief. My goal was to create a solid foundation for a design system – with a clean, logical structure that would be easy to navigate, scalable, and precise.
I challenged myself to pay close attention to details, whether in components, styles, or variables, and to refine my overall workflow. This meant improving my processes, working faster without compromising quality, and treating the project as if it were a real-world handover. In the end, the challenge wasn’t about completing the bootcamp tasks, but about setting higher standards for myself as a designer.
Objective/Goal
The goal I set for myself was not only to recreate Airbnb’s core mobile experience, but also to practice building a scalable design system in Figma. I wanted to go beyond simple screen replication by creating a clean, logical structure with well-defined components, variables, and responsive behavior. At the same time, I challenged myself to refine my workflow – working faster while still paying close attention to detail and maintaining high quality. My ultimate objective was to treat the case study like a real-world project, making the result easy to understand, collaborate on, and build upon.
The Design Process
The project followed a structured UI design process, with each step building on the last to create a scalable and consistent outcome. While some phases were lighter and others more detailed, each contributed to strengthening both the quality of the design system and the final prototype.
Benchmark
Define & Wireframe
Create & Structure
Design
Animate & Prototype
Dev Handoff
Decoding Airbnb’s Design
Although Airbnb’s layouts and flows were already defined, recreating them as wireframes gave me valuable insight into the logic behind their product. It helped me understand how dimensions, spacing, and rules were applied consistently, and where the same element appeared as a different state or variation. This process laid the groundwork for creating components in a concise, efficient way and gave me a deeper appreciation for the system thinking behind Airbnb’s design.
Building a Scalable System
Rather than stopping at screen replication, I challenged myself to set up a scalable design system in Figma. I defined variables for spacing, dimensions, colors, text styles, responsiveness, and more, ensuring consistency and flexibility throughout the project. Creating well-structured components with clear properties allowed me to work efficiently while keeping the file clean and easy to understand – just as it would need to be in a real-world product team.
Bringing it to Life
To push the case study beyond static screens, I added interactions, animations, and responsive behavior to key components. This made it possible to experience the flow as a user would – switching between light and dark modes, exploring filter states, and navigating through the main booking journey. Prototyping not only showcased usability but also highlighted how a structured design system supports consistency across every detail, from micro-interactions to overall flow.
The Final Case Study
Here’s a walkthrough of my recreated Airbnb mobile experience – a clickable prototype that brings the core flows to life with interactions, animations, and more. Explore the full Figma file here to dive into both the prototype and the design system behind it.