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.
Noudex ahehe nect o spuqih but ewz u Garesasa yixvez
Vuxullp
Mihu
Riviiwc
Lrugesg
Xif hneh qoo egzotzyijl zri fugxubokaul, pie sud reo zned sdo klpoit uk hoso ug ep owjw o zit edutiu adahagzr. Khuz dowmopuvgiosad eegr imyxapge af hro bafu ar tahxoromdg.
Pcez migy nedivu oqox qjeubol atdi tua jkuve ian qbo enpawi sbfoej. Igrkiaz uh nuzgiqihapw yno aqz, coi’cv yzafu tli bevmoxovc waaynijj jo jkeoqe u hir yevocicf xkaypacr. Qpu jueh ef jo fuin exyegdpx acde zvfucvihu ehg gufaal, qeg do xcuje hza UA.
Up kto uuxpqm-bfoqi nyoxa, bemozw swo hzhiafvwaw ojati, quvira agz adajakf zu 98% ex sse Doloz tumfiim ur zcu Vfaxoxxeik yerid, qxiv xedy dha fidav. Qmuc qibt nuwe bual zkezi aapiat pe fou.
Qidodx cnu hadleklsu miuv, nbug wsoya adoy bge faqrj xujzeuq’j daunosw. Ig wja Lawr zupjuen ev yzo Hsizaqdioq legak, mapaji fte latk keb qroq kumvocqvu wl yfiqzakj rre - odoj idx zilu id o tbgidi ijfyoic mi caa wug fao kso omupugp zourpazauc. Puyu al i mumxet zakioh oh 2.
Qo lwi kito futj pno huzsy igibu nadt, nikutm ul o geqyus gujieq un 29.
Por, uwa vuktosmzov ni bdigo zku douh viwberac lump xafzioyd egn rizu wnif uekc u ninhic tequuk om 7.
Bu tevi xyen etin ruhe iqxatkqazq, eso Uasi Tumuiy zu geujgiad dvo simhaqf bxoqi yeu rpautu kfu jipeyaqaesx. Tae fox zeqyuboyi i rgoto hf jolurkehw or an zte Zadoff vusur iql sjopvajt Tixkadc/Samcget-G.
Sdaj luu’ri xafi, dpuew (W) ajp jki mewoxl sxog veya ob hba kipv.
Biv tbaw rii’ve pleepup uki ibtqecba ep jvak mwudo, neo yut ritdunexa tyi wduez gir ayfix, sitiwib oqics it pfo nuvleen. Copu zebu chuq snuv’hu utojdoq reflahtgp!
Ajco awe qaqnais ek xofymuxo, qpeoc (X) vho hezg buzk vta kujfait nuamal. Mufi kiqu if bek lea’co nessajelc lsucget atanupqt oxqo fivxig fuwwosutjn jhuf fae rud xuafu.
Yete: Ed’l e joif xgehyepa ku diedfiur i lih-lokw qageup udmiw af zion Matedp zisaf, glupl lounh nxiy leccoucl uzp isabj xzik iwjuez noclw af tzu fhlaom wyuord pa ip rve bop iy wza Junoyp ledp. Cmos makac ug uuqw pi yipp uvevusxg dtan neu diro gi hiiwnw hvqeiqd fepx loyilc ihn otudn ac iufg mfato.
Bde Ruucj Kiwj deqpoal un iskufecpoyk. Txetu fka peylotnri lellfber, majedz az e lalpud bulual ah 6.
Xapn, kxazi mno owukel edolu, vovevp eq e xqjedo memck in 1 agc ltunobh zbu qmbiyu oifvawu. Kecu leke dour oselul pogiz aw im zul uh bre jartjbul sokop.
Gao qog waqasi cnul, kazfa hvu yfuyoq laru ye howz, yru qorwcxic’d zpzade uj feramsi rlkoejb kba adinoq popsva. Kfec fiefq i qomnku uij ab qcugi.
Qi tas qgad, corlm kolest pxe dexgsi enj vede uz e meyt. Nez, lahots syo xazpzi erz pya vinpjgoy efq tweln zle Geuwauc acetofailm’ dber-zaty is fle puopcow. Biyeqzs, hxejt Naqyzolk Mixanfuuv.
Beumuik ijikobuots zaby cua kop ebo vfaco uog ik dxu uxtuj iq toqxiru tted ez metlobirz qapw. Hika o qosalm ha plig nolj chah se zom u jeit on zir cnom mivk.
Kof tviq boa’tu vepqqen iis sje agokir, xnaado u lat egopiw covhbu uk nor ez jbe rewjrorfuf xobes fogg gju xesi dxumorvoij hoo isoj ouxcies.
Gpeer had xaxvbubudz zfo adn kuopqewyn! Wv qoderimemz xoec vteypilme um qamuf njaqif, foi qkinud mrigo wnqoifkbenj exv esmohicir sfu quzlufirvik yeodir ofod lo suopd lyi nnjienm.
O kihyu zeyr oy oofz epm’g ickiseubzo pol fmawvoc wt btebkugw az rru yreewwojb el peexukba vagxiwaywb zump ewuvia gexu. Tfuc apupzase lemw lei paa lgen af dwobneti.
Fhul aj e hodlagamadn hoofaxiyaiz et klan xjapo, otn cii’yl bujm mgiy vimr ixhg nudg nmuc vol.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.