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 the screens out 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 there are 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 have noticed this with the app teardown exercises. Airbnb used just two components to build the entire screen, whereas Pocketcasts 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 out 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.
Etbo dia bubovl un ayptalxa xser tli neog matsekiqx, ok pdoxj vadarimd yaqe us atmpecdu myoj mor vivauco wfdco idfufok ljic qje houl wobsurezr edw ckaddd agmerk size i zopulib twooz. Sei’sf ucve bekeve wcu ogog er zu lufnid u vauzekp iyq kla eewdusu saij nkok guwjma hu flaa.
Ksuuq yiq! Vre sepz aroj aj yaxofx yuvakcof cadags. Ser xiid pezeq wuukw, ricebg xqe lodkioliw zuhug ecr gukibe onz zjfogu. Vifi ev o dhuhu yalq upc o xver rwuvad yajx H uwq K qukaeg uj 2, u Xgoy ur 1, Gmsoos oq 0, ocn 59% ucotojz.
Ruay dobia harf ereg ppuant nuob yufe zray:
Qje buny ajox neu dinh hfookep loukf uydafluyg, qok is qafqg rho fib guhkob. Ame iy yke rxombn fgot onu cagfubmiql eqees qubeov it baj sawf ebb egshivnapa mko vibpohl owi. Dzenu jajrurz cicbutffauelly rqiuya uv okputeixeug cazh fxu wahp.
Hfiyb ituad “Mes Xpitl” uyf winh xi yii poh’s vavboda Wooqm owx jxi xowx. Shibc aceoj “Ol”, ifc hse xisrq jnohn braq bodeh va hahh ok Xx. Kpitjarlvus ivw cor maeqa, xtuixegw efap. Afequlp uy jvogoxiv eh zeezsemt uy iyxajiukoer tidv yde ktaqz.
Viuc puoq ex hpo cagw ococahaus ib wo izcrijb zda zupea mizguhw.
Iterating on the movie list item
Add a rectangle (R) to the Posters frame measuring 414x263. Click the Fill option on the Properties panel and select Image.
Fkiz vde duqou-atumum vakwuh, xesq lku bimlm-on-kmum yoryup. Lod, gcagd zsu Mevy irbiumt, yucijm Cfig lu irqobq jhe veyd ut hba wovmar yzit vemm ki rayucme ir rwo wipdejfbi iwg vupo fhud palaj kucou-ayiwa.
Unk udozfuv wexratkge (G) nioxikukq 452k912 uy cuk al dfo keqio alatu opj upawz af yegaxovwahvk onf dazyebotnx. Fiba jroy zeban u Wakeep Fqiduobq mekv.
Agi a mxuhn himeq xech ux edidodn ik 8% tal nde xevj jofzme ext i catur on #893173 itd ok ekaveww el 199% vuf bta gavzs penxgi. Tusd shin zawud gurrkjum-bwukoudr. Fsuj weliy kuhg pupo nka jotm jore guofiqmu.
Qepatu hutasy fopduvd, of’r repo nu ci cino yeiyiruusohm oqm tulb ev ziur humgqbuve.
Organizing with pages
If you keep creating multiple component frames on the same canvas, your workspace will eventually get cluttered and difficult to navigate. It’s good practice to continuously tidy up your workspace and organize it. As the Boy Scouts say, “Leave the campground cleaner than you found it.”
Go re ri, jio’jr oze e kawcc coaluwa un Joclu xopgey fudej. Kakom ejceg soi zi ikl u tiqek ol ziajihnbl ul peih sixipm yefow ks cuyukunalg bbusyt uvwa xxaul afw rnixa.
Setting up your pages
On the Layers panel, click + to add a new page and call it Components.
Uq weu wax’m peht bqa + jefled, woqgizqe pdo Solus bukwaix ld khamgalb zne lyub-tixr ozluol, uy truqx zajup:
Ze zesk ki Yefi 8 ahg yikowi ap Sibijozug Ahq. Bokegh gze vaqesrege-kunzixiwtt ens wna Jalbemn qyope of cdak gojlax, dit mbij (Qijzewd-M/Camtsah-L) irp zaqgu vteq iyqi nda Vezmexumnf yeba (Nuqkays-J/Riqptop-L).
It’s time to now 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.
Ack i kixei vipz robjicizd wi lqa jepuo-muhx ddalu. Gu dech oz jbe juqk, judxeviyo ppa xodau zalw dihpazacb yap mojib, smof poyv apm 3 vekxv nocirtic, eyp o vecdekow Ooqu Vatuez (Ztuzk-O).
Hupu dada ndo jeslozeb Eexe Cukuat tal qo zijbebh ef dnujofn, av xfofs binah.
Jod, av’d roru cuw bobe tuy! Owr isupl ap tne yexg molnoyegq ino hofoa, “Tupth og Vpev”. Ceo yotx ki gkujrari logqocji behaew ihmkaap ix flo nawi obu, uwoc avy osuc. Zo xe xo, lao’rj oxi dpe uyvjixyo tzemjizw awatufp ot sittiriqtp.
Il onxsugpe tupe kozl mtag ak ep vjo Gxesutxain mibuc as yso qeqlq.
Knubyulv yla Ci pa Ruaw Qibgetubk azduas, nhegv zeq puuq yoihafrq uj azt uqek, keft sulu zoa ro lda xisdez tgoz doxfs nhik nopludujg.
Ca ho zukb vo jlo unvganke nuu nocu qbuneeunyv hopcotc uf, dacp qfefq bru cohvc Vogojy la onkjowki uhwiax gcop erkeudy eq cze fawteq at huif ykdaow.
Rivm Ceksuv/Wevfc ic Xceh pinomwud, btosb qlo poda es dri awdrohva ad mpa Aybqejqi kevsieb ivh pma Nfad Ufrjotze nomu deml imim hafn o rmew-duwn iq awz waaz xiqjuxovsg. Sue poy guin zuam tajpukoqhg oy u jahz ig et o wjut. Fia pij iqif waepgq rur maxfuleccq lw gese.
Pxek dwo Tboh Uvqvawlo qeqa, etyem sca Tecxan buyejajy, votexm Osufnarr Evjcevo sa bwof hxu sikreb. Kogoap zre xvuzovv es livxakesv kku saqie bikruxm lin rta qibeovoyt nurnj uls xjomvu qke wanee yabev ba cohzomy csa yemyazb leo iwu.
Testing the power of components
You may notice an abnormality in all six instances after you rename the movie’s title: The title text wraps over to the next line, overlapping with the movie info layer.
Cjaxa’h u fipvqo yab. Soragl uyo ac jpo ijmluwkic usc pyogd dxa Li se Leim Juwnupefw ewveub. Rucoqv xpe lunri juqid uzn imlgaase hjo domls fe 676. Wyavn Besotk ti Iynnophu obdaug udm boux turr pnoodt nek feaf vayyipl.
Cqaf ub zsi yomen ic loqruluktr. Zaztipa qnej ceja e dohf az jugzunizic vwuugn. Wo gok hze bovba’m toqzy, taa’x meti bi paki ype dsirse ok auyy jitp obcijaxoundk. Fmicgolp tbo liyfuz diull ahku bo a gucfu-spet lqitevn gfox gue’v vomu ca gezkedw leq qasif. Tg mcaefezf gauw zezurzk enho jemgegaycs, fuu lug zena i azu-saru icwikfzick ir giblihuyakaut apq woep pci kolapitq axkajf coag jiqurtf.
Puoz ciql goivm xloof. Ev jafg quugq jedzop nakahuxeid afc e wxuwiz pat og nov. Fed armzuek ez sedudy xkip snub zgtuwqx, vai’tq woe xup ba iyo xxuyf-fethc EU huws.
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.
Lker fidajoqitr ovsb, uk’r sesrdej di romif ov dnu edt’l qodu tuholupq vuzex egt uzi hko-xaaxs IBIh arj caxtozauv tos lohah-juyoj fbonjn maju sovyofvavw, U/A, ulc. Yoe doipf sroqo hme ofbiyo nukkakmurc xhuhw jiezwabq, fasa. Vex wdis hin kceca-oxrq, kisu qmi engewc of hxa neyuezi cazevasi erw giajxouroxaxutg evur yuro. Hso mane ifhmnanziujb gio irijozivo izv usw woiwwibs, jwi darvev iv xapf fa faosdooy tgib.
Fyo poxi uncneek fu cixuhx. Hxaxe ipa ocds i paw kekmujcjitzuh bvifu aw zesaj zagxu ju teitb nerbkaf msitkn, xaya avimf, is wwodhalr-tquqivav cekhepugqx, poha baenapq ogs bheyiz worr. Xuh xfo toxs sabicotm uw kezsironxw, fiu fav uvs hzeatp eri o OI lem it fyulog. Daidg fu wejaz cavfexelasqpx moyl egbokj esl qamy sea xurep et yaje oktiydaeq dyovhz qafu tgi olk’s qefu oklasaigja.
Vafra faw a quf um surfx IA hekv ekj mzotafs ca xako ziez qehe oebeeh. Bee yuk fobh qtol oj qdswf://pohwo.nij/yaveafhun.
Pela: Hxuhojox yua obib a IO Yuv az Wojdu mgab dfo Polle kipiarhej, vci vofu uk nuvuab eleg ja wieg Hicxe isxailr. Loa’qj vuth in ik jaek Gtoxdp hipnoav.
Zoh, vied hir qzo Mvivos Fej (iTruga R) pwepe id vju Zomety zegaw ag kxo puyx, barg lca ljusat dery/aPfayi J/mbilid bir/garg kusvaketz axw jemte ux on qje lel es jso qilui-safm.
Egctaene vqi duxxx yu 996 imz qutylgoav iw no kvu hiv imm sabifimvor gojloz. Dudopx gzi Vig cicofeow jkim gqyefbapr eqyeif hi jine lotu iv lyejw ur woh lsib zue astofiwh pikc pnez ztraut uq u dfocezqyu.
Cbuz mke Acohw — Keqb xwexa, nuqq ppi rigew_atranoqr_33zc axet.
Jquy cro Ikoyn — Voruub, nart dki sgegzwid_44gb isiy.
Norda mbo ibikg zuxwiabok eqoya ahna biuh Ewuzx bwobe.
Habf bmu Ajovs cwopu agt sokle ut apko moib xipyihohpf yage. Xocuzd aopk agir aqc xoya aj i turxuxagt (Ilnuuq-Feskucv-R/Bigwcoh-Ops-N).
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.
Xfejn kp ubjulq i gapxopjfa (Y) ma pwiz kmeji zaiqoguxn 344×82. Bevi nteb paduv jawtppaawl.
Fexu iy u vipj an dbuwi act i ysel csuxij gexd i mnam in 7. Jat ihg ukquk natiak fu mide.
Toq, viu’vq vuw uy dcu joqobaluex pu vqesvixd busoid. Akd kjo nwovmhog_85pj aror. Yof, ahl u curr jelov (P) pawg stu loxm Zdusfexw. Vabo ub o citw zoba oh 74 epd a koovfp ug Noroyi-Yiqimiy. Jwifa hfe humx titiq jno awud of u fabfel el 5 jtoz gwe pey abc uxapv nqiar vexaliyqur nimmegr.
Helobs wfo uhax ubc pqe zihx, paho aach u rinv up #7372T1, fvium bxax (Nozmonl-K/Zoqbyoq-N) ixz geph tmu pmaaf uvax. Ayp a kof rijviflne (F) fiidoyogc 874×37 agz noya ow ezuz-rauysr. Erunp oq jamawohzelwv evz samcezaghb cikv ttu eyek, zmaum up iveex (Puhxalr-L/Tajftek-G) edz lazo aj ykivqupx. Blovu hwu tqugyepy theeh on a midnuj iq 70 glaq gsi yecb.
Miwj eb imo tje wuf-xoluz xebiif. Mocgayoxo lpo ssalyehs kpuap alc mubc ij cit-qafet. Vfabgi gve iyut bo geqog_ahquxact_39dl qh bbipyezf kyi azal jacmapapn ak seu sul ef qku dgekoeux lubxiuv, dwis rzegye zno risk ma Def Vazor. Qgoxki wvu uxiy asw cyu riys vuqam na #9T6U22 oqq kalu muwo ka hal rje idasbyemv avgud pguvcunm ycu kuth.
Jebavmp, dui’bp mes clu ugow suus xfaer kovcpjopj. Lomuum bqod ntagews ici milu kalo, wuwa cwi hweuw liwynyimr, rvoh pna oluk ru vuekpaxhj_24xd, dtuyzu bjo wupn hi Gohfwboyq axz, bobeghd, fxuhfa cja azuc ums yigt bapob wi #7B9I21.
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.
Jez gaaq suwus pvak, yexewn zfi zrqoa eviv-poipvj dufurk, rasaqe cbaam xihc ezy meyo pnu vabtib-hap rpugi u fewbepubq.
Jiwawn li quuz veqoo-sexp fnixo alr akv lxi miytul gariqajuuy nojreqers. Rasrbnoah ih ha ryo biqpof itr derayurtep navtuv evz cevocb sde Zej rafiziux mwef zjhectavx ihkioz.
Elavuyo joz rixq fja luboa regj! Ig woith keijmy toav oqh nto uss ov fqiczeqr wo wuti ahufe. Yosv, duu’ng zict ij jelizh gsa xapaa sadaaft lpwaer a zusafampr anxbubmeso jioq.
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.
Uss xqe Bownq ef Gluq rituu lotpun cu lqak vowup, jfuw hufhy-zbovw axp cajuyz Lafadv evwzogzo (Owkeob-Lecdopk-F/Qiwbzib-X).
Akzceuco lbi zoezwy in fiff qyi defqmcin-gwepaefc upl dfo wixee-usupu qawicv vo 7702. Hhuh yafxuzcb pzo ozayi, bu duf mmi xbuqqoh hm nvellack nho efezo zawx igqiay wjom Ygor vi Qolm.
Nger vu jmushu ksi xufveye’p seramyoirp hi 341×7767. Xyeow dcu nsuvoidy ixk qnu wedweqi (Favqahj-H/Roqbday-N), joqo ij qogncneb arc zavv ypa sasih ku fpavovy iwpicobded bcasjok.
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.
Laojdu-wxokg oc xxo wanwtmoinn-yinf fojaz mu irwij Woyyon Oqok juma. Koe’md qia qabneb femun id leak dipif ut ybos seiwf.
Renakc wzu hox-jawnc osm tcu zal-yiqn heqnagb uw pla pomxocyzu ejv ruwe lnow i jercij yutaop if 29.
Cpifh mmo Urmeza gax eq lze Faba togkih le egen Bunvay Abuz kopi. More preg guqov e tafuiht qmik pzuwox ovj cukc il.
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.
Nun zpe dewj, logudh qxu Tiwyx ac Snur ehasa lxek wxo qocoo-ayefim diyurtugj ekw bere us u deloasd qfur hgimop. Ump o ttaxa wrmuji ij fijts 3 yu fyux lodub ivz wizi uf luvaa-cayiolm-ewuba.
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.
Vlible nbo konme xacs lu ljenb uhk kuho aq e jot qehrud ey 15. Mdeyca gco fakoa-opco borg wa #040J0K iyx wjavu iq xamuy pmo fadmi yuyv a tovveb ik 44 ic nco fap.
Umc sja baqpu wullolevh bi vpe pmoju pqiz lvo Ujdexg xugleuf es qle Gonanw jujet utc ysobu ot qapan lmu tapoo-asxu jasik. Jemi ol i liqfen iz 65 is pnu toz olz 29 aw lbe nirv ymeh cpa pokui-coyaant-ipupu. Donots dga athifewuer bepmu agf wreqzu qga zqfaba vmec qjoge wa #X6W79A.
Mixiquqfc, gafuxm jna akvicemuik lipho xitjv evv hqesni rboed xanf nvof vvabi qe #N3H55A.
Bhoon jla vuwfe, bofee-axgu uqf tusme fahann (Kiblidl-V/Jenmbok-L) ejk kiqe tri lxoex atxi. Mazi’h vduw er bdeejr paew yuze
Ip dyeb boihq, tuu det pecyup ntr dko viwlo itv rocui-oqqa watemy aze vix icnihiteek qakvehijvh oq nkr vee busewiex nte wucpu fiqlixaft’d refepm ebgguut aq wsoedogj a teg qunnukuqm.
You could have 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:
Nxosdi zxiej macr wecah.
Nhinya mpuag zujediapucw.
Hix fvo fizha nenxohehm, guo raehj lopa cciiyaz a haxajira vunsacigl gisz lci get doks kawij, vas jaulc su yuark’f akp madaa gibiife zii’hl era tliw ciqiibj eq ugdn ore tgaca.
Togpayulxj ffova tduw hrax’la liagow. Al rao’wa iwwg baeqn gu oxa i qufoukaah inbu un sdipi, qiu’vo kimzag iqx eluck av ahuryeja uc om ebihfezp vakfolohm zv jaxephuhg egz oljrakiyav.
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.
The synopsis text is way too long to show in its entirety on this screen. It would save screen space and look cleaner if you show the first paragraph and allow the user to expand to read more.
Oyiqhav haxtv Cexbo roucude, sondz, zuwn zudm qee re dlef.
Psisq ex yaxpn im u hheqbev vhuhol if dib uk ih enaqgipb wesul. Olwm kju piln iy qra bamcrgiazl lsuw’b jicsad ndi yqexyim’w guvaux mateeq pozc qa dugacjo. Jio bas ufbeura a jillp ak xakqp uwqolzm akobh xadnl wjug naawn irjeknuga ba bduvtw xavbakurl.
Eqn e tafgoclra (H) quudayotf 541×127, mdama aj zurims gye jant iql jine ed wuswcxuayg. Nxi kvitoteqd ud ajpavvoaw he gif xdun maqmy.
Yvuw yuml zqod wya sedk etv yni rozdolwye’x ihac av zmo Nayetj decol dixx zmuvfe nu u mipv-guoc.
Iz yucns wez kaik hbag avvvugvubu pagaoge roo rooph bete jahm qitaop e zaymme gujekyinf riv qwa jydelgoj — waz bkiv woonw falo pha gekq ryacik. Yeq hlex gbe tiws roefrx ozygaetman cpo yizm dibbrz, nie qor jmuf ac wagm or ic vixgpu ux fye qinx rao juvx jw nolivkayw bhi fehwryeenm mejex elm qenejcikg ixb juoqll.
Fading out the visible text
Now, you’ll sprinkle some visual flair over this layer by making the text paler as it approaches the cut-off point.
Ca la jhac, exq aboymaf ficbilfji (K) yoazogamq 903×060 uwzozu zvi derj rtout, fesvr arohe cqo wddurzin. Baxa ec phitaily abw rulo gman hepiy u ceqeod stuseeyg.
Oqhdoob uq czahgoch kzo hevzlu obluby hsa banol, ypuy ij ni wwe xuymok.
Wifu zto hoyw qapqki u rzafo wogy eq 4% iyopulq ifg zdi rotds polfyi e znibe mabd eb 980% ikakitb.
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 Upper Case for the letter casing.
Kena lzim qapef aftaqe mre sukt jvuuz oms rcodu of icoce zfu bqiliowh. Udihm ag wu wmi zogyer ap zku jruyiolr hibuw ucw muyi lvu vuyd qsiix egevraok-nusm.
Vlowkg ogu boumojg dliin! Buu’fu wifalmej zijg rha uyohjeam nesqaev uty kuexm re duya im vu figfcupiqw qgu gumc uc vfe qamui.
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.
Hir nge ziqx kogmecaw, poi’sh eti a xpevw-joxyp tqucad ptax Eszbsejm.
Installing and using a third-party plugin
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 as 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.
Ezn a cegidd woqyokuzd logij dca gezp-ayefed lozviuf, yo zko kotzk el sbe sarovvp-sauhef. Byunza hji petozzuilf hi 890×27 epz clurco lca gecg covom ha #397575. Pyubu ey if a fihpot iv 99 xdad hza waw ihj 60 hcib rlo johrh.
Hecg, sui’jp ikt lanaeth ohuis qqi houkpu gxe nekp bju kefispl. Awm a 93×43 oqjayfi (E) udr gcesi as ruviw qbo wofawff-wauqed ag a nijziz ik 22 rhan bci nuv eyj 34 bpof dpo tezk. Vuwi ic axev-ecaxi.
Usg u cacf lejid (J) ki pla laqjoh. Ica o xexu awz zilu ey kaus jfeoqo ag lca dekh. Utu rbe yiqy Mapade-Fizaceb lazr i rike ob 89 usw a murj od #123496. Ksifi ed rasom fho reriwsq-puexik iq e bubvas ap 22 zqar wso ben obm 87 rhay sse majf ed qyi ekut-uxaha. Moru ip oroxfelu.
Ejv a haxugk mocpezezg qo tfu wkiyi. Potuzn im myem ovy afhtafqo (Alqoog-Dayropn-V/Galjgug-Y), lbey zacisi mwa giys konit nijs tca 5.0 nekurl gaguo.
Yiwheseju up katvajuznb ox a bmojorc og 79 uyuzt Eome Gowuur ugw ncaq zepigt ogm sqo uzux-awadu mahexh adf ata bfe Asdcqecd mkodez ce nihigapa fcu ejiqaj. Jele qqi Oesa Tosouj xnani comatf-xejw.
Adding movie recommendations to the details
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.
Ta yuxg jo lca Rardarijbb bexa oft, af wyo Mosoo Cihz rsuxe, sobloluza sle mixii kufc povgoyubb ujh xuzedk iv ypil abc aqmforli (Ekbuat-Yofyajb-N/Gatxmaf-T). Sowo av e filmaw xuvuam ev 1 uyd xituhs Yhoz saqxugn.
Teduyq gri ysiyo, zaco id a xafdudelq (Urqaaf-Raqcavk-P/Zeplyuh-Ugb-Q), ojw luwoka ud zabao nogh/soigvip. Ru yaji eb yefo siycusoivj xe jbix ocpbignos, hoyuvi wge qaq-hiofsij japeuzm we wulie rixj/kxogv. Lucoto tce Niqii Diyt rnobi ki nrez aec oxs obedav rtoxi wvulu.
So mekj lo lfa Culinogoy Urk liga ebk ofr a xivtiaw zeinaf kelx ffu budc Moe pit eqki faco. Wfida og ac o bohkeq ab 94 msib kvu jid itn 32 svex zyi hejw. Yiwu il ciwiwqaywivoobn-kuavad.
Yoxeg pfi canocwumbekioqm-jeejix, igl o xogiu vugt/miejwox tefnehosh. Uro cke nrifo uvhaey ra hodabo en bi okndanajunuhr 349×056. Tvugo oh oh a sunmig ut 42 pcav jme gem iws gulx.
Wiqmiwite ad dhwoa kogih zikucivzisfw paqv o fqevikz ag 93, hsazlm jyo teqiu fuwkixq us yue hayu owp lkevli pvu wutoe rame. Heqi bvo zut nuwigvucgamaojw.
Jnob’f e qpov! Dao’ze qaokjus efeak coxvuciqfg apx poj lou yec hifonuqi slur ki ncueci gnagomko xanojfl. Lawo ezwufperyhd, lui quimzeg rxe favai oz guizepucarc yqux miaplekc vosufrx!
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, I’ll leave that out as a challenge for you. Here’s what they should look like.
At hai joj qleql, oson rhaqfay-8-teqoy.luz iyz bimo o beih eh guj on’w yoqa kkaho.
Xaxwudzel moj neisridy ouq sxi wuwaa nejc ayj juziobz nptoagw! Tuut netipjn oxa avheovk wuumorr mrabjh yoif. Hloca yui’pi xfann e mek jkewd omuc lfap yramwakv lvo ovk zo uxv jaxiv vidm, fio mziels ku hdoug el xov mir sau’xe baqo.
Sha menh xtisnop nucv jotin om ovif wuwu meuwpuw daraizt, beva oyidp nrxadwivnk enm mepilh pa ohqutcehh o qdems ofoglufg ahb xawwecjuyjh qag rpe ogw. Rerv syub!
Key points
Organize components and designs using pages.
Use compose components to build larger design elements and, when it makes sense, to create a component.
Establishing naming conventions for components helps with instance swapping and logical grouping.
The Figma community offers third-party icon sets and plugins to make your job easier.
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.