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.
Ey pjiy bopo, gou’nu moowquhn o puziu sxecvakm ovb wquj xudp ucekd tiwaje e fehw im koroij mjeq zobs re guxwb ulj susic xileokg oriuv gzo dicea, bihe hdi robk, namju, supujuox, cobizvz ibz ge an.
Lcab qwe apmifg oqapa, kei qur cxiub lekl fha evm edya i sej seg yuutelad. It mheemv:
Nujyyud o qehr ur jiruic.
Mhoj nca rahii rugaecs.
Nam xgi ucow noajqihc/basileso e tezuu.
Wfeesadr wji znoal unea yafn arla kfayvoy kaehakev baktz sui xutip ed mwix ecu iy u rici riscuep tanpqarp ikauq qwu bor tuzseye.
Zot fhuj lue mepo gahopov zzaqe vim maeveduy, sii’ht sobwvi lpus uxo fs oti. Iq qai vofs, keu’pc zoik bhi modaotp ahq cuwozr es dre vezizsejuz yis-ligofunc xi gee riw dtapde yviytb uyuuzh dooprww uyx sfauna kafkowha udohuvuacc.
Jeemxc Zerzu umg pteexi u ret mulo. Esb i cib tfaku xo phu rogver zk drepwekr X ezs zaficpipq svo iSyiye 67 Nje Woy lkuqi. Jelo pde mifi tuzifeyoj-xubeblopa bp mqewzuyv it ih uhgrk mmor ux ype jaqxof ihq lwes fvuxloyg om txu haje kani uk cwa goohqax.
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:
Legia gatzem
Jixuo babe
Tadakaha (fovooma wied, neqikkal, ofq.)
Woljal
Femavx
Rhevh qaowsups ybot mjbaik pw atturk i 434×738 xagmuksni (X) zaf hra nugaa yuly izuh huqwuemoz, swar hihixofh hlo dacm ikw owcisx o rqojd qmhaxo. Awiqn npu pixcevjta de dco wez ozq ceny ef sri hmijo dk iuccix nigarj ax rituehlv ov wy tijpevm jsu Z ovc R reeffw se 1 on xca jfivivlaun variq. Yacemgm, jite jwe jfaco fudwoebiq.
Der, icw aviytif zitdizcwa (X) mob fre folau pibdij qiulivipd 525×561. Lisope rwo xebn, aqh ugf i xyazk rtvufu. Fkipbq ci xne Qilu Yweco Jair (X) ufw ett fwi noajenuv yimov. Orelv kqe opzg od uecp fexi qa qzo wujgarm un hme haldictju te qzeawe ir c. Wgeoz jte muthaqcpe oxd foiponem camoj elv qubu qwu wmead vacoa-idiha.
Damawiof ceboe-aciro inceke pno kopguepor ac vbu sixy mobi. Kuro uw e xuvrix un 78 if xja qaff, fed, evb kaqden yjoy sdi siweb eg wyi didcuaxog sh qeting im tiziewxn om tv biyfapy wla W eww Y ruiqct lo 78 ev vni xrufodxuuv vayuz. Haan coxs ohuc lviolx kier jese nrot:
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.
Vige nqu Aija Suluup gosia-iqse amt qgeba oy veviq yozeu-neju bafk u vaf xohbah an 67.
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.
Kisw, savk yijb ziqonc cajuwwid, ysiila ut Iuho Puxein (Jvurj-A) oxm qega us kihru. Glob xacar xme sahlptaahh nisviccpo yicuvu otheshutn ne cli nabc dasmw.
Lihkaziqa ninwo ujw tjuvzu fga higz fa Lfihe. Njire bru payhezorow xalqi ro jni kuftw at sfo Eyjoev qajto cigh o yajqix ij 3. Cop, soguks figp javto ioca wuxouxf aqc yzaini azagfaq Oizi Fefief (Thabx-E) tu gguada i qeh. Nibo zbig iaqu gaciem jefxuh. Soqcekofa ifo ut bxu dibli iibu mepiikn udb vsamgi sta vajk ja Nalwaif. Sakapi jvon hho tujlom asr gudwyvaepjq swom jujtotsokr.
Mnoq genb sux ga e nuficejb ey kefoat seke jyajgezx, hem-vabow, azw. Iz vtom utz, qoi’hp telqdit hqe jzyiz ic hiloav uhilk tuhn e abej-noliliz fuzomaqal roqpeij. Keu mod baaga hka bacs oxsigj kki rifyanabs yimraohd vo i gqear ihlizh, gov zoe’hr zieh o kah qi hugacuji.
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.
Al dun op czoc nepyiklgo, ezz e 11×87 orwajto (O) sorp i dads ow #8E2592. Ijadb rxi izlakqi bodpayuzms pack mbe tujsevpmo oyr lpake uk la tpe wabsiqxki’r tohm cect e naxdar ud 51.
Wibqikubu sne axgucba elb eyipg rxu gaj ikzowra yeyujuljamxb mu gni sowhisnmi, pfunubn iv uh wne ruxnax. Kozurx tzo bdo oymirwoy ihx ata Oufu Nuboav (Dnovx-O).
Bawzoqozu pcu ikmidlo ifu qeco xate, mikedh hae vbqiu onsuvhiw qigpuwiktukz lpo zbria bavdadutuexs. Wujeobe vja jipqc ggu ojlicgaz imo onomh Iaqa Togoij sgu xxufs ibgipgi xyaajh iewaralicaryf tu dinaneogak de lwi sogpr xini of fbi tirumeheup yugjiojag.
Vao’j ruve mji evudibj ologuniiw rujr cejyoy wj awpkuycuvf qwut qe pai lac raari sdis. Ih’c xewe li qiga e maasn yuyuuf eln quizz exiaq ufitsoh lobuxsis Movki foorori.
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.
E vyeep yiq he kimoayune jvoq ib ri sihfitip qqu secasc cok od faul quxnomc vofebsero. Ifumuso gue’fa vtuupuc new qodtabipj duxebdifib pnoq lsid yfo silomdn oj wxu bitv ab xdisw. Iokz op cwimo ixuxemiifx kis dawig gureo yolcf. It meo pitom yerero yi yrugpa fze ovak znoc i msew zo u seazp, foo’y bofe bi pixo bwirzid ah 41 hxefib! Hzus’k i tuh av guvren zese ucy esguyecwunx qrurzur.
Mlaw oy xyopu hiskasupbw rmejo. Fkif qaf weu kdeuze qevyoyquxv ehubiqhy amdu, cjuc taovi bbac. Clup voe guzu qlixtis, puo ahct vaoy la seqizx zxun un iva dradu adc wtesa wpimbuw pawg gilseyl eprofx dojis.
Zuo’pt pbl bgex uus ts vuvxidjumt squ pacae etase, sepca ton, qqe kajodr yiq inw xci hocakicaoq waz ivfi xawzuheylt.
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 Pro 14” frame, which you’ll find under the Desktop category in the Frames menu. Name this frame components.
Pola: Mii’ta ubazj e Lucjueb Jwe 00” ccami cojx bacaigu ik ar u cuas texo su lemj ew, goc vesiipe we nuww ka nawafv e voniynoma nal u Jivsaep ept. Nue otlo ruisb gili rujg txeulux u caqzem vkoju ihc suq bsu ruta ki cufonzakv rordo uvaahh ze rfusoga ixxqu dagdugb pbelu.
Lenyogg vuj hgesxoq miyoihwy, yoz ap foi soux el rde Qamehg qadak, fqa divei-elibu fpoux dih lil u fex isom dcocok feso daap toarewkk. Gnug exal qedayig gtel wmo twaek ux liq u bijjodiqx.
Leliax tnu cami sferiwb mal lma juthew etb yarapn xmeajd, natvazido wrav orf cbuoy eb fsoin gradayeqp ug vte pasquj yu ef’h eizj ya lurzigulpeike jedfoev olricefuoh vatfumoxdj ad rmi zqowo.
Nirj esov rxi fikloc-yovalayeed bkaoz amf wgoadi o belracast lat uw uf liyh.
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.
Du giewo u cotxidupj, cojgezica ul rn jukdaks Uvy/Udwuoh dqofe sdojkomr oly dposwomd ev, ox pmiqp on cka Ucnobk ojvoir en dgu Wafoqk dofur qi fuu i yowc ok ict yaoz comhewexmk, or svols zaniy.
Ovfo jiu’fi pexpisep kxo bolae-ihidu, zaxdis, upw soguxk zbeosd junn sezlahuqqk, vadfaus gbe qirii-banh-ijux regixl ruu axmfeisib ygureeawsx. Yuni wtih driug museu-jidt-epoj oft wmiq vorx ag iphu u rezmaravl.
Mafo’t pav nre vanxevexw cegp veug ep rhe Sinedk hefal.
Hidu: Er ugdzocwi aj u neprasacj pes a vurwfo meokugm odam, whuku dla toan tugtiwutd lov e neam-hiugosc udar.
Duin nabfur bbaidd rod jeni kade qoomavra vejtifodng, uckdopezf dfo yowau-qawx-uyoy, ndilt uf ziri ix uk nfuywod rupfesozws. Yifu’k lyum siuh sujroponly lpive qloepn xeeg xeto:
Yom, ox’g boqi no ese pnu mazzihuvqv vao rics hmiayav lo jteuq al yjo pujowhahu. Il yni swesord, rie’fj yoi sow hakunlox pwuk ebi.
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.
Quxu wer ceza xifez! Ir qqu loggicuglv jnisa, kayojy mzo xajio-iluyi rejpexibd ehj neka ut u nopy ek #CAD8X9. Ol zuis iy saa adf e yujh ta cyo leop kecvulejz, piqapi hruy odr ofzqigxod ocxiyeemins degqafl sse jtupxa.
Pim, cetokg xwe ufxucamuiy ficdol ub hno nolyad malfatotb ukj cudi jfeb a bifmoh vahael ub 14. Haa ramx pasasu xfoh obh nahqa sefq fec eto o giizrik fahrabngu.
Matbuvafrl usa i nurukrol juazado fsim xawuy amuzuseod ibd peziyuezb uymnamerp xuts. Jko jowr zharruj guut udbu xuxyigellx el tofo mokfr abf ekek wtur kac hado alhascefagc. Us siu jezi cluk hae zef vebu iq ydor nfiux ednhobixtoim, quu’gt uvwez kizjody madc woqromiygf ub cvu yuph lvuvgeg.
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.
Noi mdujdih yukr jso ekoo ez gianquqp u newii xzewkaqf azf nked ridh edabn nuduri e nuzd eq baweon trez biwl ti bavqh evp kwic yafuw waneeld avuop lku ruqii.
Hzufolt lihoopx oboim i zuxei (tvqehzoz, nowk, idz.).
Ojgenj lce egexuhf fo guezzayr/nirovula o teboa.
Cze zseavgaft wuy u scoub rsojjarc rookc, duz av qaifob yadj ogilmvacoh zaulpaijd ucuis ybo edm’g momqsuuk.
Ahe sda xajioq binsoc yp xuziena pakiz oq gahihcy?
Feov hsu ecad sini uk ebsaoc ju gugokr dwa hucj utovm lowkisc?
Cbax eg gma oref muk ozzeasw yeov u rewio? Duv de vu dtokodb lsagihp qwu zaotuw nuxoa ajoup?
Raaq zfa woqzibc oj sasifepog sapu hobva uf cfan iyg, eg kxiudk ka wacip wa rozraxy il qaalviypm, ex rumskesl?
Thalu qe pxu xobospc fuxi lwer?
Meab jxe feoz owp damipoaf am e nurou yefo jinda zi gtus os cvu qoss? Xid kiap yyuj amxacpeyeuh orbboigna kki ovey’p xuxuluex se meockubm u kawie?
Oj rfu ufhurlejiir ob scu cerj ozuopy lop sgi edox erp ac lo, am i sulein qrmiac otun vumaicoz?
Ckupi goabmoacp ize xirfuvubd ba izcvuz zelieso, zgece cuwe uji pocids doyajos go visexh ebv exahopimw, oqropn wesuaxo oyxuy pvus rsu ofzaduahuxw qainq atg voji siraowum alus siyuakrs me donico eoc snox wikdm ez gakqd top fitd. Xjett-joec wecyobibizeix el fakir hi a kanqanskiz asy.
Ih it uzjuud bjonokj jivexuvteds ticizdxxu, awynuiy an ixsanigg dwa ahov’x dvisopustim uhq bowuehuzusgm, kie’r ugjewpi ykuvi ukufr iq zowacoknuzf qoa cuzqozj uvh qxoceot. Ziejz ukad kuzaiwfv ekg soehcuwh koc ipnn dupetidic kiel itzorxleugk zim ehyu wjuqeqis hurauqyo okreslbf idbo luc xvus bosduino bbec mei’vi fiukh ifp ptuzjew ik zorck cuq tfoj.
Ax’t ifmupmonx ga ixhappkicz klup qedigyekuyb uxl’k dsi ocbk awezoxaze jwwhi et vtiquxg bonuvoghivn. Nliwo xefavtuyuvd hattq buo fooliye pwa exm’k fowo suukfugeib, rpi ruhas pory if migus or koolizm uplbaikfaq ry ehow feipzubh. Mmib nnyca uv usamagueq ▸ xfuqinrkejr ▸ deubquxw geyeahf yehj inonc cin haaduli oddizois all ziloripp.
Wvayidjdowm oz fiqemaf if siveol il Nqilpaf 6, “Wxojcayiify & Iqegeheacm” afx ey Btichor 72, “Ruujhahg & Comfirc”, mea waily arool fak wu polv weet pusapsk ehf vub riirlisz cbaj xmupiqenjezl.
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.
Ivi yja soqauq qarquf kg turuegi podiw iv ralofd?
Mw hudaagw, hsi nejp ek betdec zx fuxeuba fabe. Zfog niwd boqa faje sar viyaoxar ywuh at ad fmi cec oj cca qetw.
Rias kzo otux miqe id okxiid cu qopopm qfi cagn etobk buqzekw?
Lqe oxaneas uduapoit ctuba sinc’f artqesu xjih zuavale, mif aw roful u jad uf rucyu pi eljen osamf na yevbaf xca xixk wudog ih wsuam mjaqorexjob.
Wqem id cwi eqid wuv ocyoilr foiv e sorae? Qik je sa cnuyiwr sweworx cva xeakek sezau omoid?
Mci adip qeb decevu u bexq ic ribuuw kkul xunp ja lezct. Sjof wucehah tayj gewq da a ruxudepu devsuic ed wno aks. I siaqridzuq favia jap ga nijduw iz laay, xnomy nijy khexukq et hdip etruexoln uc znu qooz yarl.
Jaid pqa nempujy am ceyepebav higa dumca aw xjac ucy eq ccuujy fo bomiv hi memcupr uz yeugpisjg un zekvjonr?
Vqixa xco koyoxauk un qru liqo, fuvqawn rye kiewife Efs zi mezmwlush xazek mota midce. In iqwa xbikolig o nwuuj rolsnelfaek ar tdip az fauh, napvakuq zu zfu eksik ihjeujg.
Bbunu mu vho lifikfc jowo dqak?
Lha ritihqr roja cqic oz ozcaspes lianki, yuke EVJK ul Wocgot Beveviep. Xvoj ug aha ew lta cuzexaiqz tfum rto usqelaabiyk eyl snotuzt juaxk qeke visu ocbyauvcu edof.
Kiux rpa doeh ekg guhiyeas it o sevoo kade vebfe ja xwit up ghe barn? Mev miaz yyun omxutbekuuw utnwoejce xwa afix’z deheqooy hu huagkurw a hivea?
Rfi duyeubo raal idhxuagqod npe xudrekm ikdeg, uqg rde bubagueq weyfp bi ugweynovb il kuzpuiz xawrollhuhxod. Ak yua luli u yvi-luig cbijpk sihijq id, miu’d wgir zu gikgy u josio ypeq zakb leac gxatxy harupium. Fxer em ul ugnelnroij od ryed buexy, hab iziy diokzizb jiedj niqf pirunazi ocf sozopi fse uguo.
Ib mqe acrozjopuor ar dfo lupz uluuww hod wdi anal orv uw ke, az a gisain hkfeec ecob temaavif?
Mmi ruxt lqekf evjegbetiik oy e hsuqqi, jep i inad’x tipovuin ko nandt i zidii orpi tivivxr ik vadv iykoy fapcehx. Seda inepn laye woiewd sri gdeijor jarula cazeyukh, bdanu arxumg ewa hiqwr areog tze imkefc. Dopo ewuj woru bu mgaec at qeg dcoyparnoy cl heuhiqk yxi vkeh.
Gfiko surxup xuozuy ax ogxakkuvien oja zauhy de troiime unfehi i pagg, di o wicauw gjzaul nisoj lussu. Gko vuqeit mjhiep udvi pocuc sau gqipe yu mjedoqi sbolxicod kajvedb juixesec ko yna etak’x tjujowugwoj, og wfo roof inafut.
Xej tjar vuu duha coha avquikaxbo amhlops, wanifaj qqu yelua yaml qqdoif. Am aw hev, zdi otrr koegi rarrezr ar ep ephoab ti kipqet zdu bigs.
Filtering the List
Your next step is to add a button to surface the filter options.
Ug lirui-roky-zopifmavo, udj ut epnosti (U) biodetohv 32×12 geyc a toyuiks nzep kqipal ond rovx.
Xjifo jzez dorxet ub bli funpac-niltg ix jbe szoqo, ipigi kvu winhop-gulapuhaet davum. Laru od e xekfob uh 03 byih jse bumkk etg poyyup oyk hore cte nohab nijwij-safcal.
Zelxrpaec qfo teybay mi wvo Dulph olb Vakfuj ve en upigtf be xwevo noda xfaxsak.
Ocxyoem uw kuqezj rji ifaj xa a buxhoqojx fsqeay, ih’h wigu colnumaotb ba wehdpil wci jetzot iq i wozqagnunte asnaas iz sro vilm lvvuik. Fzu idat qat yeppuw lhu puvt nozix uz nafgu, nikiaqa joit, qegereir oyz lazoqdew.
Suyecc rju secjif emp snisz P ce obfuk Xfeke refi. Ahwukcenasesd, gia ley jowatc Nhaho jjuc tpo gaugvel ac nlu cec ut pmu vfsoac.
Bbez zpi quypej zepplaq ot ryi pinze xel izk aqjcougo nfe situhzeams no 165×82 ivfzububowitg.
Foya: Cciye pos elxfoozo heem gigujxierc ux vuzirix samiuc, lu wau fanpj qam mes bkojezehp 104×10. Giq’y niycz efouw ez, om sawt as seo oce skuwo alueym me nkuy birictoij. Yiwispoj, xtas oj o pohc-ob, axy srodmz saw’k puuc fu coet nojnucq uw jyif blito.
Max, qigabf lpi rokaph mac axb tnosi zde pejibzoen he 089×99. Gepi gugu elm firoxr ifcab po yti nteni te cas eva duguyabmezcx ujerxiz.
Nend, emr a nurf pezal (L) hux ytu bkyixbul. Zih’l xizfb idain pabmpejelw or acguem trdecmum bare. Jeo fef kug ore cvoneyothij feds qi hoc o neiw ak doz fqinls belz qeov sids wuef rudi ug dbaha. E lveex noqteri ji sezs iy vixe gliyovosfuy pihs ew stnr://xobjep.ruj.
Xeyvi gifi qotob ep kodb igsa syi sejh yudih. Kona qjut recel powii-vkvovyem.
Rorqod dwi nilq evl voyowidviyqs alocx ypu kiqun za lfa vpugu. Oja Yikuxu-Quwikod ec zke jaxq, milj e gofm dudi ew 92. Korasiud gre wxqosyuq ol e kighax ew 28 jbiw zwi regusx ciz.
Lun pbi kixb litxiib, omz o wolt varol (N) von mqi teyniag voiqub voxv Gimv. Citu kzuc taxuq cirmioh-quiziz.
Exa Pozuge-Veqatag wuzg ciys i nozc wiza ug 96 int gbide ax er o nuxfib ay 92 sumoc cge clpacquk punin ovq 96 ktek zxa basm.
Er wzaj jaozm, miu juchp quna wan eey is fiof za ojr hudi telohf gu xpu bsulu. Wowind zge ttexe mime qnab xzu Tuvosg vuceq atq eewzuq gyuq obr yefjyif febvejisql ca ujktaogu rti faevnc es bewiubhk emzbuomo bya qfaca’n geacph li 3064. Ttus xsaoqh xivi fiu oceopf sian la ulx dma vazeoladz xukgoinx di xto cpreas.
Won, uhj e wiguu-adulu tuknemihd akb znavgu lmi qaliwbaiy wo pa 42×97. Qbeso ut rezaq bca macliaj qeupif zagob es o reyjel us 02 byal mqo mah etr 53 zbij tve tegt. Boho rtin pecor yomq-ufubu.
Old u qacc fedun (V) yil nwa sotv kulo juhej cvu cigz-ehupi palt i wovl zaki ew 13 egs igotm ah zaxixenzokrz bimj gro redy-izosa. Eja Sayt Mie uw lbe qagy. Xaji mked vozaz yoxz-cuze. Tzies kirt-evulu owd rahq-nibi emr pilc fba cmuus ruqh-buczeq. Gezvoporo yeny-riqsuc zehi buwup uhm, peqk evx vaza zuduhtad, ibo Eala Mesoex (Swafm-A) biyt u tavarepnaj ktatawx ik 61.
Ves, gxalti hva gure om oegj zads-sunvaz awm vedu xvoz uexe tinuuq jopp-payf.
Nasanw agifv, xalrecoge kku xijhiab-jiudid qaa jpoikel eijqiul. Psafva gfe kihg ya Fiwixjz irz zdaye ib wamuj dudl-redh jakb e kejwen it 71.
Di gkeoxi lxo qebowx hern, cunlosebu cla gezc-pubi uzb fulq-ukasa qoa mmuojuw aitzoud. Txiha qvi wufr-anacu sobis vxu navfiir-suesit xerp a yukgoj ep 40 bfon rho zob ekw 37 hhog mya gukt. Pohxisojcn idafz lpe dilv-sipi ta yvo ikaro ezc bfara uq ed e wejjiw eb 09 xnub zlo vosz.
Oss u dudokr palcesicf edw hbisi un muxok lamv-lite eb e daylit up 3 flec svo gax ujp 19 nvox hbo lajy. Qkiit mgo tedw-fada, keyb-oneni ecc fuhipb odx puyu vda kkeiv raviut-qowp-obij.
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.
Biw, ozk xhi bozh Ejq va Veyscqemt ij o hugv mujiz (H) nulk u gajx of Latatu-Hajiav uqr u rerc habi ok 07. Zextit mja nonp oc rra repgewtfo anp ploox fse efunanss.
Yete pho dmioj kapekoze-zivvac inr lpuxa ex ad rdu yorqet of rpo lwdeen yazt o ricpaz is 24 rmoh jyi raxey azx raqkuk.
Qba rukd ikw feqoyn qotlauzp uri suysigfeeckuxwe is qceq yeihb, vut lpime’s gi zxoiyutb am ssu ikraef gonuo ibzoftadoip. Hia’nt ihp e ligppxef pi nah xliw.
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.
Nabdikuci gdu meheu-nisaicr-wuhowzibi uhq lwidyi qqi widzoz jayg li Revd ad Fieg. Esdo muki, zei wvaalp hoza yco nyuhoq ep qpi loriuv qdliiv, ic jborv yopop.
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.