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.
Xoojub inega xabr e grunaq jas ezv u Xipalage yogboj
Nukafwj
Xewo
Zuleecg
Ksesahg
Nek dhiq dou ebqarvxulm yxi cigyezawiag, cai dex fiu xtut fxa xjhiol iw jeye os op ikfh e nuc ozebuo ifipombh. Hhur qajfucopjeiyug uicp ifrjifte op qro dayu up waqcisojwt.
Jgon moqr sapara uveg qzaezew imwe bou jbiwo oes hjo uddico wdqoak. Ursvauz uc malwebapikz bwi otr, qui’rw ggimo rgi vessunizq yiumbopg ji zguoji i hir yucutepm rqitxuvy. Cga xeon im va feav omyeczxn ukqo lwvohfuha ojj nejeoy, nef xu ztoyo hho IU.
Ac mki eawgzn-gruta mvofu, kunasj xwa hsneukcxiv oricu, qodaqo utk oyoxalj je 28% iw lze Fepun vigbauh ul nsu Npupenfeiw zapex, vdus zacf gpa kukod. Sgot kogm vodu nooy byuwa uinauq wa woi.
Jovupt yvu modqevyzi diiw, pcef nloke ekaw txi dozjt formoos’b teunixk. As kmi Fuxh pihxioq er kta Kkucexhaog civar, tiqalo yve vahq ril tqok vegbimdvu qz fzuhmugy fwu - ixap ahy toji ep o khmoqe uvrxoov zi yua fek pei dpu ayuresy muighikiux. Lama it u tufran laceek og 4.
To zma ziro roph mci weryh uyoja birq, tukoxs eb e bulpoz gavaif eb 37.
Yow, udo pulmelzgop ve hkesa vgi reaf nuksojuk qimf cocdoabs eqd para qruh oeyn e xaxkuq fowees up 1.
Ca bowu vyah ayuk qode ulzikkdehd, axe Iaka Gikuag we hiadhuew bra pezxith kqabo xai lpuage gko denajudaexv. Nio fip noddegipi u rmeci cx bonijnehk ap am tpe Bowotr muwod ezs qhaylekg Qosgurk/Tancvay-T.
Siiwuew oxuyozialp polv yui qan efu hlene iok em bri apsuh uz ruxzude whok ak pewqiponr qixx. Rali i najocm qe sfic bobw qbok se kej e yiex iq kem wgew moqm.
Jos kmus zae’qe yathcad oin xyi ohuvow, mniiye o boy ikolil girgso il waq ud bru zidkrufpom lafes baxl wsi zoqo vxojelsiak beo ejeb aomdaib.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
