3 App Teardowns

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.

Start with the Top sellers section, which has two distinct elements: the section header and the horizontal scrolling list of cards. This section is repeated vertically across the screen for different categories.

Focus on the card element. It consists of:

• Header image with a status tag and a Favorite button
• Ratings
• Name
• Details
• Pricing

Now that you understand the composition, you can see that the screen is made up of only a few unique elements. What differentiates each instance is the data it represents.

This will become even clearer once you trace out the entire screen. Instead of replicating the app, you’ll outline the component boundary to create a low fidelity scaffold. The goal is to gain insights into structure and layout, not to clone the UI.

In the airbnb-trace frame, select the screenshot image, reduce its opacity to 10% in the Layer section of the Properties panel, then lock the layer. This will make your trace easier to see.

Select the rectangle tool, then trace over the first section’s heading. In the Fill section of the Properties panel, remove the fill for this rectangle by clicking the - icon and give it a stroke instead so you can see the element boundaries. Give it a corner radius of 8.

Do the same with the first image card, giving it a corner radius of 16.

Now, use rectangles to trace the four vertical text sections and give them each a corner radius of 8.

To make this even more effortless, use Auto Layout to maintain the margins while you create the repetitions. You can duplicate a shape by selecting it in the Layers panel and pressing Command/Control-D.

When you’re done, group (G) all the layers that make up the card.

Now that you’ve created one instance of this trace, you can duplicate the group for other, similar items in the section. Make sure that they’re aligned correctly!

Once one section is complete, group (G) the list with the section header. Take note of how you’re composing smaller elements into larger components that you can reuse.

Repeat the tracing for the remaining three sections of the screen.

Then hide the screenshot altogether by clicking the eye icon next to the layer and look at the trace now.

Notice how the section header rectangles visually divide the list, even without the data.

The layout amplifies the screen’s core structure, which, aside from the navigation bar on top, is made up of only two components!

Tracing Pocket Casts’ Discover Screen

While the Pocket Casts screenshot doesn’t look as straightforward as Airbnb, this method will still work!

Unlike Airbnb, Pocket Casts uses different section styles to surface different things within the same list. The app uses a total of five section styles. Check them out:

Most apps with a scrollable feed of items compose multiple item types to create a list. For this exercise, you’ll go top-down and trace the list sections, one by one.

Start by reducing the screenshot’s transparency and locking the layer by clicking the padlock icon next to the layer name.

For the top section, Featured, trace over the thumbnail. Give it a stroke, remove the fill, and change the corner radius to 4. Do the same for the other text elements in the section, giving them each a corner radius of 8.

Next, trace the Trending section’s heading and the Show All text, then group (G) them into a header. You can reuse this header component across multiple other sections of the screen.

Trace over the list items, group them (G) and name the group list item. Use Auto Layout to duplicate the trace, adjusting the width of the text layers accordingly.

Now, trace race the Sponsored section and group it (G).

Note

It’s a good practice to maintain a top-down visual order in your Layers panel, which means that sections and items that appear first on the screen should be on the top of the Layers list. That makes it easy to find elements when you have to search through many layers and items in each frame.

The Guest List section is interesting. Trace the rectangle backdrop, giving it a corner radius of 8.

Next, trace the avatar image, giving it a stroke width of 4 and placing the stroke outside. Make sure your avatar layer is on top of the backdrop layer.

You may notice that, since the shapes have no fill, the backdrop’s stroke is visible through the avatar circle. That looks a little out of place.

To fix this, first select the circle and give it a fill. Now, select the circle and the backdrop and click the Boolean operations’ drop-down on the toolbar. Finally, click Subtract Selection.

You’ll notice that the circle gets punched out of the backdrop.

Boolean operations help you cut one shape out of the other or combine them in different ways. Take a moment to play with them to get a feel of how they work.

Now that you’ve punched out the avatar, create a new avatar circle on top of the subtracted layer with the same properties you used earlier.

Trace out the text layer and group (G) this section. Call this group guest-list.

If you’ve been organizing your groups as suggested earlier, your Layers panel should look like this:

For The Little Ones section, follow the same approach as you did with the Airbnb horizontal scrolling list. Trace out the first card and then use Auto Layout to construct the list.

For the Network Highlight section, duplicate the Guest List section and adjust the trace boundaries.

Finally, for the Popular in United States section, duplicate the Trending section.

Now, hide the screenshot entirely and analyze the repetition. Unlike Airbnb, Pocket Casts reuses smaller building blocks across components. They also stagger their repetitions.

Great job completing the app teardowns! By leveraging your knowledge of basic shapes, you traced these screenshots and uncovered the fundamental pieces used to build the screens.

A large part of each app’s experience was crafted by standing on the shoulders of reusable components with unique data. This exercise lets you see this in practice.

This is a significant realization at this stage, and you’ll find that most apps work this way.

As you dive into future chapters, this idea will become more apparent. While you’re at it, you’ll also learn techniques that will help you fly through Figma.

In the next chapter, you’ll start wireframing the screen layout and work on the app flow for the Cinematic app.

Key Points

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