3. App Teardowns
Written by Prateek Prasad

In the last chapter, you explored Figma’s workspace and built a sign-in screen using Figma’s fundamental shapes.

Before diving deeper into Figma and building more screens, you’ll now go through an app teardown exercise to study the discovery screens of two popular apps: Airbnb and Pocket Casts.

Part of developing your style and an eye for good design is drawing inspiration from other apps. Doing teardowns helps you understand why things were built the way they were, while also building your understanding of common layout patterns and design decisions.

Tearing down an entire app is beyond the scope of this chapter. Instead, you’ll limit your focus to Airbnb and Pocket Casts’ discovery experience.

The primary motivation behind picking these two apps is that their design is consistent across both iOS and Android. This helps you look at the broader picture without delving too much into platform-specific nuances.

Loading the starter file

Start in Figma’s Files screen, then drag chapter-3-starter.fig into the main Figma window to import it. This file is in your downloaded materials under Chapter-3/projects/starter.

Alternatively, click the Import button at the top right to navigate to the file and import it.

Open the imported project. You’ll see two screenshots that you’ll trace in this exercise.

While the two apps are drastically different, they’re built on the same principles and patterns. Sure, they use different typography, color palettes and layouts to establish their visual identity and brand. But, by looking at each app more closely, you’ll notice the repeated patterns and common building blocks that their designers used to build these screens.

Tracing Airbnb’s explore screen

First, you’ll focus on the Airbnb app. To make it easy to notice the patterns, you’ll focus on one section of the app and break it down. In this case, you’ll trace the list.