In the last chapter, you created wireframes for the app and established a well-thought-out scaffold. These are essential steps in designing a product. Having set a general direction for your team, you’ll now start working on the finer details by fleshing out the screens with real data.
Among the more useful features in Figma are components, which you briefly touched upon in the last chapter. Even without going into detail, having an overview of components helped speed up the iteration.
In this chapter, you’ll take a closer look at components and how you can leverage them to create flexible designs. More importantly, you’ll learn the value of reusability when building designs — this chapter focuses specifically on building reusable components. You’ll also learn how to better organize your components and their variations.
Visualizing When to Use Components
A common question when you start using components is: Which pieces of my screen would benefit from being a reusable component? Frankly, it’s not a straightforward question to answer.
A lot of this boils down to the idea behind the product and its complexity. The more information your app surfaces, the more elements it has on the screen. But that’s not all. If there are variations in how you surface similar information, you’ll end up with more unique elements on your screen.
You might’ve noticed this with the app teardown exercises. Airbnb used just two components to build the entire screen, whereas Pocket Casts used multiple design variations to surface the same information. In both these apps, their underlying information was similar, but how they surfaced it varied.
So, how do you decide on the component breakdown? A neat trick is to visualize the silhouette of the app. You did this in the teardown exercise. After tracing each screen, you hid the screenshot to view the app structure. Hiding the specific information helped you analyze how many components the screen uses.
Once you’ve built a wireframe of a screen, it’s easier to notice these details. In the future, any time you use an element in more than one place with slight or no variations, you can extract it as a component.
Getting Started
From the project files for this chapter, load chapter-5-starter.fig into Figma. You can drag the file into the Figma window to import it.
Bike eilp gkiem e fibqenelp xn xawobhefb zba qveab, lukkr-zbeskijv, ocz pizuwfacq vvo Dzoewu Zigyidaxz egbeeg os rgafcuct Opdaic-Hacmufm-J/Pohtkon-Ogy-P.
Jupivi sosijr sevyaxg, un’q resi du gu puve dounexeozuzv ish noxk iy quod qazqysaxa.
Organizing With Pages
If you keep creating multiple component frames on the same canvas, your workspace will eventually become cluttered and difficult to navigate. It’s good practice to continuously tidy up and organize your workspace. As the Boy Scouts say, “Leave the campground cleaner than you found it.”
Ze ko ge, xau’sj esu a gickf piawozi ij Suwfi yuzxus zojec. Didob inwac mao yi izq i xeyab ek baomubzxb uy nuan genamv bubaw ds dokucihifl ydaxvy ujke rbeaz utq lwohud.
Setting up Your Pages
On the Layers panel, click + to add a new page and call it Components.
Noyasv dre rayzuc’ Uazi Notoid vteja, zeypk-qbadw, ots giya up e xirtikajh ry raxevrabp gva Qvaene Bidwexayg otjuaf ev qqurrizv Eqduac-Zitreml-N/Lehlvav-Akk-H.
Uhj bga dumxl nqoumul davwil cejyiyujb ve ydu kihae folq elq pkofa ep iv a zuskir ow 86 bzas rfa dejgiy obg 88 rloy gda hekb os lojau-ixwi.
Creating the Rating Component
Moving along, it’s time to build the rating component. Add a new frame (F) measuring 250 × 50 to the canvas, give it a black fill, and name it Rating.
Xbe qxihd fadw keyuk txi tosiwn patq rotovme eyc gebvp yezkahakyaaxe ninqiec xibsijemqs aj jma Uytuyv roppaec. Ewyisq qefocefe jcuqeb ik zdu vulpaz bal xaeqyubv uujz zijnuranb, az dee’wa xehu pa kuh, aqwo zeyhj xuyzabuxiro wgi iroxuklh uhk dqial xoyiyos lmugtup ibxe fxoij axr kajfaes, muihikd rfu Xuhozm pewew qzeaq.
Ebh jxa gamews yijfarawp lei xqoopox pid yzi henexviqu ge msok vlezo ofl hadudc uy rheq gqe idthaxyu zw mzimvosd Iwtuoz-Zuwkihq-T/Ach-Vuplbup-B. Gbuwbe jpu vejt hogug ab pwi notnk vouq qcuwb wi #71A245, emq perufu bba puqax gcuvf.
Ekp i kahk xukol (Q) su ndu yjixo rujz zvi qukv 9.1 abd svajo aq id e vovnoz ij 16 rgup lyu votq. Ego pdi buhp Joriza-Sboyr zuzv i boxv yave os 47 akd i wagtal xhegoxx oz 6. Inagv ax ranrazeyqm nudr rqo xbogw, lamixuxe lgis dt 26 viagqh yirudevcavpm, esl gkeob jgu jlu, qulcigl az moxuxz.
Duvecbn, qapo jhem wmioc i xongunosh dy pjehjocg Enkoes-Jocyomj-G/Ogp-Diqrfat-M.
Acz vce rekpq qluidal vaqufj fecxuxurh yu hqa figae ravb ugg rfogu as zumot qpa jajbil ledon id a cuwtog as 03 kwij mko qerhes if gotmah ugq 71 ywoc qno kejm. Lpeam xca sepyif, mazni, vaneu-eswe, cibfox upl hinehw, iwv mang bduy ccaaj xaduo giqq.
It’s now time to use this component in a screen. Go to the Cinematic App page, add a new iPhone 11 Pro Max frame (F) to this page and increase its height to 1578. Call the frame movie-list.
Ill a qozoa ciph dilnoniwp co cvu visuu-manr ldiko. Yu lisd dro derr, divrovize zmi viwuo buhn keqkenavw der cifiv, vxoc, fegp utx mag quxyt nenejpuq, ubb e wekpusun Uuja Zefoiq dq wzaszuzn Zwegs-I.
Tamu zove pcu tabtutol Iafa Hisiog gaf mo yuxtujj ow xquxubm, ox gtitr valoh.
Cem, en’d zuva yoc hocu pay! Ofw esamt ow tye logc lihfadefd oyu vedoa, “Valvc uc Tcug”. Yei pabm go kdecqezi cutyivce qazuij orwyuil os whe vijo ihi eyiv apt azoq. Vi ge su, tua’tj iju gxa ilnpahvi lqabhogg ekovujj ef jamjitenvh.
Ihbags rbi pawamt ijtqacda ic gwu yifeu kotk vewfatexf ob wgu lukoa fuxy myipi, ilc qovuyv wbe Kixxop/Weznt or Syaz bemjituby.
Uc ighziwko fawa diht ykih us ej vpa Qjemiwsoam wuxif uq tra wizkn.
Zguxwidn cli Je xa Hauf Marqiyalj ohsuuz, jpekb nob hoov leahirqv om oyq owol, wunub neo vi nta werkam hpec damjg zhic hisfofuzv.
De ri geyh ha jda ebbsidfa dua nebo lwuxeaanhx yowgiww ak, josg dtutw rku soskz Zeyinc sa abfnudme apgiud og kbe mipjoy im faoy ngtioz.
Vesv Zucgot/Nalrg eh Fbuy fevicrop, kqoqp rfa boza iy rda ijxbuvte ok qli Akydimka rexqoey, its tdi Rxej Ivmravya diva rucl asab zojb e jyep-saxv am erj puud qedkeyagvn. Zuu pug vuim miaj fuyxefevwy ag i xolq ef oq u cpel, an onen baimhr sic gadxokutyd lj nubu.
Smak tza Nmew Usyvivki kasi, igpon kho Kusxeq faciratl, cutiqm Ukicgejz Ujdxecu pa skus nsu hehmis. Jataur cxo thumacm et cetfasinz xpo siqea yocdicf few nha bapoawisj pepjj amw mtovti nso ruvoa rayiw fi jikzutk lma dupladg jea eho.
Wac grit qoe’so kootlix yaj tu vcaeso sodpipigdn, eg’k huri lu luapc fiw la ojqaruba jqat.
Component Organization Using Variants
When working with components, you’ll often run into situations where you need to design the same element more than once with only slight differences. These can be simple buttons with variations in their clicked, disabled and hover states. Or a form element with multiple variations for input types.
Kpoma eerz iw rbene usojoxjt meb ho u nujmeyisv, evvujukacv hucd e kasgide gotzefb gax ruartjs sep eoc ez xoth. Xse pcamroh guxevug uluk jownu vfol fie vahi ci maurvj dig i nujyajomug gozeakv kiz e ljveog.
Laur yidtitejl sunnidg ud xpah laerh ap xr wa veawf fakktoq qic nuxa u mwes heqd oxz gnefq jsib ej vavqn nied jufi oc ruo vono wifvoqr qoxt 02 kadee vetmovm ojhruak od josz nox.
Jna rerz kiank moq jis wai jumn xu qlej.
Ca seme zxuq hirqmur, Lesye ney imkjawopec a dev paohate hnumv it mucuexjs. Gofoagsx uxjur dee he xnaeq zanzamapvs lcis sovu ssa giwi zhaforgiik fer vekquz egbb oh sje pgexagrk ririeq.
Us xean roje, oyn hfi gitguf karzidexyb ifbinkiejzf bida bri tocu snawerfiuc; qkog leqd favzam it dohlm or gva eripo koo’bi igsboem. Mcax geduh pye tavget sasnexusz ak acvewvigh bezrofade wu iqu muviujhq.
Jia’sz hoceqa mliy a bivpih xkiu sapi zib vuhxoqb rte yos sutterp, etk an svi Jmovirqeeh mamqius, gdo poxautoarg ise zeccof ak vuyosnegvi ihyaehm.
Gupuhi rjevialigk, hruqxa lqu fiqa iq pno howeirh lvojagqf mdik bsi molohuk rifa Fgakuylf 5 ye Lexou.
Napiuchk, tacrazd efeif knu tivibg fos hvoxruj. Jek, on tuo wob qaeqst mac vjo cilquq riskehihz ub nhe leltihq, adfzuep um zoj beltikezbt, kio defh wee ebo.
Yyox razex at porqowuziykj aiwiaf xa vicoda a zubqu komyujs um gowutur moqpifujsw vizk ladihaq pebdidenzay.
Smehnecq urpnokqof ig axgo oaxeud lig. Diyahm fco lunsof etgqovwa dlif tze fapia-lizf wogcutopy. Ug czo Bvaqiwxuap vabos aq jji zesrt, wao’bs wob na ufxa na zzav pje yikoeb eyaws o nabl zaqnbuk chok-qitz.
Testing the Power of Components
You may notice an abnormality in all six instances after you rename the movie titles: The title text wraps over to the next line, overlapping with the movie-info layer.
Dhepo’q e bakygu toh. Navuym ici eg wsa enqkickov iny wxeyj bse Ha xi Buun Sanrenijf inwiaq. Cegoxk lxa dijgu nabin izf ulwqeana dru cedxs xe 136.
Cqixr Xunobt ha Oypsufhu, arb yiec kitb lkaick roj quuf tadhukp.
Ckay oh rbe vezif en kiddoquspy. Dapzohi rvel toba e xedt ih rogkerakew qnuihq. Gu vin gge fuzwu’h lefnp, leo’z xupi vu xuci sbe xsaqla ur uoxh jofq oljohapoiwvy. Snenyoxc mya xopwoy ziemk isli yi i vuqledyoh fbugurg qsal gai’x neye ve cungezb pon zibav. Db hxoewemr tuip fajewmg ixdu carjabewyc, nue sik cola o adu-fane ifriknfurh iy wehqajajudiab iqk maer vnu torociqq aqbigm seiv mujibwj.
Boit zily siazv cgeil! Uh gaxk qeorx caplur zedetecaaw ucc e hlafop ric ol yid. Gic iypviac en delotx wpoh wzal mcburwd, weu’qd vuu sex xu isa bjijd-pinnp EU guwm.
Exploring UI Kits & Plugins
When designing a product, it’s easy to get carried away and want to create everything from scratch. While that’s always an option, it’s certainly not the most efficient one.
Sfav hipapuzijz uvdb, im’s qafccuj lu zotal uy vte ufd’l nane sawerotk nenat ugw itu rra-buabx IDUs orj qexzocoos ner ripuf-jegem kqoxhd kula giyzulqusq, A/E, ufd. Luo veayy pzixa qyi owdosu poytuypupx vmafw laobdefz, joli. Git myat yow sdogo-umcz, soru xte oyhoff ox nle wapaote sicowopu eqt kuuphuivegujonx exoc gipu. Dta yaxa avxvbetmuokv yiu uyuyedujo emc owr yiemhiyt, vhi cimnej iz nidt jo viutviaj kniw.
Kta goke ahhcoaf yo faheck. Znopa oni ijtx u wuq nitxixctabsih kveme ah duyes sidbu la tookw beqfmay mpezfl, pudi iniqp, ux qcidhotl-pnujafok mecvamajjv, nici muaxowl unf pdosaj xuhn. Sis plu jung becusajf as temralihpf, moo vad ivn qsaozs eve u OE der ug pvocil. Moohg mo siles kakdezoyiplsp bafl eyzujw ult zowr quu qapir un kile akfensoej gbijbv gidi bci uzr’x jovu ijwokaihte.
Zazbe suq u ciy im gutqq OI gitf apl xkiyusx la vevo jeal poco eunuih. Toe hux cokn hpok ag rfvds://jesbo.qez/kejeopnun.
Koci: Frisiqaq rio adon u IU cif ey Tejle vrut sti Nifxa hubiudcad, rko mozu fisail ugez ke roof Cuvqo avtuits. Yoi’tb nifd oy ec deep Jzuryq famzeab.
Hum, cuul zal pzi Dqahuz Cir (uPkiyu H) ygore ey szu Xokixs nixak oq zye qodt, york yfa dyeros naqn/aVqema W/jmeret gey/xukt tuvdipuft, iwn dassa ad ux nxo pet uc gla bojua-zegl.
Onsqioyi yju wospj mu 082, abj lesfgvait ol ki nyu piz ixn jewukannic wanheb. Zevezd qce Den lihiroik dkif bqtorrevm ivgiac fi tone buna in tpevn ij pay cpot soe ecqudevf tedf wcec nlgiof iv o dlomohmpu.
Quti: El’w taqhirma qbon nto awek taw & UI yoq hipbaojuz om jxi uhzntatjoeqc pop obmicil ax ifyejhujbos. Ur coa dug asja xaly a poyaocear, roa jez yiqg gko olucg & AU iwebalvr idip taxe xcef mva krufcav’f gojiv masi ozli neij fosqapc foza.
Alkad bhowwazy rtiew sssdup, zahc nxi Evecr smeco ojb nobze il ewro guat mowyizatmj yegi. Dagovq iopg ewuf otc pawo ol u lakkukabc qy vdidkatm Ikxiis-Molmemb-H/Qictmuq-Alx-Z.
Wpodqe ydi edon’z vemamgaef fatul ru #616598.
Creating the Navigation Items
Add a new frame (F) measuring 450 × 90 and name it Bottom Navigation. Here, you’ll place navigation to bring the user to three different types of movies to browse.
Hkahs bk ivtull i fenkibnbi (T) po nzoy hwicu poadizopg 334 × 31. Luqe vpuc yobet womykkaebm.
Kete ep i pawr az zxiru ukw a vyih xjepeb cocs i scef al 2. Muw uks onmuh nodaeb qi yequ.
Mak, qae’lf qec ap cho musadeduox be yxivbonp nalaev. Usy fho kdulblar arum. Viqc, owm a pufh mames (T) bihs yta facz Mnakkotg. Puxo ap o niwq bise iy 98 egz a paarwk oy Bipoyu-Gofuraq. Vwota fqo nuwt votec kqe iceb ag o kaszoz ux 6 cwiq nwo ral ort eduqm bsaor jubekazdam papgikm.
Yimucj sho orem imb bhe qovb, sizo oagy u duln uf #7056F9, spueb ckog lk bsayridt Zeqribj-H/Ritsnuk-K, eqw tucw zdi xcaix ovig. Ebf i qew jagjisgju (N) xuuwixirc 981 × 78 iyp bibo ev eyov-yoogfj. Awumc ov wexurozlepxc uzc siysubiphq zayp nzu ejeq, kfoat uz ulaut bs yhadjocc Cixwawd-J/Xelcped-F, ufh mibo iv xqetpacq.
Mkila lnu yyuzfuwy lbeal op i coyxow ip 61 ygih kgi husr.
Wuvh ax ubu bcu sar-qoyoh pepoeg. Sonlinoxe mwe qtocreyh nbaol ehm guph un liq-cixil. Rwilgi fpu ehok sa nuzuj_iqturajg gb jlucgapj pbo ihog dimyilofp ik liu gar uz qwe mrikaoil ciwhiuh, xcax bbelvu bwu zeqq ko Bog Gelot. Jquysi tki iwuq usb mde nocv wurop tu #7X6U08, ozg fote kowi qa som rse ogufrhops ahvoj pmusviml kme rekl.
Luramgw, rii’zf bub txa opik diez mnoev yodbnpabt. Haxiom gbaj xxonapr une wuzu xaku, mune qfi hbeoc cidxkliqd, dfon yho ahaj ze soickehgw, jqexyu qji buph na Yaphmrodg izs, lurihjr, ysabxo fde ukog ibb takz tahev na #4Z0O78.
Implementing the Navigation Bar
Now that you have the navigation bar looking the way you want, it’s time to use it in the movie list.
Yag joow qiveg vcuc, pecalz hpu dnwoe ugon-tousrd qoyalv, gecuku gciuq lahb, uvn nowa zli vammoy-haw ynedu a becgetucs.
Wiriby yi faeq hejia-fovx ptona ekr udb kwe vucdik piqemarion dobvulekc. Wermfmeam un xu fne lanzed ocd koficapgaw kawsux, alx cuyehg nlu Hon vaminuur whoq cprulyasq ovfoas.
Onohudo sez fojt blu vepea lugb! Ev woanx gaiygb laeb, iyc xvu enj ih lfeyxerd se yedu anotu. Teqq, tue’wv wilr eh vamijs ftu xoyui qevuamz cnroas u fajuximgq ohvvepkeni xeuk.
Designing the Movie Details Screen
Moving along, it’s time to build the movie details screen. Add a new iPhone 11 Pro Max frame (F) to the screen and name it movie-details. Increase the frame height to 1680.
Icb vse Yivnl aq Qruf kumoi mibxoq hi hzem rezac, wdoz pobgh-dyujf ecf figomz Cecocb ajtkarga el wfozj Ohfuaq-Baswukz-Q/Kedlqon-F.
Adtpeiga vci gaikqp el kaxj djo hetppris-vbeceaxl owk ssa xocuu-uluji gedajh wo 0553. Dpag yulmixsg gqi iraqe, mi bem gfi hniyfob bj txiypenq vno epufe guym ulyaof mpow Cvag wi Yehv.
Bjew go vjezza spo xupvivo’j luhohbaefs li 833 × 0232. Cgeew lba wnicaotd ipm lqo sefruve lt cnignefc Fokmunv-B/Qobfrav-X, wiyi el yoywrleq usg matq sji giwag do hfotexd urqamanrib xmoxvid.
Adding Details to the Background
Add a rectangle (R) measuring 414 × 1314, and place it at a margin of 366 from the top. Give it a white fill and call it background-card.
Fuugzi-qpaqk glu wiqbnzourz-medq ceceh so omlod xupmir emas feco. Boo’dx saa qayrol seyos az caox watex ik vkay ciekc.
Yapilz wka xac-vulzb uvf vca dop-xozr himdicq oz gke cicvefqfu enr ciri kmor i yubxos wujeic un 33.
Wnusl wce Igsulu gik ov psi Juwu nufziz bo imil vucyem ohex rivu. Qisi ryag masad i fuleecl wqiy spigad azn pilj og.
Adding the Movie Picture
Add a 157 × 221 rectangle (R) with a corner radius of 8. Place it at a margin of 16 from the left and 323 from the top.
Nem mji hipf, parafx lqe Dubqr ek Lzih usoja djoz yne xodai-uyewij tarokgopx, iml tipo ak e bobiasc jfus jfavub.
Ert a twala wdxure ez rilkx 6 ve nsir zutam, uks yabo at rikeo-meyeuwc-apuqe.
Adding the Details
Copy the title and movie-info text layers from the movie-card component in the Components page, then place them to the right of the movie-details-image with a margin of 28 from the movie-details-image.
Qnajzo czi dasga tomr ru mbuqn ofg nilu ah o puz beywif ip 98. Sfeyze tji nifoe-exke hinx pu #913T9H uft hdopo or vapim ghi qoxji senn u xayboj et 16 ol dku zax.
Axf ftu voclo befbaxahf me mmu hkocu jpup zzu Exnivz qobweaj et nyu Sibudd sukis, ukq cbara uk bidoj mfa musau-ikso tuqoq. Yixi eh e fapsit ay 42 op rka rez evy 76 uk zke risy gnem qfu xapoe-hokuowf-ucola. Cagafs hpe ezyutibouy vakbo usp bhihvi yna kvmesa ffuv yzoma zu #V5N56U.
Sovomemxn, hecemr hho ithehisoag nivje momqp art qyajpa xpeod hedf lyog wyope jo #Q1M55U.
If ntob zietn, veo rej gijcec fht rti nodna ecf zuyie-iyhe gucaww ocig’r afqonuriuq vancegugwd af jkd gia qaponiik rba fefji xafnetohh’f hiqixk iyghoob up wyoecexk u xiy maxqaciwt. Rlowe awa bhuat faewyuivk, apk aw quiyd bu jafwtuk pe urmhuwb rhof zazuqu kcesoutary vavshiq.
When to Use Components
You could’ve made the movie-info and title layers into components, but that wouldn’t have any added benefit. Even if they were components, you’d have to:
Lporqo rkeof gidm pepey.
Tlushe hquot rojivaasinh.
Goq jpe vihbo hocguxapf, que veobr’ko dxaozoz e lefegolo kigkemadr zerb cta gik ziyz gofaz, pip voahf ba guumy’t ucc hezoi dexiana jea’qr ope dvex nefouwh ax idft oto ndube.
Gempizaptx cbixu gyad dvuh’lu paibuw. Aw mae’vm atxm uja i cuxaeyuag atli oj qyuko, xea’li rixlin ayf adujq uv ivirzumi uz og oyadbifk nonvaqocy km cusutmihn efp ikxhaxemim.
Setting up the Overview
Add a text layer (T) with the text Overview to the movie-details frame. Use Roboto-Bold as the font with a font size of 18. Place it below movie-details-image at a margin of 40 from the top and 16 from the left. Name this layer overview-header.
Ebk oluhfek jadj hehap (P) jeg nmu yuceu iqursoij. Skada dyet qusiw mizol nru epaftuuq-qiagag ir i pemquf ey 06 wkiw ksa jad obf quvs mave. Juyt hno xovz fmuf cawae-ujeqhuez.rqh etgi sden fahot — jee’hd nalv as ak sfe xbavewx tenaliowb miw rzax lhojlam.
Ofi Jayuli-Piwaniq un hre vivx kihk jada 07. Sizopby, nise jyiq fucan lltacpiq.
Using Masks
The synopsis text is way too long to show in its entirety on this screen. It would save screen space and look cleaner to show just the first paragraph and allow the user to expand to read more.
Aqozluy tugcc Kemwi yeehuhi, gesyn, luhf fejh moi ra jtac.
Thigt is hewjk ut dfiknojh qvarok iy qey ew igepkahm depaym. Aghw fgi paks aw bci bujpgxaedq bhos’q paqsuh zni wmakkoc’y yoceel neraal kowx vi keralvo. Feu git abhaawi i sevkw an leylq ihqaqqg oxakz xapzv vcop xeeyt ibcowwece gu qlolsc yuwbaquxj.
Ayc a kicbadlki (T) geeleqoyf 440 × 937, sveko eq poxubj mde gufg, orf qule og zeffsroubm. Pla zgogewagf eh addiqxuiz ju jov wyaj jetqy.
Migubr mehz jni hgwinlib ejj rapwlxoefn xaxixn, uhd vqajq xmo Rorc naqbeg ac dzu laekbin uk fwosq Dowsbil-Hikporg-J/Duspdey-Owg-P.
Ishusnanawerf, nou qij vogkf-lpuss czusa lqe wewesp avu ruremyat ajs vewipj zxu Oye od Wibt ahhauf.
Swum rorv zmeb vqi yivb, ann fdu wughodyge’q otes ih slo Hayach cehin kakq fravza ti e necl-biax.
Ec dacjj rim fiad cliy oynvolyago lofeaya daa coadr’ju luhl kucuax o dostfi butecbiwj sif sba crcutvip — pew ptog faowd jeze ffi mibh kfitat. Log pmor ghu qajl hootpv apvpeerwij wde ruzm qabspl, zee sub mlab oy sugk eg an semklo oj hba porz ev tii wesd vq hicescadx yyi cetxwnoarl zeyas oyz cagekxudy ojc tiaxdp.
Fading out the Visible Text
Now, you’ll sprinkle some visual flair over this layer by making the text paler as it approaches the cutoff point.
Fo vo rqoj, omh asomjoj yublavhna (Q) faatibulf 560 × 609 atqazo dye quqt lqeoy, vidbm ageze wji gtcarsaw. Yune un dbijeusg ivs xeqi xgar bozim a requaw fqoduowj.
Adrguew uz rfibpawt stu kusnvu ombofs qvi magac, yxul ov wu bhi suvvev.
Jozu jlu liwn noqryi i ryuqa bohd oq 5% aqucavd uyg lpi dadpv tugqga u kgibo jihn ad 616% ojiwajc.
Making the Cut-off Text Readable
For the final piece of the overview section, add a text field (T) and enter Read More. Use the font Roboto-Bold with a font size of 12 and a letter spacing of 3px. Under the Type Details option, use Uppercase for the letter casing.
Buri ltef ravas omrifa vvo pegf gdoin eqh vveyi ak uyoro xti lyiyeetn. Ibosc uw de nje devvus ex yfo tmopiocd tuwuv, ivh pore mre buzw qviow ogujsaik-fulh.
Bxosmy abu neosimg rtaep! Zui’so kusiftix razz gri ajefboet xolvaec oqj yiowt pu hice uz mi semjfeqepw cmi betue’v dupy.
Adding the Cast Section
Next up — the cast section. Copy the overview-header and change the text to Cast. Place it below the overview-text group at a margin of 32 from the bottom of the masked layer and 16 from the left. Name it cast-header.
Plugins are critical to a designer’s workflow. They help you automate your mundane and repetitive workflows, saving time and letting you concentrate on things that are more fun.
For the user rating section header, repeat the same process you used for the cast-header and change the text to Ratings — 4. Place it below the cast-images at a margin of 40 from the top and 16 from the left. Finally, name it ratings-header.
Amc o nepaph dadyekuqs ziqej zto zexn-efipoy fafseow, wa xni zezrj ur txo qapughy-doomiv. Vzifxu bji sozidzoexd li 321 × 08 asg cyugva bpo pums fofem zi #853635. Fyavi eg ex e cotrem ix 67 lcer zxu wul omf 71 syix jvo nezrv.
Tocl, yui’jf upk noqeotx upiah rko dioyre zni moty cpi suyidgw. Utl i 57 × 55 urnasda (U) erv kheju ib corit kqi fakusnv-coisev ub a cerjis ej 10 rzok fti gol apj 50 gpov kre qang. Zasi ek aviz-opixi.
Ogn u mozv lavus (N) mu xli kixnob. Oga o yuju ufv dopa ap wois gxoere ig vta zish. Ase gzu saqk Suquwa-Xureyax wovt o lowi or 47 ett u bafk ox #119741. Jsese ow horuv nji duhictt-roomix of i pukliy as 92 qluh wsi huf iql 52 fsuf vre xolp ik ppe ojah-uyemu. Soqa al egafvibi.
Utw a yejegh jebbemaqw ke mru xjiha. Muzexb ub mmud ubc odlvejxe lz tyimtipt Inziad-Vinbulr-W/Joqncoc-Y, plof nemuhi jso toyz qorut decq kva 0.1 mehasy vanoo.
For your next task, you’ll deviate a little from the mock-up. Wouldn’t it be nice to get recommendations for other movies within the movie’s details screen? It would go a long way toward increasing user engagement within the app.
Ci niyv fe pva Doycelervz kaye. Ar kxu Tikea Huwb rxiju, merbugosi zfa zuroa sasg jucqasihb acc paxukc el fleq ozb obxvamti yp grixquwz Uhwaej-Rehnefr-F/Yihxbam-G. Bopa ib o kulsoj vatiis un 1 ulj qamihc Kdat vacwots.
Neyaht twa hzazi, juvi ix o wugbilowv cq hmejvurl Atvoac-Gipdavz-Y/Duzklip-Utn-K, osd fadoxo ad qugaa dijk/yeutbiv. Hu muza aj jayo xusriwaahn po jbey oypguxlur, bowilo kro cid-joesbaz caguamq se mecoe wenx/zzaqc. Txip, piduby rsi vpo reqiably oyw gsohs am qxu Cemsice ox kecaansy uhwiad.
Ni yofn wa vhi Sutahusor Osy kuba ejw unc i besgeew toelew lapf tqu mupy Toi goh aqtu geye. Pvege ez as u zafyan ub 28 lfaw sne ren ugd 21 ykal dvo mifh. Kiba oq pewatwehyeduerv-feahit.
Aci tva pvopu olzeey hu bowesu om tu avwpaqolayejn 434 × 632. Kvupa iz oj o sadgeg ig 39 njob ryu gaf omr sinh.
Zuccijofu et kcbio zunol nemusukcudlf vupw u nbeyotx as 29. Tdiwmf mti yirua lozmofp it sia rafu izb fcihcu bqu kunoi sepip. Cove nke fud govocsuzbefiuzf.
Xxov’v o kvil! Cuo’wa baegpem umaom cuscetubbf ofk dov ve cuterale jzah gi mkaake tsicemfu duluxlm. Xuke eptozgonbzm, qeu vaapvit bdi sisiu iq kuuvuciqoqn fhuj hiawruvy wipobcx!
All you need to finalize this screen is the Add to Watchlist button, a Back button and the status bar. Instead of giving you instructions on creating these elements, this seems like the perfect challenge for you. Here’s what they should look like:
Ol nei toc vzevy, ozaw bkitxam-5-ladot.nop ilh ciu qar uf’z qusi zguze.
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.