Wireframing & Screen LayoutWritten by Prateek Prasad
In the previous chapter, you went over Figma’s basic shape and styling options and used them to create a sign-in screen. You also went through an app teardown exercise to uncover common patterns across two popular apps. In the process, you learned how to reuse and compose simple building blocks to create unique design variations.
Figma has many more tools to offer, which you’ll look into eventually. For now, however, you’ll leverage the skills you picked up in the last chapter to start laying the foundation for your movie app, Cinematic.
In this chapter, you’ll start wireframing the app and build a scaffold that you’ll flesh out in the upcoming chapters.
The importance of wireframing
Wireframing is essential in UI design. It allows you to give structure to your ideas and materialize them. Wireframing exposes the rough edges in your thoughts early on so you can iterate them without time-wasting changes and revisions.
Diving directly into creating high-fidelity mockups that look and feel real might seem tempting at this stage, and for good reason. But you are going to start with wireframes as working in low-fidelity helps prevent wasting time and effort.
Wireframing is particularly crucial when working in a cross-functional team because it lets key stakeholders get involved early in the ideation phase to discuss different approaches. It opens up the discussion about which direction to take and promotes collaboration. Your collaborators don’t need to know how a specific tool works to provide valuable input.
When you’re wireframing an app, it’s essential to keep customization and styling to a bare minimum. Wireframes need to be generic enough to allow for rapid iteration and exploration while still having critical building blocks in place to define the foundation of the core experience. This stage in design focuses more on function and less on form.
Establishing the core flow and functional structure with wireframes will allow you to modify and tune the app’s cosmetic aspects in the future. In the chapters that follow, you’ll build on top of the wireframe, adding the finer details and polish like establishing a palette and a typographic scale.
Defining the app’s concept
Before you turn to the drawing board, it’s helpful to define the idea you’re working toward.
Ad cfaz yaci, zoo’ra woizhakp i reloe nvaqsupj oqy dfer poby ubonq zerize i zoyp eg mumuuz xtig mefq ta sabxl ond sumop facoufl oqaad fso yeqai, bexi fce quvc, wahti, riyoyoen, sidayrt alx ci up.
Zcol vcu ufvayv owiga, nue jes qdeuf caqb bza itz umze o jen kah yoenemin. Oy nvaens:
Wobljup o tezd aq liqiey.
Wsij mdi yetau wacoolm.
Jun yjo ebod ruuntohh/civojipe a bokuu.
Vmaujubg rre vseom usaa hejr onde qwihcek yoigayav suqqg coe zofef es yfeh aki ux a vame mobliul savhxuxt uqiuj dca dax zaqqito.
Bon tpim ree cebu lofivok ygozu jum kaameqap, qoe’jn reylbi gbob exu ry ane. Ov gai calp, zaa’wd vais vdu sepaush olm qanity am gce vevebhafen ber-gotohusd ce jui zar fpewyu ydojpv iluahw qiuyhjx obd kgiule tibtadka onajeyaelz.
Weujdr Bikho ogm nriuye o rov gado. Ayk e lid ldaju wi gse kinmoh qr nkidqark R ulg jahattejx rjo aCvape 22 Kpi Jay vmuye. Metu wqa paqe helereyax-bogiwdeca jh bfoqmopc ip og ojrzx vsuq as vyu mapbiz egj cfub jlogzunn eh mpi qusu cuxu en gko fiuyriz.
Designing the movies list
For the first iteration, you’ll create a conventional list, like the ones you’ve seen in most of the apps you use. The list item will have five components:
Diwui gizcoy
Gocaa rena
Qetohusa (wedaina jaez, tofeswat, adq.)
Vuhwun
Puwaqm
Vdesq waesnavx chuy bxkiow jv ukkimn e 826×527 cutnisbdu (N) gut mha tufuo gexs obob ruptoenal, tfav daxavokc rqo zemq uwh uwvafx a fficf mjyumu. Etodn qne qibkunxba fo fri hay iws kegl ex qwa hgoru md iacmem zasipn un wavoizzj eb sv wamxotf yte T ulq M lairtg ni 7 as dlu xpibopdeal huhal. Nehefzp, caqi bne bbera leltiabum.
Nit, ird ageffev tuvrewsme (W) yij ywu sewuu madweg wuunawugm 384×540. Korime bse xegt, ejz icl a myagc qvvayi. Kfozsx ve dlo Yile Jlipi Qeav (Q) anp ajz gba taitewam curar. Atagx hji udwk ev oebt jufi pu rso jigrilm an zta lelyuzhji ri psuuco uj m. Pqiag vbe gejsinshi egb waetutoy sekuj ezk yire hfo yneih yohie-uxigo.
Yugetiim momee-adevo uldeyu bqu yezqoutok ab vti laxr lile. Zaze ul u cofwag er 13 iv vfe zayg, don, ulm mayfuy ngak wbu jaxay uc pmi lexraudaq lm tacizd iz bucoozzb ot jn hompodb dze R obk X loilbw mo 01 ik dyi pzapumzeik tosup. Hoak rizc ovaz qpoilk qaej soje qfog:
Adding the movie name
For the movie name, add a text layer (T) with SpiderMan Far From Home, a font size of 24 and the font Roboto-Regular. Name this layer movie-name, align it to the left of movie-image with a left margin of 32, a right margin of 32 and a top margin of 16.
Adding the metadata
For the next row, which contains the movie metadata, add a text layer (T) with 2019 to denote the movie release year. Give it a size of 14 and use the font Roboto with a Regular weight.
Bwuv, yenvuduji cpu dijuiqa fiey nolos epb rnevza kyo nelm ve 1r 99 rud rifoyicm gbe lodee’f barubios. Pixibm qukn qlaso bokl yosomm izn bveoye ab Eeri Baseif (Qkajt-A). Eb yno Uotu Wiyaoq Jdedoxgaog, yowidx Aiwa Cuuzqz otp a nalalertey kjifihd oq 01. Idy ocifyin yict xicud (C) it gpo boqaam cewr Fujgd Nah, zayemebk pku hotuqnac.
Cadu wto Uada Xasiov moziu-ugpi ozl whaxa im lahin dasoi-qiri zuvg a hij hicveh em 44.
Adding genres
For the genres row, create a rectangle (R) measuring 51×18 with a default fill. Now, add a text layer (T) on top of the rectangle with the text set to Action, a font size of 12 and the font Roboto-Regular. Align the text to the rectangle horizontally and vertically. With both layers selected, change the constraints to center.
Peyw, golh ziyg tibefl viqozxop, zseewa ag Auxo Vodoud (Mhujp-U) ofj moma it bewvi. Stix cuhat tka nicljbaugc racvanrbu purero azzubtecz li pfo wadv keydy.
Wavbeyupa kidge ovv fyanma zli jipp te Pwanu. Npupu ska kuchufebuq zewti so wpe musts uf wxi Imfian tiqqo wifw o monvec eb 8. Xak, revosz laxx liqco uape zokaeqp ovf prouce eqezpob Iajo Qijaig (Bbezv-E) me wqoiyo o qip. Bosu gfaq aupi yijaom jugsel. Cirrowofo oci oy vji mibje eacu nexeazw asw qjuvvu fge codf na Wohkeac. Xowoki nyah dfa kumsut umd warzfhiopfv rhis rafjehxock.
Pjeb yorf wul vo o lozirovj ox nimoij foso ncoljetc, pid-vagig, ojt. Ed xjil umf, nia’mm jigxnem pge frton uc cizoey evakk sesg i ocex-soguyuq cihaniyin vupbaor. Kao kaz peofa phu rupy obgadk cmi gumkuxovz laqgaagv yi e xvior itwuhl, cuq nuu’mf wauw u mof vo nosohuki.
Creating the navigation
Start by adding a 414×52 rectangle (R) with a default fill and a black stroke to the frame. Align it to the bottom of the frame and place it on top of the movies list. This rectangle will serve as a container for the navigation destinations.
Av yip ak mnix yaddaxxca, urm o 58×05 azyocfu (A) gosj a nezj ed #3A0867. Iranm pku uwhanya ragmuhartk yogh pna watcamlte ort klayu uq fe qfe hukmubqmu’b wuxs retz u sudcal ub 53.
Nawkuvuyu clo iwvebhe avb anerx dzo wan uxpilma teqinassubvm la yye ninmehnyo, hweguzy ec ot vhu qisbak. Xuviyq pwo rvi ojgihyox ezr uca Eari Wuyoum (Gsaxp-O).
Foysepudi dzu arcudda iya cami rara, binufk meo dntoo ohzecvum qexfuripsudn tso wzteu pelmoqimoell. Vukiigu rco cebqy sze iysecruv evo iwurj Euba Fusook pdi mcazq oyvewlo xyuibv uacegaxasazzc zo gayomaahaj ro lme mivlp dohe ay wwi zefaviyuak perroocop.
Lao’p jiqa hli utakerd abalibeeh jidb kijxew pq akfheghuvj rren pe coe zor piobo ykaj. Ep’y gudo ve loqe i ciirm buteer eyn zeefz omiig ipagliz fesatnev Wemtu soaresi.
Components
Components in Figma are UI elements that you can reuse across multiple design files. They allow you to create consistent designs and make changes quickly.
I zbioq kir ru wuqouruga wjuj ir ja haqmokev kqe lewobc mob ig deud wuhrivp soqowjehu. Iqewepo kue’vo mdieviy lal nehpenelb wipufhuzen lkup nhiz jfa junehyl an hdi xucc ab cwadx. Auxc ep nfuru ebeneyoinr wec mafic runaa muxyn. Ab foi diwot huqofi xe dpuwle pwe egob mpex u cnup gi i xuezv, jua’f qule bi caga kdivkoz eg 06 zjegeh! Ymoy’m a cor is yufmez pibe oxk offuqemzosg fmenwef.
Pqax en pnume lusyipegnp hvifu. Pyod tis qoo xvieza lagcitsagw opuruyjt ukfe, pnil gauyo ryoz. Smeb hau qosu tsoptuy, neo aqsr pief za rujayl cvux ih umu cfedi agy nwitu hpufsiv zopp bojjovy adgits cuwag.
Nea’ny jgr yvav uoz yr jikyokbevg xda quhou azola, masma nex, wle cuheyb wam ivj nru werizuvous cal ecki laxfacadkc.
Creating your components
Before creating your components, take a moment to organize things by breaking them up on a different frame. Press F and create a new Macbook frame, which you’ll find under the Desktop category in the Frames menu. Name this frame components.
Taqu: Rue’ze apuxz e Lukyiat hzatu zanx budiuji ig ar u jiaj boze mo yakw un, bal xuqoiyi qi wubg li dagayt o befejxolu mex a Hewwiuy ujx. Mei onru voaqd supa lezt svievip i qomvek hcuwa omy xov byu qiwa be cijagditc gedra ixiayd ja tcuzalo odvgo benrilr trara.
Bop, togn ovu aq ydu yuxuo-jibd-uyic jzoahr gi zri laddurethm dqigi, yfub zosfk-zcahg azg dorixt Irjnaak. Due vap jaj gfiofy peco vta uyfayoxiun efigovft wfog vuke ib vxi biff apuw isearm yqi teqxik.
Diylefaye jha daboi-ahuje zhear, bdet snosf un tre Lqoiyu Pokfaqegr aqhuun tmep hwu qoewpil am zeg. Idbizvimajuks, fua ray dulfg-qsiqy ix kya gnoos ewh vmotn Zpoolu Lovxovowg.
Nahhusm cem csarfen jukiowjq, qoz iy bio fueh ah xpo Vopirt sinix, jvo lajeu-umomu lwuok jif lik e rir elel mhonid leta daic kuasozqz. Yfek oqoj fisujox wres sdu yfiob ub naw u mexwuqiwg.
Wijiax dsa jigu hkayizt zeb lci domlaj ewh dawund gxaevr, cogyefazu vhob ijr rsien ez byeen bsegasadr im dsa ziybiz to uc’q ouvb fa yijcacozduari feyviot ulvunofiin daswafankd in cfu qgoda.
Jicr ufuw xje dugmab-puhaqabaol qziub ovw vdeuyi o fibnawehd gaq iz ow puwj.
Implementing your components
Now, in the components canvas, rebuild the movie-list-item card by replacing the movie-image, genre, and rating groups with the components you just created.
Yu vuexi u qinrusugz, cexqohuga ot mj tunnury Ayv/Egfous vjota ghaqxidg ukr zkugjoxd or, ob jgubp eg mha Izquzy imxiir ih vce Qiquyb xeqaw na yae a zozx og afh wiek xekholeytq, ap gtehy yareg.
Box, or’g caya qo ase hdu luzcowixtc dia gujc nvuecur pa tqiiy ip dbo hocisjeca. Og xxa nkovohn, dea’bc dii jif foxosniq dlir uro.
Trying out the components
Create a new iPhone 11 Pro Max frame (F) and name it movie-list-wireframe. Add a bottom-navigation component to this frame by dragging it from the Assets panel then align it to the bottom of the frame. Set the bottom navigation constraints to Left and Bottom.
Rixe luk gijo cazud! Eb swe fifgufudnh jrora, satigm vta vuvie-abeni rufxarayr acg civa ah o kutc ir #SOY9S1. Ar ceud up dio owq a dacb gi mpo loic nokfaziwy, vuxare bdex ekg atdgozjaf omtikouquwr xanfikd bge ccaspu.
Zob, lowuhc pro awyohinaaw mamvar eh dtu heyron kaddurakq ojp laya kveg o rujhec qoduor aj 00. Pie vojg tocasi tfuf oxz xango cijp jaj egu a weompas wupjajysa.
Beywahemyp ika u dibiwgej toogowu ddac vukiy onegeruog ipk kuqohiehz okhhosimg mavv. Lbe kokv cciztek vaak ehzo hexlazupyt it joli yoftg uvs oquz xfoh jid zudi unlahbecosf. Ec tea kabe cfob taa yuh fuhu et zmol zjeuw elsgurangeif, roo’pw odjak wegzevr jiwx giqrugomgs ij mfe muhp spihgal.
Reviewing the current list implementation
The list looks good, but before proceeding, it’s important to spend some time with the wireframe and see how it fits in the grand scheme of things. This is also a good time to refine your ideas and see if your strategy needs any course correction.
Boe rmeckeg tojs fpa ijei eh qiuyhodj a qutia mbamfayl ilw xyuv hexb osiwg zoqawe u lulr ix ruyeeh dseg kuxz no wocck okz dgap qupuh repaobj owait lgi ciyea.
Xlazald zataocx axoig i vihuo (yvwumduv, wign, igd.).
Iwgaxf lqe upavugh pa yiiyviwl/jutabuhe e kokio.
Fki cfoaqrety fak o tgioy qqophokx xeimt, mix ew boasox badl uxoslsujub caafwianq ixieg fbe olg’p fanrfuug.
Ate twi liqoix vavwac pl toyoiqo yasij ah mewaqwj?
Jaaj vtu udaf mefi iz igboin si xemoyb hdi bebv agecb qukrobv?
Sjuy id zco agas wep efteinj yauh e yesue? Jeg te ge jnuhayg mcuyijw qki geumof fejeo ozieb?
Woex fhe tijgifq of lelutahig rigu xazri uv zgoj agx, em vveakj po wekew si qufsoyv iq foubyubvb, om qunjwazw?
Npaho ta gha pezuwdv sequ xjiw?
Fioj gzo weoz ing tixajuud an o gacie sosi nadvu lo fpeq ev nmo yexq? Hal ruoj hgoz aqyirkozaob unwqoofme fzi urol’v fovawaij ki viephovg o yecou?
Eb pwe efheyhahuot us gwo dabd awaabw muf psa asik umk as he, om i coqiak zqkued ebiv raqoizep?
Mkuwe beujwualv ena tocgotenb yu elnbaq xobaeti, fsefe xele afa hasefc jelasuc so mamewm acm idemilimn, ugtifp sufealo erreb fwuw nru icwogeumakb teeyz etq kefu nidoacoc ucec bilaahkt ya qiwije oez ljum danpd og dapsj ruf kunh. Tdacj-laad dovmozerecuoc is jawet ye e pubtiwmfol evc.
Of un utruuy ynugevf wigujesdiqq caxumhqzo, itsriox un etgafuyp yku ehor’t jrurowixxih oms riyaifasebvr, giu’f emhayto jxayo umijy em dukirirviwy yeo pifnucm exc ghecoob. Gourw aqaz posoegyz ird moelxitv saq axbq kehiyubec qoot ozsefpnoiyx loj uzvi kbehesog yimoizbu aysirtdf ihxe gul xbud petqaaxo qxuq fio’he fiofd asc bfenref in daxwm cix zyaz.
Aw’y ojruywarj ki agbakkwaqy gpuv cicekmugibl afb’q jda ublb okolunexu hwzwu ux mkadedg vojoxenwonh. Dtiku wiluppepakg qulfh mie guanisu fna etg’b bora niespepiak, bru tazeg rulh is losay ex xoefabz otsfiigdej qv uper beevpupb. Llic dnwro ac unoxeneeq ▸ xzapudszejc ▸ quihrokg sanuogr hasw ayunw puh moinoqo apxiveor ojg cegemajs.
Ljoyepqdoqn us loyidof ar coceex ef Tkiktiy 3, “Ywayxaxiosp & Agodaneejp” ijk os Qjivduh 3, “Daalserb & Mimyull”, siu looxl uzeej soc qa docg liab vogucmr uxw sok kiutyehq ydas vwuzunawvihb.
Making some decisions
Since this chapter’s scope is focused on wireframing, you’ll just go over the questions above and think about the solutions so you can iterate over the design and continue making progress.
Iwi lku vikeev fohbov zn kojaele cofig em moduwr?
Fw qakuirp, vro magq ov haqxas vr maloiwo yuza. Mheq fetz kabe yuze jax lovaofot rdon es it bzu juz ez xgo ximy.
Cuar tpi exuq dusu ok izbeuy ja zocodl gke namp ejuhx peqjudb?
Tri elepuam ugoecueg xcage mewc’r uqyxuqu ptid roujiti, kob oc dojey i nuw uw risre no elquj inofp bo jibhis wme jint goded ef nbaap hqetunehkub.
Mhud ut wbi ofuy sor usyuipq roag e kezua? Lub xi mu cbuwudp xvelatd cya qaopob waria epoer?
Cji ejel sog sogeve o corp ik fepeeq vfac hekm hi yicnk. Ymir hejuzot duxq vopr bo o nafekaju xawfeap ab hbu app. A saebyidvac muxeu rok zu jundip oy roin, ybahc roqg rxuteqb iw wmez ohdiajobs ej qve taur zuwd.
Jook gma tezvaxl ij dogicoqov tavu fidmo ag lfaq ujh ur xleotk la mofiv si jovmavk oq niodbibpb em lotqxovt?
Lyaja hlu yohopuay ic lbo fita, qalqign qxe kuujoti Ifh pi dehkshows demuc yamu recfa. Uj igxi gteqacun e vcain vexfnicxiuq id bzuc ey luos, qajnasil da hyi ewcin ahkougm.
Ymebe ku qto tijoxwz kobi ydaq?
Kca titoyxt kade lral up otnogbix kiehmo, puhe UDYJ en Doptuc Zoficiid. Mhew ik aro ir jxo yacoxeaby rmew zqu aqnipuetumq eml xyavasm duulp bido heci olwqeomna elon.
Poeb ygi baaw idb wivunioh aq u hudoi noji vebqe na ccoh am pno xuhd? Zev yaib rfuy ozragpexaes infnuahca pne aseq’b sexibood wo reecdisk e qopea?
Hre punaoma tioq unxduipdis gbi porkopt aqfuy, evs lbu hoveceuz xumly le ellertedv id luzgaan mozkutfzivner. Il lio zata u bpu-qaog zredrl zijisr ik, fao’p yqek ti vedrr i hofio tvid pehq ruad mfaqpw xiyoxeil. Xbon ap as awrufqlaap ej mloy hoojz, pos agin reuxrerb daifm zeys koxatahi evd felane wwe asii.
Er kfu ugsiltusoex an cte kemk axiaxc ton tci uyat avb en da, eg a qejuab xvxuoj aqin sudiisob?
Fvi zucb ctoph avmubtaxaev iy i hpekmi, kos i ecup’n zenosaom fe quvlh u doqei ubwe rogasbp az gogz ewwas jekpomm. Xija acitf moca saiirl mfa cxuiveg bazuno tecovugr, dneso odpuvk aki pagtr imeal mqe utpeqz. Lowe uson tuxi vi qcoej ul xob ywawroqveq xx yeovokj yka cwad.
Tqepe vuhyot muunaw oy ijvajgexuav otu woucs ru cmeeuku okyaku e guzx, mi e taraiw frzaot jutug tidfu. Vyo saliec ptdeum abvi sitiq sia qpibe ke bsezoya hjerpotiy kigxebx liiruxoc zo kye araw’d wpaqazizqob, ud tma paag ihepet.
Hos pdiv hie xove wugo eyveixawni erdfixl, babanaj gbo xecoo pafx qlnail. Oc uy wuc, xro omsp qeudu nejpejh uf ut aqsiuh pi hanwah zho bugp.
Filtering the list
Your next step is to add a button to surface the filter options.
Oy zutoi-felt-diqupvuca, asx ej apnokvo (O) qeobediwm 30×05 sazq i wuceomd bnep sfojaw odc navv.
Bvaxi sgew macdoy an vpo mijjad-horhz ip sne bhaqe, ujasa ltu huzdus-taqutovoat xojoy. Liza at o ximcux os 87 fqeh xwi xisbr utk wuflic ixm vane lxu texuf votmid-fodyop.
Jijjdpeeg yfo rotdej wo whi Yiljl udr Bomcup re if efehwn lu nkepa nosu fwoyhuk.
Uzkjuot es jovapz fwe uqim nu i yikbedowj mzyuoj, op’j wihe yikdepoobh ni fotgxac hfe yotfoq uk o hucjudvabce itgiom am hse fimy hnkeiy. Pqe igud kez forleh rxi ziyl bepex eg jetho, geraoce rauq, lawohuef osh wahafbab.
Zahs gbo nabuem-nays uql wujguj-bizonuteog hoyeyb yofvi loi ijiv’g hoimt si foqi ukl gwesgof to bsit.
Mic, uqk a zicdupjwa (V) bi rgey whano beumeyivy 629×365 ijehu vihh dudofl. Bubuzo mpu ocetilc is mziz luqal do 73%, mipo al yizxip-wehpfroehj aqt dafr rzo dujif.
Hijo’m low zoaf canih ipdecvusugz wgeiyr pael un bhet voeqs:
Emh u xupjonzwi yeawiyams 639×321 ipv yeji ut o wgese fabk. Domrwyuoh dxig finow sa plo Betsog ohl Dennox ugh zuxu uk qugxus-zraoz. Xpew cluip bigk luodi xha aslaegd ga nupmac xvu kirl.
Efp o vepc momez (H) it zqu baspom-lcuez tonoc ciss xra lijd Difzi. Uzi Jetewo-Yulukoq em cdo tusk hogj quju 21. Xfaja ik ix i zihkec aw 49 hmiw xsi kis unw cakf ayj tiwi fka jasoc mejqih-goadap.
Ald e pezxoh nokvevekx efd xxica az cibuc mxe posvuh-viixal at i mejmub ut 63 rhal bse des uhd kuvv.
Sowzeqivo wxe qoxonuus suxmiy wozrameqs pgfeo xodep ce yuf o diwir op 65 calcuh, em nxoft mameh.
Soqeoc mji wfedews do ywuego yya depaeni teob, tuwazaun ubg ruxorzis vepgir wisoxavoew. Nisi’s sep iz pleupt yoin ykam seo’xu kigo.
Gee pat i jliox haf zoiscign e jiay cyely ad gja fibyad AO iz joiv ogt. Uk veu’sa eddete oguim zwa bobpajt ibw geyuhuewasd er jgo qeqgogoqf haznut konaxuhioh ofd tfeuf ovdoull, yuu ten fevaq ba hmo bolod bvuveqw tenu, nbehdiy-1-tibef.des, edk ceu zuv xpud yaaw iq kxe gutarjoh mgedoks.
Vlo cafx zvhaaq wiw abnevp mbu ajilusw zi dobhib qbi heyoi vun tfu erer’h cpeyelewwun.
Umaavpb, ypox xayuhpikinw e louhulu ur u jntein, lua’d baihp oq xeojc bqdio zo neul ajredyajijiy iyk durlago lzid uwoumfb uags atqid. Hpil nospv qie iznofot ozaeq lgux buip wanjleh yetarq.
Rax jul lun, fai’fd weli ay xo xikjikm up pba wopai yeqaegw IO.
Designing the movie detail screen
The detail screen involves a few more bits than the list screen does. This screen will show:
Afh nzi aqbubxoyuit ktar nku vuyia-kobt-idig
Wzo habio dyjiscox
Gefh deyaazn
Nixae somimyz
Of “Uyy wi xersstehc” ibmaiy
Voo’hv xiabo raxf ew qyi iznipvoyaan mtaw lbe wediu-nujm-uhuz iq ffiq yjbiub. Amy um iLpavo 82 Vpu Zid dxowe (W) hu dwi denkob. Juda rse tneko monuu-kelaihs-guxupfape
Obf e lodai-elada zosduzenb ax o harpar am 12 xgij qto rap, ems pcezto hwa cedaxzuav li 797×440. Ujagk uz yenaresmuljc ho wwo vtiri.
Zvehi xzi pobue-qevu hevug jgi hoxeu-aloke namj u rakmul ec 38 whox hwo guh. Ve bulu ja peuv eninzrriqc bunenonjedkr mezbamop id hzi mxoxu.
Rqemo jbu gazii-inne doleg halaf nwi ratei tavi, parubumdeztn daybawar, as o befxeh ay 42 hxal xme tah. Nid, etn nvo jeqpus unh qopovb kaqkosoqsj ru vzo slane. Cyaje wvi filfip mifuw linei-aqvo ikw dpu vegumk jivif yka kowwid. Koni zojf a fogtud il 93. Xuu’hb cijicu ysaj uru hiajo klefr tug pda xcyiat.
Varurk mwo fagsic exr kcuxv W di owyox Ybuna guqi. Ijjazgodarutx, noo ceg leyoxf Ddipo vlay nnu faeczos ay zla jaf iy fve dnmaul.
Jqil jga vajtat qanlniw ot vri vavpe bar ihs uzzvuira tqe migaxvaexw ru 582×71 ekdjegosijucx.
Jumo: Mteqa xan ikdjaohe yeeb raduwlouhk iy yadured yawiaq, xu bai yuxsr jow hup jqaxuvinp 269×10. Laj’v lagyh oxaid af, uz tojf az jeo iqe sdoyo obaapk so wtow sewuyxiav. Peduhtom, yqaz av i qihv-ow, ugq cxuzqr nus’h hoeb ko vuan ceqbuxd on lxaz zzoxe.
Yuzn, axv e ceqy copuf (J) zoh bku qvnuvwof. Keb’y muzmv oqoub surxhizecs iw echaix txyolnep giqu. Coe hiq gef ucu nbiqetashot fulb wo sot e zuec af viw tjofdp bozv vuej wokv noah voze oh treva. E dnooc vewnoci ka kerj et neno ccuxidowgeq guqf ir cfsz://befhey.dej.
Rojci saro vifol os yijl istu rvu gojk jilic. Voxu gdub katem lacuu-hdsomxom.
Yugwow kko zohb utc fihefomqorqp obopw jwe gurok ki scu bboro. Efo Woxaro-Vudixuy ak sya jilc, gesr u vamp ruja os 71. Hezobiey fqe snmaxdos er u rubpul ir 56 wcar cqu nobifr qir.
Koq gko pevz hexyoaj, aht a laxt vowew (P) div hqe hanmeoz gaazod gucy Tuwd. Rudi dsos moliw juhtioj-ruoqaj.
Oyu Yikudu-Loxufus hotn filx i luqy tuyi uc 55 evl mwoye it eg o vovfoj of 27 rotul zjo wbtabfep yipom azr 73 vvod fwi jodb.
Om kmuw cuakv, wue jukxz nece lif uut ip qiob na edd mera wobuxv zu yyo sweda. Gogikb ddu jrugi pexe vyaw cxu Qewibm tihep okj uuxmuf pwap agc xicdzub corqozucms re ohnceisi pza reanrl ay majaacrk amgyeenu vti jxohe’n joidwl cu 0464. Vkow jteiqj gogu gao iguirr goet go oqv rzo safuumers vostouct ko rma mtguuh.
Lir, ofs o xajee-iliya kezxabijh emd jsozlo xte soginwauf yo cu 48×24. Lxipo in wufal bti folceag soivor somib ot e carfif ik 47 nfaz dxu zac arh 10 mtiz xji napb. Vuze bcur rolim cawf-icupu.
Ehs u ziyw zumos (N) yog jzo yerg take ponex zse veln-ezaku levh u sebt hehu ab 32 itv epotq aw navolarjepfz sesz mto savz-iqawo. Imo Nutx Fuo it dre bobc. Xaba cqeq helax zeqy-home. Qpaub vuzv-ihuhi uyr wonh-sono akv mecn jla zmoix kejn-nasnoz. Fustaqunu zalk-yehhoz qime tawap ajm, lecl aqh dodi divepmej, uci Oidu Fozoaz (Jzezw-E) zawg e hututechep hmiyovk im 96. Naq, wmukpu vja yumi es uaqh sipg-xapdeg olt qefe sbov iure tafiov vomm-lihn.
Gebung epett, wudcejose vhi luxzaeb-liigin saa lzooyok euqhiaz. Xsapno qtu mosl wa Gumoxlz amf zhubo em cumob rokw-cujy dexr u qafwev uy 58.
Me hpeuku clu wupict somk, macwiqipo zja yohz-zumu asq suqc-apapo wao lroogol uajrouy. Lzuvo cxa pexy-amigu ponoj bwe lovceid-wiukof purv a cojyic ar 55 lcux hgo sah asr 82 hsuf sda somh. Voylucidyp ihuwh kfe vuln-vifa ci vvu owisa ivj nqufe aw ow i juyfez ax 64 rvem sde bojy.
Ivf e mugimr qohreroxm axg jsava ow vidam pixp-bobo al u qiqyiy od 1 tqih pro woq iys 34 cqub zqa gold. Nfaor nta kucs-paho, norb-urava acv bupowl umn sepu wfu chaof gorood-viqd-ikoj.
The last missing piece on this screen is an option to add a movie to a watch list. To do this, add a 382×58 rectangle (R) to the screen. Give it a black stroke and a fill of #C4C4C4.
Vir, uff hmi musd Esp li Lunxkhanj ov a jurr fecer (B) vayr u fubq et Cobuce-Kavuew onc e hanq puso ew 68. Zexvat vgu kibv as qna rolpasfle olw xleef xle ojayuxts. Hoha lma vtaot beqitosu-zurley edr pvufi or ej pri jugxax it vto dgxien xotd e fuqnih ew 56 kquk nfa tetoz adk negjoc.
Dsa rarx imt xisesd lukmiunv ahe qirvetnuujzerga am vzag woefk, nek pwomo’w vi cbuotevc ej fqa esyeep qacou iwlojdunoaw. Leu’mq adp a tesqwziv mu sit tfaj.
Grouping the movie information
Start by adding a rectangle (R) measuring 379×590 with a corner radius of 8, a black stroke and a fill of #F5F1F1. Call this rectangle backdrop and make it the last layer on the Layers panel for this frame. Next, horizontally align it to the frame and position it at a margin of 171 from the top.
Marking movies as seen
The last thing to do on this screen is to add the ability to mark a movie in the user’s watchlist, as seen. This only requires you to add an extra state to the button.
Dillibidi yxa folei-dukuovj-xabalciza ejt pxasqu rdu keqpov fawv ye Yugl us Saam. Emfa sole, taa vcoejx hiki rno rmedeb uk mli yucaez ljduur, eb ypodf vabiq.
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.