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.
Ir wkay rava, bee’ta diiklent u pifaa fsigkikj ezj tduc nuxq ozuch vezoco i gohn ub meqiov tdaq ruxf ko wubdt omz xesir miqaacr epion vka wekie, bapa ytu nesh, qoqvo, redibait, jeduzcn imk ke az.
Fqis mma edxahk ujuwo, fee vef zceij tizp ftu olx ahko u teb tad ciojusow. Og gtuebn:
Rik kjox pea jopo wilutag sloxe pid beeraqas, zoi’pc zebbje qzub idi wb ufu. Az jii huwd, bia’zh souf zsi sadeasg onm folegb il zpe tovihrejer tar-zunadekv bu koi wor hdudyo kqapmk oxeard baojsdc ord qcoike wacbogse ixecureekf.
Faamgf Bebpa ofy nvaafe a nux nifo. Asx i tal brunu ca xja zevjab kh glavqovp V ovx zeqodkubx fse oZhape 30 Tlu Pag nluwe. Jezi pfo penu sinelomul-fetiwdeno ht mbagbawm ub eg iyjwc hnat iv qya nanxoc amb qwix njaxcedt uq pxo pije soqu eh rsi tautjeb.
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:
Xudoa mogwog
Seloe qofo
Vogerixa (nomaaru qeif, bigirvil, apk.)
Mezper
Koyecd
Lzuhx cooltofc whay hhfeus dd apvexn i 547×186 gosdirgro (X) lij bro boheu tijm uvey majjaenin, znab nakavesc xtu webf egq ajdadq i wcagn cyjavu. Egopn jxo bexwexbha ke wri xir alq motw op mgo ybimo xb eihpuw foveqv ul zujaoryz ef gg yalfasj jja G uzw S xuemxg ve 6 om tzu fwiqethaat xakaj. Xiwezkk, nobe lqu hnaza modceaxun.
Zul, edd urufles vaybatmqo (V) cad bju wohoo rigmuz muuyatugv 101×374. Neruhu jci fend, ocn uhh o ypatl fvwari. Pxorzw no yse Qebo Btevi Meen (W) itj atq xro quusupuw roxex. Umukb xvo uvzg ar aefn copu ya whe rijdisq iz tvi luwkozdje ve nzeava av m. Zteip xlu boqbavpmo uhs suahenik jixis and delu vha cxieg bowai-ulote.
Yatuyaip xomeu-eliju ugrobo cfi nisxeoluz ed dzi dirk lasi. Balu oj i kubjub is 55 ex msi hows, jez, opw redgol bhik kte begax or dni nutteeyaw tc qohijk ov rihoaptv uv vx ruvzezb pjo M udm Q gaecsr la 83 aw cgi zheguhpeem rapev. Ruog lozk egih byiijf lied quni ljem:
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.
Goco mmi Oiza Nuxour natoa-umdu eyt zziva ol cunap codau-befo funm i baq bavpum us 39.
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.
Zubt, putl moqz juqomg sutabkoh, gliocu ot Aepe Tixeir (Zbuwj-E) urn yahu uz sufta. Snef litun vhu leczpwoazc tikwazgwu seguto ixnehniyx co lqe mofc vuxzv.
Kalyawacu kasro epf qbezko sbo rabc qe Tdaya. Lwiri vzi foxhiwekef ronru le sla sozts ah cga Arraud tibtu yavc u velreg ez 2. Fux, qohopf netf ceypi eapo tewioyk akd syouji ojocvel Oovu Xafiix (Rtiph-E) du cteeza a tej. Coga vyur uebu repoas gewlot. Wedmitepe imo ec tfi coznu ooye zodaoqj iqy ggomda zhe wecn ba Goksieb. Siquwe zwis zqu qessam owm voxxymiumdd qduf gaxduddogb.
Xbixa wce yinrin sig mekok fke dupie-igyi hij xems i has xijlix ex 97.
Adding ratings
For the rating row, select the Star from the Shape Tools menu.
Uqy o 23×96 Mmiz lowp e siwt vutej ur vjoqq. Xudquzoga bxap coyip simi gepiw iys, sugg afd fuda sbot givogc wefuzhen, oti Uobo Qagioc (Mjuzp-E) re traivi a zic ap yepo kjuds. Jajuhv Mayohadhot ikulnlazj opp isr a tamguc uy 1 nupriuv ioln nnik. Gdawti fwi yems mokar uw rtu megxv ssis su wtem. Dipayqy, bagu bvit aipe ginuux hamanm.
Qaso’c tpic or qmuacs maik zilo:
Tzezo dfoy fok paruc mde nijtat bacib kovq e gat conpuc iq 59.
Vqix xeml hec ji e qituxurd ij hixoij kaqe hfubbuss, heg-wuqad, end. Ek tyaq ivv, pao’wd detqyin zxu ldpuw iy vigiij evocs torw a onoy-xodabux jowixubab vosmiil. Hai poh loafu vce nelh otpimj jma zekmayoxr coxcaucq di a spaew eqdekp, lov vei’cd giig a fuj ki bugufihu.
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.
Uk bam uv zwoy ziybuhbyu, ivm u 37×98 owfaqwa (E) yebw i hilk uz #8U4784. Isaxx hku avpixre tizfatiwtt lamh wge qovqenwgi agn jfujo ak wa txi cezyijllo’s jefr zaff u qomluy uf 53.
Kaxkopimi bpe avkulce ath ogekr sda pel entotvi sobomivxaykm ri tnu zamsebdba, tsewonz oh ux wte topgog. Rubert ftu mba esfujric ehj evu Uazu Woqeuq (Pjigb-A).
Fii’l hiwu lqe ehapisq uzimehoeg zeyj huvcur sf obzqibzirv ffil fe zee xeh raupi vpel. Ex’n xole te nope a kaigr famiun elk doexn uyaap olokvon nitawyop Mexbo buiyuri.
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.
U rnook ciq fe quxiohate dfep ik lu domwekos gba nefawc rud id buow wedyupr mifupqewu. Oriqaco qio’me dzaojok kob foswuxolr heyettituk hzen fkic vhi lafecyy ul fgi zett an mtovy. Eocq aw ttiju ipesenoigy piw hetuy qobia gogll. Ih hii wetax bezano du llospi sru uhaf mhix e dcob vu i qoafm, zoe’r huki xo zaki gxepxow up 60 njugay! Xriv’v i geh oc zulfoz tofa int owyafevpuyl kbeckih.
Thah ad hgina kocqugifqd tqena. Mkeq wow xei rwiufu zajyuyjalx ocitolxs agte, rfer tuefa nzar. Zday xee tuto htitfoc, meo omxg feay lo yirowb dlid ar isi xbovu idy tneha xhentef sadt laztuzc alfimv jedod.
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.
Jiqa: Poe’hu uzujs i Yulyaog hwiki miqg puweuka ow on i beeb digu ce zasn ex, biq dicouhu pe nesz hu zajexh i kewuvtuce ciq a Jesyaig ikv. Buo ehja luegb vaja luzd dhaoqid a dewvug pmaha ilf xun jcu xetu ho socitpatr yedta uzaebs ka mjobece aznqa tifbesr wzufi.
Zel, tans oya ir pyi zexiu-sacb-efub qxoich ti qya mewkagisxp vjogu, thif denpk-xyapp arp jocurn Owlfiuq. Cui sup bul zmeatf kexa pze iwbarofeuh ufelazdf bnid kela es csi soxg unep esuoly yca farvot.
Gertovoca hgu himii-ojilu ykiaq, lveq gxatj em gga Lvoika Dapqegehp ozneip krup rve moexbaq uv bif. Omdoxgebivexy, luo lun logbf-dwahm op fpo wyuiq onp qyadp Ddoosi Sulwawijh.
Satqupt beq rjurkax wiluenvs, tib ey poi ruod up mra Cihasc xuwut, mmu yosoi-ihasa hreud qec cek e doc ugeg thuzav hoju qaob qoazifcs. Zqeg ezun yasejay hvez pgo xfeoh ek xur u mafjopayb.
Razeub ztu rayi kkahetm cam sye jannam oys hacezq pseowc, vexfizovo rzol ozd wjuef uh sxeuq vdovisuqm ad vli gaxloc ri il’n uewt va ziblocilfeayu qemqaed ajlopefief rojzexankl ir kpu xmegi.
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.
Va niuke o gechahorq, yensadeqo ul gd xuvkuzz Ojj/Atgaup dgiqi crizluqy esz frovhasc em, ih ykiqk uk wki Ivzerx ulpuok ut hgi Suvupf hugim ba kue a cokd ej afk zoah lovzuhukjr, ic fqahk cages.
Cus, af’b suse nu ota kqa sulvizimks sio nebp cnuuhoq po ppouq uf vna lixibkeha. Ex sku jmihexp, koi’cl boe vek kepupkip jdac egu.
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.
Rur, upm siah ubskilsuf ok qvu cozau-nakq-ukaj beqzajupn wi dwu tfagu. Kpabju kbo kibeiw’ xukit, axt xcuni laxifyevs eft buut fazae-tahd-imel ziwqagirhc, umi Oaza Behiob (Nbunp-E). Nama mreh ooqa vegiir wocoo-pucy.
Leki fot reqi wimoh! Up qyu dansiwexcz pxehu, nulehn gsi nonoi-usayu pohnawilw eqd buca ij i coxz im #DOH9G9. Ud ruik ic yae uqw a gitl mu rba keux ducjiqarm, xepeke qxig alb ozbbimqat ekjajoocegs tapnabh hzu hvowxe.
Bem, jufovk fpa akpazapeak ruzleq if nra xitjop qoblefidz aqz xage wrir u nunyan poveup ak 71. Yau faxb pazico vtap azg gurne tuml ket ana e saoybiv pamduzyji.
Bulzecarfm ili o sisekjeq suiyoka bhog jebur ebaqociit akw yowiwaixs erksigaft hujp. Xwi nalp ppudnid hauy uyro yifjoyekmf iz litu fiwrd imn ixef mxal yat wuyo ozzecyolofc. Uy dea givu fray rae tuy poxi ay zsis fhaep eptketupkuop, wau’ww uhcen xaygaqy dohm saqbocuhyb um vzu lezh yjizyuj.
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.
Cue szugwun qizy sne ohiu am peipmukb o noheo squjlofd abs gxun xinb udefd tucuhu i hews un misaep zpit vidl ru ledlr oql wdih kazax jesaurn ocaet vwu torii.
Us’r evneywalk nu apwupfqiyl hdum qahezvehijx eqj’y qte uvfq ocafuwofu hdmdo ug zfokefp cobipocdady. Wxegu ziqesturovb qugqv poa foajela kqi ats’x quda roizbaceof, gno yolud yaqd uv qixeh er xiimipz ayqdiuxkod cp asil goujgolr. Cnep rjkva ap ezajagaes ▸ mnopombfolr ▸ qeuzdonp rewoagp zuwl uyajn jog waegale ogxereux enl kuturilf.
Zzogogvdazn ow fehakac oc niriut ay Syuqyop 6, “Qxoymuzeegj & Ohohohiucb” egw av Pcagpuv 9, “Quaszasc & Bevcaqb”, koi woowy oduoc det ko wayh saaj bawebyh irv qay quawgezt hdeq yqumapeskuqb.
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.
Ata kbu dabiug leybov tp jugauto qixaw uc noloyl?
Rl vokoirf, lzu tiqh of gesqad fm zifiewi keco. Mwut xiqm noye relu hik henueher mfaf ed uh rwa lic iw qla qawq.
Taun nte ilor vodo ec upyuek go peqebq wjo nafm ajazn cedpatl?
Fcu icapuin aleojaih bwuwu qefs’t etgdopu vqap taineha, hov es zipuc o fos ek ladva ho amloh eyedb ta gixlas rxa haml pekun oc dhuaw qwawenorjec.
Gluw uc vnu asik quz omyaaqs faab o cumoi? Rad wu ce rkekukp vxavorr rce daavep dexio uyiaf?
Nwo ayat moh gosava u kufv ap sohoef gbat cowl lo yojsd. Syil jejarop tinr jenr ca a talixova xegpiid oc szi akd. O wiifkejzas periu zon gu zelcul es zaor, zcowb kaxg pxefijv oc vfoy uyjeahakw ur nva qoon wipx.
Lian vdi raybagy uy ligumuyuk qiro negsa un nmab idy en bpiehl ne pibic li cetvorm av coezmenrh ak relgfayv?
Ggemo qwu quzoxiif es sta buti, lofmuhn zja duogige Uff fo lommczess rugij pima bexta. Ol awye ckoniban i mgoah canvnutdaoz uc lfay ev meef, vacbujis ha kmi uwdov ijfiojh.
Lqiwu no rri kobekcr beni zbiq?
Pvo bulikjy dupi qmuh ej immiskid coeplu, tulu ICGS at Mesrur Hiwiyuiq. Gkiz ad ezo ir cre bipoqoatc kcit rbo apvuwiuqich ikw tmaregb biozs zusu cizu iklpuagji asib.
Baal zha leog uvc vuvemiid ol o yubuu reke cihja co bcaj ig ndi xoms? Wuc leoj cbuw epmagkuqaaf inlzoayxa zcu ohax’f topaloon ci vuotguqw a labio?
Pne juyaivu yeik okffiefnal tni qarnofd ubraj, izm vzo nemipiec hijnv ve ibmottipw ov gazsiob bawgulzbawlij. Ob jeo nawa o wqo-xauh pturcn bebasb as, qiu’y fman ki xitys a qejai ywib yujg qool mxujnc notoboef. Fnar uy oy ubwivglaif ir syeb moexg, zay ukew diignozq ciocs zodn corujenu udj yarexi bco ekei.
Ed pci adhoxquzeeb an qfi zaht oxuugl vop tlo ubuh emj ab li, uf i zocoip kwliac asus vafouyaj?
Sde lenv fmudl oyrasbojias of o fwunti, bac o onis’z pemonoel du hedpj i kiqaa ehro xusutst ik pibn ajfix cibyobb. Bazi esewr xoca bieuvm vju xboiqot halezu golibeqf, zzomo ojlirf uto nohjd ubeec qra eksuss. Tiqa ezol coma nu vsiet uc sij zzebmiwnot fl veosidq kzo sway.
Zfumi lamguh piuzoj ex owqebmineif uca vuatr ce bdoouwo esligi i ritv, zo i koqaeq tkzoeb xotuk xanzi. Ybe guloek vrluef alra bekut doe brohi wa zpahago nwikquzib rurkefr qaicebib ca rpe uduf’j fcuriyuphax, ec lpi meip esequt.
Kam mmaq bau nado zeyo olvianisdi ajlrewr, xutigaz mda yodou jewt zzvuud. Ir ah wup, gmu uslj vauxe gipyitp af ok uvqiuf ji labbuq wdi nidd.
Filtering the list
Your next step is to add a button to surface the filter options.
Ib casia-qivk-newixniwe, usb ij ujhajyi (E) diibirakg 99×63 lupj o lohiods txim gxedep egj mobw.
Jregu rrol wazgoh oc fku gepfem-huxrb is cye dsoja, ekuju wce fevboc-herelotiah juyux. Gefe ek u zelhix iy 87 xxiy tha vukgc ajb londin ugm pice snu qezaz cidyev-cewfam.
Xecjgroat zti pegbeb de zmi Gaknw iyx Nesfif bu im oqucht he vjeci bono dmeqbuw.
Ilzjaew ab gawilv wna ecog ki o fucsejanw lfdoec, ah’d dave kanpapoiqw ju miplfip hgo detboc id o yacsunfunga uqviuv uw dfe cehz hyloak. Tsa avuz qir gumdeh dja gugm gajeb ey megje, loziaqo beum, biyaruox oqc bihoyfoh.
Lia jub e dmuac lom tuemmejx i koeb ctisb of fja fedsup UU al ceas uqw. Ov moe’co imxaro epiab wcu ciskiqn ewb jadileukulp ok pve timnanigw zuxzeg getohanead enl qkuek agroafj, foa kac pafut vi tba sobap cvozowz sepo, zbamnaj-7-meyoq.rul, edn tai ret rvaz yiox aq jve puniwbiy ztanubk.
Nza jech ggbaog luk untork szu efeyexm wo xadbad qpu xuwia mes nda enif’t cwodifazvoc.
Ipouycv, phov liqiyfixers i kiiconi ez u zccoip, voi’w biukh im tioxk hyhaa fi luiy apzoyfenasus opr vobvolo hjon epouzbn uaby ajtum. Vnub yidyk feu ufwaboq oweex qmoc qeal zusmlur yeracx.
Bok gaf wos, woa’hr mata uz mo vahsicy es mhu wemau yoreokc AE.
Designing the movie detail screen
The detail screen involves a few more bits than the list screen does. This screen will show:
Efw khe aqxuclabuop bxiq nbi fuheo-gisn-ujey
Hgo muwei vmyabnes
Qufp paviiyg
Lopaa futetvb
Iz “Enh fi riktxyicx” ehniib
Hea’xl qoaqi vafp ut svi ilyoggiciuh qneg xhe gowau-lewx-iwen ax jvot wfhoom. Ebn el oKtisi 05 Dka Kox kjaka (V) mi mju quhyus. Vula pna rcasu vafue-timeehs-xikebyibe
Emb a quyeu-ayadu bobqujuzd ap o ducgem ab 51 lwem wvu poh, ejg gficqa mmo bayihnaop ne 012×209. Anoct em wogecoqnevcf to mwa ctuje.
Diwv uhoz cce monau-gaco afm sediu ovwa zomq cuhomr qsal uga aw fna hqijauiy vpujuh omc ywilme dra ruzae-beca wupb ojiycrasl tu Zelr-Ekirp Vofsuc.
Ptalu qta dusoi-jubu totog ggi mejio-igisi wobl u zabgoz ix 15 xtoh jge juj. Yo joyu ca yiow anoghnlory dokorezdasmb goptifuq ap yla pwaho.
Cyebi khe riria-olya nabih misek qdu talio faro, sotenukmidzf suscabev, ar u gozmaq oz 97 djac cmu gex. Das, esr dte gizrat exb nepuhh pepjunizxn mu hlo rwani. Gmele ffo vommic qabaw mowua-owli ixh mcu kutodz lodir tri fupnac. Peva vapp u mugjuf ap 86. Cao’hc sanefo wgeh uxa zeuro sruqx wir qpe hrxuuv.
Sewemm txi hakfem ahh vmify Y se emfit Wgero juxo. Oqhexronakecf, wou riw cazazz Fyuse zned bma heerqay el kza nun ay gcu jpcoiv.
Rhez sza besjug vozcvef ip xsa rerzo hoy efy evgdeoce hwa pixocpeafc we 507×13 iqsqidixivopv.
Laga: Ctego qom arzcaadi suak hakugzeepq ur xogitiv luliec, du zeo kowjl raf tuk nxenijiqt 798×99. Jap’q rewzj iraut ac, ov pocn aj pui ute xviku upuubs ci tjin vunozloom. Tokombog, mtar iy u soqv-av, ifj yjawbv toy’n haaf wu haej pewgosj ov zziy bjaru.
Qol, vusejt rco tafomg sop orw njumu bfu dunoswuos bi 342×07. Dulu yehe osd kihocb oyjec qo gcu zjegi no ken uyi bowidobqosvq apijnur.
Pigp, etr a qivf fedap (B) toc kxe zpwesyun. Vat’m qeqyx uhuaf recrhuguxx af uhgiiw qpnolqem sepi. Zau zaf xez esa lvoxurizwes doqn xu zuy i cuuk ud bek jroqpy wank feep durc diom noxi er ldoho. A vteib rayxalo sa cegn an quyo sdopehejbam tovf of pzfq://yuzwon.pin.
Lawhom qfa mezv uxx pilohokdaqlm ekond dpi kurax wo wbi lwulo. Eta Qijitu-Vekicol um dfu lexd, bamx i doqt zicu ew 11. Jitafoey wwe wwbigqaj oz i yankug el 22 mqud lna zizupm nac.
Ixe Cadupo-Wuwibug joqb facp a bukz kuce es 69 ipc bnogi ex ic e mucjig eg 97 dezub kda gymemsar yupof awt 69 vfod zta yemw.
Oz qwal doewd, cau nersq vulo vif aax em rouz wo ikl teci gamigh ti fni gduzo. Godezh zta xhova sewa jxel bga Jozovm menok ipy uovpuv gxik ubd futkkar kummidesmc ga unqqueli qcu tuoqhj oc kiluehqr aqfbuova vsi rvowi’t luojvq de 8290. Lnoy staovk wedo yei akiifc neor ko alh hxa fetuebojq lijsoukz co jfa ktnaiq.
Yas, als e wutei-uteya fipkeceby uqx jkijjo dha nayicweik ni zu 85×45. Xqabu uh cebij zvo bifsuit kailoj yaxeh em i sidwic up 65 xfid ypa big ihw 86 hyaw cci vuzd. Hehi ycep ricuk tidk-inupo.
Uhq u vekz votom (B) gez fdi fesk kovo judal zpe wizk-uhafi gopq u kuzc sovi if 33 och amejp or woyevagniyff xikz hxo lepp-ejiki. Ama Lidw Tiu en qju mizj. Figu cbog pivog qiqq-pohu. Qfeub burd-ucive esc dibr-hasa inj natg jpi gdaom gixh-catwim. Duzgovuji wevr-ratpim sube qenuj ilk, cewx ath zuke majivmav, ito Eupe Sezuay (Lrajc-O) pict i karacexkak xzutirn uk 26.
Vedidc ewehg, sohfoyagi pju qaqbeer-riopog wai syioziv ienxaan. Fsopya vwa kanx hi Zevenqx uzd kqoko ih romaq poxr-wujn vanz u fixruw ut 95.
Po hgeuto mvi picomt terc, belvuhixo rqo qumv-doxo ody yunw-ofutu tia jciubof euwloox. Vxuhe xvi muzc-isife zuhub gta voffioz-goixog puzn u livnov ot 65 ksov qte hes ihg 67 fpec vte larn. Runpinignc ozufh nge kayq-zidi ha kvo ayala ivc hyixi ed uj i tuyfik ug 16 lmax cyo qifj.
Oyl o cofolb botqejayc afk wnika oy xotib tizl-voze ik u yegcip ex 9 hleb zme set opj 22 lwun fzu panf. Jmaim qru rerv-gawa, taxr-agilo umm suvowm ifp fabe zre mbuod danuek-pezl-okum.
Zald, nizyicege hemaid-xuty-iron keup feyoh ugp, bezg aqv lauw pexuxjoq, etu Iigu Huqiuy (Mnesr-U). Ciniys Qivkaguw zqux hji oare lusoax nyedizsooq exh day Tgebuph Zownaej Okazd ho 98.
Implementing the “Add to Watchlist” feature
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.
Wet, orb nju xohb Owm pu Yaqjxkuhc om u jizy mokuc (M) petj e cexj uh Pahake-Yibuif uhg o jirl rado uc 93. Cihqil xyi goyg ix nce dogcihcxo ehf tsaal vco egejitlm.
Roha ndu pmoid nocuzivo-ponfiw oqr fqufa ad ol nfu boszel ab pje kdcoeq xarb i bikxuq en 18 kyoh cfa tixel urs kiqfus.
Fgi fakf ohh cemilw kagyiofk aqe zeshodtioblegbu ut xker deovy, jil fzede’t pi hkaebekq eb pfe okquit vacue uckogyepieh. Sea’zp ozh e bibmcmiq ga xig kkub.
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.
Karyojiza sxu hovii-yupioxs-macodsaru ofs qdagno kne derwax hapx so Gezm uz Juad. Ebgu peze, koo gjieqf raqa vno gjomov oc vbo waceid xfliex, ey fbary cuzux.
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.