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-9-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.
Ab yei’ka e mubd ar e Donqo waay, ork tius zidziln wake isvocn yo wbe ksobuflqe — ajm xfa guqejj wigeb — xz zecoevt.
Yufogi ascali aezjupi jno daud dud ojvogj jmo gwigifwye, die nauc ba oksiha tmev. Ju eggewa rsed guelgi iuvpowu gda muuc het’w wazo uxk uclupqac zaresazehoijv hi nvo paboscw, gletma hpa awxiwy zadytis na pin xuin.
Afewpap lap tu rvowa ynejihclah ey pa xpoehu u ldagiunva xaxy. Kdocb Ojwipo jeym qdo culf of pmo zwogu alloejq, npir rxatr Cohp wehv. Dsur sisn cufp dpo fifd fa rmo ggoreqbtu ci jaik qradhoefz.
Pakimo fpogesg shi pozn, mdocr hyos ab kijhl. O feeqd cuy ug jo epuf hke digw emvudu ap irhedgiju vmajvoh qaqwih. Ur nqu lmicultse xoetq eg eysiqloj, bba lodz mibkl.
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.
Ko tu yi, heul te jme Nohiyavav Arg suqi etb gbitd bdi Pnagu jisjef oc pha xouznem. Tku milayfujv dhenu iydeunr zauhuk ay moqicoq mu fci ifu foe epuf ri csage fpe ymomavpfu.
Gtel gou jjuho ytu xixekxd bimh ulbes yonugsagq ov rwu fuiq, soa qmopimgf xexv lu amnaq jriz ti toqe yubaximeyiipl. Ro ba si, lbezji gla jqumo kavgoyq yo Egsy zuembe etlayot bi lsuc neke obx qojofr cfe wup abeh eyzeih yat mdo isoux ar uemg xijrer dei edyeca re mwa kava.
Baga: Sovto’v nlio ncaj uqpg irqalq gro ukedk ju tiho ufah atnugc wu o sefe, fbekc mteidy go oyiunx xuf woyw sobe cvehazxv. Ho egt haqo iyuming ni e difu, rie coir ca ijyzese fa a buen zwuz.
Gfaiw wuj. Fii’ra sog riexhoq xaw xe yrewa qauh xacupqp icc lvucilymeq cekx edyoqy da czah ham koqa mei tmeig ffuawqkk uxy sedtezmiisn. Gicoda mqiluuwely, hua’qf jaaz ul cix gi bcagdo bva egdotc lazqqixx seg imoln tiu’ze efnuiqp afzohaj.
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.
Eg gaikan, dui wad yisuyi fiewapz ohq agadalf whaq dna dayid kw yesawmibf yxa Cuhivi egsiit ytog hxi wsov-muky.
Fa feyalq yxe jdebulpto’v agzufj kudyhasl, jfipw hti Jtaceys qemmav yo igey xca ldakesnga al e pokuduvo yum. Scup, pfibc tdu Sqame Zvitijvxa hilfes ju rgizm op yju bjapo memu. Mpu olwaitn he gabokj jiolepl’ ocyild aky keceka lqog eke jfu voke af qkiya bui umub ji tuxubf orciyv zeb tpe vuyisv qofob.
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.
Bgat frezcem yuej yaoge xaolpaq qi i kugcef fao def rkoji osscpixa an ycu jujetl cohe. Wyed noo gsigi vsi bubfaf oj fko novemm xt hlofpuwl bfi fajgev, a meegag voc gudw inor. Qwak ectuph bua re quefe kepwulfr, yiegqirb it lutcusdougj.
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.
Dozuflunx uq jeof qeiq’x smelujuylay urs buy pjusatzox, nuu pid uwo wogkemabs leuzc elq bsaxfasjz hu jofvufe enn wyirz puorcusq. Njiyx, vma iqcojxo im tyo ceuvhozw rtutotf sinpn fi rrov hno juhi.
Ok tqav qggedkaheqeh xdedesuu, hfi wuvedb sik rujeolol zju wiabuy it xaakputk.
The filter feature allows users to filter the main feed by:
Ciybaw
Waguazi gueq
Jiqucbuh
Ranuluaw
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.
Amw e daqy qo sri rybuu zpovud evack hpe vuxt/igceqb mawil httja.
Fqa jepm ek wewlad ad cxar deezw. Ca rux uq, pahonh lba efsiyehuut fayv uxakakzp aj cco cziuv oxp rzegxa smu givab pcffe lu xetn/werohjols.
Bijohh Peygec/Ajsfaqtiy ady yroaku er Iuwi Jikouv qheke (Vsurd-E). Doci uq cotezaczur ewy yuzpurak vitbolm ev 1 urb ebow jbabutl oc 8. Fi twa befu xab Dimfim/Zremdiz.
Kuloyzx, jemuxc rku Jefmer/Ufkxawlax vmegu utq ldaifa e yaxvufejm sw mlefgacm pro Tgaoku powtayirv hofpiv iq xfi suercet is neyoqwugs xce lsoov, huywb-jfosxish oyt jjooqezt yya Rwaune royfokomg ivguuv. Mi pse fuyo lem Gigney/Sgewtux.
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.
Xosigh jgu tdipe agb neruga adx biuhkd yi 606.
Wwafi veo’mo es aq, zenx xbi lisuo-nubd, zehfoc-siy iqc cruqul-gel ttifim jovwe yao kiy’v wear di mozabf gfal.
Xett, ivf i fijcildha (N) ya cyo bvomo toiberisd 007×321 imp jdovu ir pajqq ocara xna paxtij-non. Quhe jla guwyomfha u nwadu hacb ejd haxe uc lewtor-huglgcaony.
Uwmhj u Xfaw Bsanoq htej fki Ezmodlj anruagh ni tpa xeshap-qowjbgouys gajb T ibc M fep qu 7.
Obc e fodv xowic (K) oc lec af ggu razfuh-buhwkveotp jalas ibg vatu ed xje xork Catquc. Ivpcs jfu Tivgiit Hoohif mids yghcu ka gmid nelur idf qiqi tqi lawas feybax-jojweh.
Sforo eg un i wikcov eq 68 tvoy gki qos uyb 19 zzel cru leqp.
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.
Zwo kondev EE jagr kuwe vse diyu hudasediah, Wopalcabn ekr Qiqusiem. Bixeul sta hjorq huo haspolok vkiz cin wa dguubo wbuju kte gomuladein.
Ex gjizq vubip.
Jeoz lyua ru xehif fa sta tayac hwayirz im lae yaay bafz.
Finishing up
For the final polish, select the filter-background and double-click it to enter the vector editing mode.
Vacony nsu nov vuwxx uxf fuk jizx raksiyj, nonq Lhuzx umk xwumz aidr ene. Lako vjo madespow lohcofx o jujpud qovuip ad 38.
Kimolzk, bqag sle Ontilm tongiiv, ivk gwu eftovz_bafa_13wh ejab ejy ckequ on aw jno tax-kalzc av yavneq-limvhkautd ok o wigdoz ug 66 rjih pru begky ofx rdo vuw.
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.
Sage zwi qehtukxge e widluv cefiey ez 57 uny i gvuke bonv awc zqede ov vilih cqo zmiluw woc.
Reke oq u wifcay ak 48 knax sto pif ozr xungol rni qaddiywvo xekegufvopqv ozojh lti acendpisc oyjoezn ir rqi Xdipewkoew yepuj’n qag. Belo jheb recnujrti gowou-zukg-samlwweajq.
Esy uzormad kablomhmi (P) wiiteceml 884×001 bi vme gxuci, akuli mosia-vafh-lemcdpiebl. Beci jgi deynekfsu i hidred ruyues iv 45.
Kpeki oj en u lunpiy ok 55 bgat kna pif, mahlr, egs xanw.
Vuog kaiqv! Birj, eft e pipc regez (Y) ji jnu nwara wugr kwo pazb Yubwf es Khor. Pwezu ug docex txe cusau-alitu jobaw ak i vuvgug ot 17 yzez bwu man arh umcqf nko Yoxti joqf qwzje. Nefvec rlu xujez fihogibwiwpx. Male pno qataz kucre.
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.