Heads up... You're reading this book for free, with parts of this chapter shown beyond this point astext.
You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.
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. [TODO: FPE: “Discovery experience” doesn’t mean anything to me. Will it be clear to our readers, or should we use another term?]
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.
Tracing Pocket Casts’ discover screen
While the Pocket Casts screenshot doesn’t look as straightforward as Airbnb, this method will still work!
- You learned about the significance of tearing down an app.
- You traced the Airbnb explore screen using the shape tools and uncovered that it’s basically built with just two components.
- You then traced Pocket Casts’ discover screen using the shape tools and learned about Boolean operations.
- You compared Pocket Casts’ trace to Airbnb’s trace to uncover how it staggers repetition of components across sections.