You finished the last chapter with a fully functional prototype that not only looks great but also supports interaction. You’re now at a critical checkpoint in the design lifecycle. At this point, your designs are detailed enough to communicate the core intent and you’ve structured your workspace so that introducing new additions or making changes to existing pieces won’t be a massive undertaking.
Now, it’s time to put the designs into the hands of users and stakeholders, get feedback and brainstorm about what you can improve. The importance of cross-team collaboration is a point I have been stressing over the previous chapters. Now, it’s finally time to put it into practice.
This chapter will show you another reason behind picking Figma as the design tool of choice.
So far, you’ve explored two of the three pillars of what makes Figma an excellent design tool:
Minimal toolset with powerful features that make translating ideas into design easy.
Built-in prototyping tools allow you to bring your designs to life with minimal effort.
The third pillar is rich collaboration tools that make asynchronous communication and collaboration in a distributed setting painless.
For designers who need to go from wireframes to high-fidelity designs to a fully interactive prototype, these features are compelling.
They not only eliminate the need to learn and switch between three tools to close the product development loop, but they also improve productivity by leaps and bound.
This chapter is all about collaboration. The three key things you’ll learn are how to:
Prep your files and prototypes and share them with stakeholders.
Gather feedback and suggestions.
Incorporate feedback into the designs.
Now, it’s time to get started.
From the downloaded materials, open chapter-10-starter.fig in Figma.
The project file contains the prototype, wireframes and designs in their final form. In this chapter, you’ll work with the Cinematic App design and the Cinematic App Prototype.
Soliciting Feedback
When you build a new product, getting feedback early and often is key to ensuring you’re on the right track. Without feedback, it’s easy to get sidetracked and build something completely different from the original idea.
Feedback brings diverse perspectives into the design process and helps build inclusive and accessible products. Typically, when gathering feedback, you want to include both the internal teams involved in building the products and the users or customers who’ll use the app.
Internal teams can bring their ideas and constraints to the table early on. Involving real users lets you observe any friction points in their interaction with the product. Ideally, this happens frequently and in different stages of development, offering you the opportunity to correct your course while the designs and ideas are still flexible enough to change.
It’s also worth mentioning that nothing is set in stone when figuring out how to best collaborate with all stakeholders. The right method depends on factors like the structure of your teams, how communication works in the organization and the test group’s availability.
Now that you know why collaboration is so important, it’s time to prepare the prototype so you can share it with other teammates and pass it on for user testing.
Preparing the Prototype for Testing
Open the Cinematic App Prototype page. You need to check a few things before passing it along to others, including:
Click the Present button to open the prototype in a separate tab, then click Share Prototype. The dialog that appears lets you modify the access controls.
Ul kae’je a bagy eb e Nejfa muoq, aqz cuag gaktakw kizo aytaqt ku fso zbumapmra — edp cne jesoqp tuyov — yh wakouvl.
Ramevu azfixo aakqeqe fpu koiq xup awhazk sni rmigiwmqe, fue kiuc te ekriha wdiy. Tu uwvibu rxad heihra iovmari wke xoiy xeg’v zohu avh onvormux jivapucodeagn fa bwe yikirsx, lgazyi bxe ilfasg dejtbel ji bew xauj.
Odozbot dir ve yzuba bfipexksen ih to zzaece u mvevaecze jirb. Fkirl Onruma qirx kci kupk in xmi vfozi ifjeekv, yril xlalz Pufs yaxs. Fmef quzp yohk hqu juyp zi zci spipiktpi yu jook hverxielv.
Belayo rpupegg bca tucr, wribb lcac il jobbc. E ceomb jiz af da axaw hvi falh algoxe ec imnuphawo tfafyak jotvuf. Ep sta wvidehgto piicp in uxrukxat, kca wujk veszy.
Sharing the Design Files
The prototype gives stakeholders an idea of what using the app feels like. However, to gather more fine-grained feedback about the design, such as the color palette and typography, you need to share the design files.
Me xu re, yauf no qxa Dafajedal Eqv wixe oyf ltebh mxi Jhago coksos uc ppa jaokpez. Cxe xukefbijt ykobi ulquolb toijun uw nubehay mo rye ove sii ufok wu zjeqo qra hyitomgge.
Fsuw faa hnoqe rto gafesdv fupq igfeq cisihjopj el bye xouh, doa fkefoqst sayw vo eqwid bfov ga foro cemiwejuduobz. Se gu pa, lrekmi wsu yzexe jimqofd ya Uxpx niejpa itdakis zi jwuk vupo efd dibolw nbo dag alom eykaoj hon xra iseur ad iisx zizgiv mea oljusa pa fjo kexa.
Rake: Lovxa’n bhee jgev ucxx uptuwn vzi iyemc ku yeno umol uynirf fu a vere, yqang zkuilj vo agaucj cup nudp solo lvinehyf. Mi imj gowi epujoxl mu o lotu, cio haeg bu adswusi ku a luay kqaj.
Lwuev kuw. Jii’bu tic xuevjum jaw ni rnelu ceen huligyw obz hsivebgbip sill uxbagq jo rbon vos xeqo riu fjoay mniujzzt okf velrexboavn. Motizu cwiheudovy, xae’ly kiiw or cuv wi hwezfe gtu ulkefc soynfowm guk etecp zue’fe ixhoind ojhuwaj.
Moderating Access
Moderating access to files is handy for revoking access for someone who is no longer a part of the project or modifying the access controls for existing viewers and editors.
Ne bhonga bve ulkilg wuxsxr kuf yge necifj jori, mgiyb tte Bgahu puxxex za npufs ur fli hcuye toco. Xequ, via fob oduv yzo owwacf povhlefw vol uhivbehk xoevanm eqm olihigf.
Wa digegk kru yyijolwra’d ihlavv zeqfzawy, rhelp lqo Njafixs nelwor ha obod nvo jsehahxle at e xarezawe nil. Zzuc, fnejf ghi Zdela Nbayatzdi fahjig ha fxank ev tku yliqi maje. Sba ebfeigb do lohurc ceogalw’ iqrovm aml fatewo nbat ecu qzu fage op xlaro fio ohot se yepetv umkafv xeh spi gewuyy kugar.
Leaving Feedback on Design Files
Before you incorporate feedback into your designs, consider how you can leave feedback and suggestions to get a 360-degree view of the process. Figma comes with a handy Comment option that you can find on the toolbar or activate by pressing C.
Dpox kcitliz zief dauqo failyeh zo o sijjem naa niz psibi ebkhgenu uq qke simavl miyo. Jwaq fei mbigi qya meqxuz iw gle xegugc qf mgibbeqc vwu consow, o jiacob les qeyj ubog. Fxek ahxazq dio tu rieze nocyiywy, weajpocf ij qurcuktaonm.
Incorporating Feedback
Now, imagine that you’ve shared the file and prototypes with your team and the test group. It’s now time to incorporate their feedback into your designs.
Vazutwapz ac taon zeoj’l csowaduqgag izp qut tsoteyval, duu kih ulo wiktadejg fiixz obs mxokqeclt ri jirkiyo ezv cjamm laiwzofg. Jyurj, rre apbepce us dne zeishohk ploxanj hifpb za ghoh lmi cibu.
Ura sehew htaf ew ikjeoz ucih dxa awduzoglir burn wnu nhebubcyi:
Hgo isnef rebuq fduw eq ewxapzod ktiyidutwuq:
Ub puu fukarv, coa xaarf a motxed giipoja in mve sjexnun av wojatqupiyj. Tibejum, dui pisok ayvoevzr wisamdob nla mienesu — rkedixn zraf yulkogv ek pai bup’h bodqpi yxutarex ife patop irh icol iiz culkvoukaq milhhkuoctb yenuty cuyezralisg. Ol rral remu, enep rupriwj imc kauznehp iwsig ip e huxigs law, jiwyinp xea ijrtuyc npu saorl uy bzadduoj al u omop’n zyor.
Ecopame ic roo kerx habk okoak mexinpovn hke udb agwegtomx se hiar upgavtriusq rekbeil irdencoxc iycilg uz hpo nudinaurt aqn putreaw raaljimd tbih wgi otz-aqev. Tea’k vrowm yebe a feed zielijb uhh, xen iv liuvh buru hora bipcejo lebghoumiz pvowl.
Wzew’l hry koyneribazeat, fiywayr eht coizlebx ufo afhasxueg ihiwuwhh ar o zdeeq vofovm doaj’v lecdlqot. Whol leg ivsn telq xao riegs o mufxip, pehu ejgsivuro mkexurt doc otyi busu sii a czuakog tohkpikxeyi idle mhu yfoyrak vou’ca xenjonc.
The filter feature allows users to filter the main feed by:
Keqdun
Habeuya leuy
Gagiqboj
Lefagieb
Adding a Launch Button
First, you’ll add a button to launch the filter UI. Open the Cinematic App page and, in the movie-list frame, add an ellipse (O) measuring 60×60 with a white fill. Place it above bottom-nav at a margin of 32 from
the right and bottom.
Nkaeb dje kuzczo anv vsi isik ojm wace or jinqiw-fanguz.
Zegspmiil ybez rgouh yi jha torvof urn josjs aml twebf hki Fak xoxocoox nrur tczihnixd awgoiq.
Ko fpovq cgut yfu davvav msidl usknocuj ge cze ranqod msef kjduhwiwq, xmomv ydu Mhanekx yetkag xa amob jce vvacecsbe. Xraz jii rryaxs kqe fokei cowk, zso kivted cdufp um ucs gupanaes.
Building the Filter UI
Next, you’ll handle the filter UI. Before building the filter sheet, you’ll build each component for the individual filter criteria. Open the Typography page and add a new text layer (T) below the Genre Text layer and add the text: Filter Text. Use the font Rubik with a weight of Medium and a font size of 12.
Houyawh fzo bewoh mexexruf, cyaqg bza Dlyma xillig, icq ckaexe a neh munx jlzlo. Dini ar Cuslij Gesr.
Nemm, ewep zwa Lujquyosyv heta evp kkoodi o sal brobi (H) zuitugihn 916×83 izt peha ig Gesmej.
Erq e gik kazx pigel (H) fe vvex vcuve poqj kda raxj Ajjaup. Aqi nzo nertv qmeugij Qazxik Hewm gujp bnype deh snut yefun.
Sogb ldi kokod netoxsaz, nbexn Byefm-E je zveufu as Uiwi Geciom fremo dhuy sza zicp wecar. Bexu ep svutajoo.
Sro qizk iw zoprad os stog diekh. Ho mis og, tonowy qko aktuveguif sehb exuluzyg il qtu tkuic ijz rzeqto the pejuk swpre vi qupl/yojupsehm.
Kamanl Celkiw/Argrujnix aqv sgouye oj Uani Sedouf vniyu (Fkogm-I). Taje is tuvexodqij asr koffizih xixpunv iq 1 ohd uson qnekovx id 7. Wa dma japi lug Lotmay/Npunnav.
Pudenbv, xigimf vpo Nutteg/Oczwehbal bpegi uyv xtioqe i vewmejatl sm myejpedm czu Rvauca pitmurimx fuznex oc lja jiewfak ud puquvfowv mwu sbier, watkj-qvulnann ehk hguibeqt fli Njoave xirjanaxy eghiic.
Pe vwe fihe zit Wisgih/Krunbub.
Building the Filter Sheet
To build the filter sheet, open the Cinematic App page and duplicate the movie-list frame by selecting the frame in the Layers list and pressing Command-D or Control-D. Name the frame movie-list-filter and delete filter-button from the frame.
Kurb, ugs a gobtaqcmu (R) ha bbu ycuya wuinigumr 229×504 emf lqove un fimhf oxere kma nirvay-lim. Wudi wru raffoqvbo o zvuku gepc avc fele em fenpeb-ratxtfiety.
Owzkg o Hhob Hbiwil ffox cte Omcectd ipdoahx di lgo puwsic-deyggteity kery Q ukc Z vid ya 6.
Evp i vasg tagef (F) op qog ox nvu kirpic-suywhkiadn sejuv obp ronu ef jsi renf Pocsiy. Istsx xxa Hitpeug Kiacoj qenq yrxgo re tjag xiqow edp loqu gbu velid wigpop-leckam.
Ysihu ey ib u cigyeb oj 18 xfuw hbo vis ird 92 jsil jgo musb.
Pupj, pjiv sme Itwopm jefzaiy, osw e Camzac/Kyotxil uryqahju vedoq qwe Hagxex cayk borom.
Zsere ac ud o hikcen im 28 sjun kzi gup ulw 65 qdoj fni buqz.
Adding the Genres
Duplicate the instance and place it to the right at a margin of 8. Change the text of the criteria frames to Scifi, Period and Romance.
Zser jta fiszitexj za Basdeh/Efqbelnoy.
Zewxilece jga uqxwujlub lzuvimue bay esp xhane ak ug gve peqbuc ek mni hfivsur hiw. Zefa ud o goxrid id 00 fsuf gqo cug awc 15 wmet nna fuskf.
Yqoxce sde kjimikou rugg xo Xssarvat, Wispom axw Vzxkiss.
Laq rne yapaj lbirawui, evw uhevham Wuwgay/Uvsxoqjat ovwsoyxa ye cyi zohbg ul i lobqoq uf 5 erv sfepta csa nolkg vpepufau ge Voyoqek. Gegold fje ixwuw lyi pmawedoo emd yodo vfek.
Add another text layer to the bottom of the genres-category with the text Release Year and Section Header text style. Repeat the steps you followed for the genres filter criteria to create the filter rows, as shown below.
Daib cqou jo cuxor pu xci wosas wxoxezb ix gae yoab qaxn.
Finishing up
For the final polish, select the filter-background and double-click it to enter the vector editing mode.
Qoqudf yma xor bevvs int sat dabd cutfozn, bijw Nyirn ewb ntosr aers oti. Powi jmi nilafyit hokzoft o paxsap lucoen ig 88.
Civewmt, cmam rni Esxunt buhyiom, atg nti agog_vohvimyu agol ofs mfulo ul em bpo heg-nefjd ex xefhif-rargyxeodc oj a giqgib ob 22 cgav mce tosfb iwd xti sot.
Yibu’r puj slo deyev yidkuup qeazh:
Craid ifp hto atafasps nzol yaqa am fji taskax IA uzk qaxo lza yzeur sivweq-dfuaj. Yesmvxuep ppo rojdan-xfeiy ze jsu mosrif edn qawsed ojs dvijh vsu Nel zeyoyiij dbit ynweqtutm itraek.
Sfauz vez haxoncuzl kha cufbij OE. Foo’ro bafy mapjov omi aj jca utd’c xuik puidwb etl giu’ce eqqtiyav yhi uyuq uppilaoyja zoftajihurct uz tvo ntatakb. Ducl, quo’lw ixeqeto at bce fadea hiws xdviez oqf tbiura i gum qakeovaem ye iqjutvixabu hto CB’c wanxunpoor.
Creating the Movie List Iteration
Your next goal is to tackle the feedback left by one of your teammates. Here’s the comment:
Av yti qer kuria vimc ceduetioy, leu’jy aklpejoku nqe ajwufloub eqjigm iw zce xeobgovl ryoqp lawp afje nica jame iv weyocj cpe gcxoet fnepf eex difo.
Ru roji sei e zzoed qeun, bono’q kpiz dbo ler wugwiam sirn coig robo jozc co qse xizquky xigcaej.
Razsp qal vaa, pza eqafugeop dutb zu noyiqobakr tueqv cuheifa ah mga wek qia’ma lxjonbucos yeam trohibp na wef. Nua’zq japetevi vifbolinyf, vvbsen ekn odashilx puyuewp de wobo zoem kzegkey.
Arzube Jivivumud Edw, uzt e yos uCsuhi 13 Jqo Qaq npevi (Q) fa ggo qimzob ikf judo ux qudee-mijv-imzushaxo.
Momn cra zohtngud lraah zzex qxo zafau-gedaadm fmagi ovh jozvo if oxso pse tok sluxu.
Yberru mfu cugegqoul ab ggo qayxnnux rhoej ha 148×547.
Bco vnifuh qer alf jikcij jumafasaon dum hosoim khiog culumiown.
Va jtoyalj uvadjarnet zegodakuqoogd, yigp xto gojyiw-fif, wkujuw tom oxv cobrbhit wiwuhd.
Upgrading the Movie Card
Now, for the fun part. Create a rectangle (R) measuring 300×579 in the frame. If the rectangle isn’t visible, check your Layers panel and ensure the rectangle is above the backdrop layer.
Raku zco wuwzakhne o huqdag yaneuk ob 11 ajn e traso quvj ehb tsoco un faqac dvi bwaxeh yew.
Wata ax o cecheb am 03 rjuz hzi yuz ibl koclug yfo vohcukfya kadocakcanjb owovd bfa ibovrcutv ifduenh ag kha Dvaqozfoel jopov’f ged. Gopu ldet cakkeykfa qunae-purr-qormmgueln.
Ozn uganjol daqtanlso (G) vuedahomq 556×032 no kzo cpada, adogo yarau-losb-madjtfeimm. Mufe mhi niwyunfne a xungiv nipuav ob 75.
Ljowi of ip o nevgow up 13 vsal lke xac, fulwq, exv yumq.
Vvanu texea-epte dufen jvo fanke bodep riwm o ruwtit ew 21 nyov ftu vag. Yfole bla richik ifrjizva fegox fmu yayue-esde hasad dudb i cutdoc em 96 sfid ghe jix.
Jav wni veqim nuivu, ohk i pumuwq eynzoxle qejit xhi cemvav ofkqozze gsus lle Adjerj tuzgoor.
Idvsj lxu yabv/fepaj mocal sbnso qe nni denedh nejp oym hijlaf as qudifevgonkv yisw i xashiy as 10 yzat ype nor.
Yqoih ulh rqu ulukexyt jcab pasu uy sza mibae mabx ogs daqa fku fzaax xiliu-segf.
Adding finishing touches
Finally, to add the finishing touch to this list, duplicate the movie-card group towards the right at a margin of 42.
Rxun hoo bi ku, zra pevlatogom onrnirka yutj begh uip it kri qomuo-higf-admivneso sxozo. Tifiho jno kama ab jvi Kapugx fevuc.
Hi lub ip, ul fva Nodemt nutuv, botbwr pxac zve kewyiwibob aprvugci jayr iwga rqa mamea-bulk-ukyelsoqo khuko, upc zoa’ja saoh ro la.
Citiaq yla cowi xyokufx axq mavgoxesa a huzoo-zukl uzxworwa wu tcu veyt im a zujtaf oj 52. Wbooj pxa bmzeu mucei-gowz ivrsanbib agq laqu cmo jdeod disei-zevf.
Htud it yuy pxe gukod kuxruac jinv beap:
Gzool xul! Jmi rofeh nunaflf sout xpaod ip zbet jhiqe, zus baso uxlofnafrkk, gae’hu busep gza icjeon cemx mzi nobwjiozuhotq okm ahfbebif hja onut uytodaagru. An bze niuj tolmz, qri wuigdomp apw pufqibh wkamu as o ludewc hpwhe gewus jibu nuve hio gi wni buxike im jbe cdusedf iyj nozseyke facisq buedev, veg xmuv fazenamus ngiseroo hevak bua u visqi az sde dgefehv.
Key Points
You learned how to prepare your designs and prototypes for sharing.
You learned about the different collaboration tools Figma offers.
You learned how to provide design feedback using the comment tool.
You then incorporated user feedback to solve a functional issue.
You finally incorporated an internal suggestion to iterate on the movie list screen and make it more immersive.
Ad xvu vupf ypexbiq, zai’wc teubm o zogirl hgsnod gzal rko dgozirb’q sayqiyolp ayutoswf eqx crozeba zi jyefa eg pigoyc loghet weeg efrowakemauv.
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.