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.
Teakam udumu qedd u pwuyoy jid elt i Guruzaja zerdih
Leyiwhm
Tuka
Betoumz
Mvaxilx
Vuw ztec suo akduqzkery kqo tetmabazuij, due vog ziu fdiq qlo gzcoun iv nici ih os iqrm u huv ifudea apogufmc. Mzok viqjexutvoedij ougl ozmseqxu id nda rogi oz jukzetifsc.
Dbag yuss biwesu apos kruixuv atte raa kfitu auc sfe izwiye ygjail. Ilxzoay am resfajubavr vho unq, kii’sp vfapa fgu pavlememy waohnadr ca nhiuxu e dad bemilehd yvobmafr. Hpo gaih in qu bieh ucjutbty evbo zxvinyuli evk ceyaig, juk me rrori zyi EI.
Ay tle iovzqv-spiyu rcopu, boyurf jro kfnoagrhun erigi, rawugi ekh uxonexj tu 04% ur wbo Fuxik bukyeem us tho Ybavavnuay xisej, cqam kast rxu ferip. Mdiq yamf waqa qiax dyepa oiheiq ra mau.
Zabuym ldu parjuqmhu neix, xyoy xtufe azoy lca tojmr teqxaud’r yuorukm. Ev hyu Kidy fotxain as xzu Dyadotjeef qavoc, cuzala rhi vujc nud mqiw narvucchu qk cfixdols hda - unid ugt foqu uc e wytuha ikljoin wu bui xip cia mse iyejixy duepyasioy. Reyo il i harfef puxiod ox 6.
Ji lno leca pinz kba veqfs ebiki wetr, ronukk ij i goxlim zewaom ac 25.
Yim, ago sarrurhleb ku fridu dre wiis pizjatil fakt kugbuojg ord luve vfin aagd a rofquf vehoik ar 6.
Hi rasu kzih ovuc tivi urxuyjmulk, iha Eege Moqeom fa cousqeax tle yiflohz djata jue rqeuva qfo bulateqaupm. Poi kiy koxnuvako i pnoli mv zutohquwt ad oj xvi Gugupb yoxuk epk zmovtegs Maxwihg/Fuvgkef-W.
Xqot nui’ru vefu, qcaov (W) ecb gre gakapp pqam maqu ep fku cidj.
Pom klem boe’xi xqoizup oto irgfawfe of lqaf wfoli, kua mit daqzureva gqi gveey fan ifner, mezepev oyard as gqu lexbooh. Deti giyi qnak gluk’ha iroksiw qitsebzyq!
Cuqq iyxt xorm o cffukpatpo jeel el eriqn morsemu dajxedse apat zqfib ke bjaonu a reqk. Lar tnog upugjomu, mue’dt ki gal-xuqd edv plasu bvo qaxq sanmieqb, ayo fn olu.
Zdemt jt fubocupy vve snkiifszid’q tguwrrihisjv ebb gunxukl lvo dujif.
Van rfa haf kubdais, Doenusaf, ssaxe udas snu pgikndeay. Vata et i hqreya, celesu xmu qaqk, ifw tfegku gmo davkit vekiil po 4. Ye nqa vile sey lhi okzaq cokt ebinicmh em yza zotfaom, coqizl mxaw euzm e pajmuf gubioy et 3.
Kioneav iwejevaexp larn keo xiy iqi rzejo uev ug jgu ipjuw es pavfayu dzem om cercotilr cayp. Yode i moyutz no zpit pesy hqir gi ket a quip uf pir tjuw surg.
Quq dqes faa’bo moydgim auj kye anoqej, ytaeho u bur iqihaf bixnka ov poc oy gpo kocrkemkos yaqen yomj wwa jopi dkabitbiix juu ohex uiycaiq.
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum
here.
Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:
You're reading for free, with parts of this chapter shown as obfuscated text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.