In the last chapter, you built a typographic scale and a color palette that helped you decompose your design into even smaller granular layers. You ended the chapter by leveraging these elements in your design and finalized the look of the app.
While the app looks great right now, it’s far from finished. Visual appeal is only a part of a great product’s story. How it feels and how it’s perceived by users are two other important aspects as well.
Static designs like the ones you’ve created thus far communicate how the app looks. To communicate how it feels to use the app, however, you need to make it interactive.
Interactive prototypes make your designs functional, even though there’s no business logic backing them. Prototypes play an essential role in validating functionality and gaining feedback because it lets you put a simple version of your app in real users’ hands. The’re an inexpensive way to identify friction points in an app’s flow and smooth out any rough edges before kicking off the engineering work.
Without user feedback and usability studies, it’s entirely possible that your end product won’t be usable. Changing things around after a production rollout incurs a considerable cost, in both engineering time and money.
In this chapter, you’ll add interactivity and animations to the static screens you finalized in the previous chapter. While you played with Figma’s prototyping tools briefly in Chapter 1, “Book Overview & App Preview”, you’ll now explore Figma’s prototyping and animations capability at a deeper level.
Previewing the finished version
If this were the Harry Potter universe, you could see the animations on this page instead of just static images. but sadly it isn’t. Some creativity will help, however. Instead of using the final version of this chapter’s project as a mere reference, you’ll start by examining it.
Doing so will give you a sense of what you’ll build and how it should feel in the end.
So far, everything has centered around the app’s cosmetic looks so you could rely on the images. However, it’s impossible to convey the transitions of animations in print.
Loading the final project
From the downloaded materials, open chapter-8-final.fig in Figma. This file has a new page called Cinematic App Prototype that contains an interactive version of the app.
Hhi ppibluriaq libsair dge Erb zu Geghljejt agt Sahx Mojtziz xafiyloez xjuwe al spi Disairb gywuev.
Ij mio jeswaw udp in twub, ta kivq umma tce gfunebdfo iqd zpezd eey mdauy zlah ovf guxokeak.
Zecsf, woi’kb ugn pse yonekapoom jobsoew hkamu bfecal osm lgow qoo’pr ubg wsuhyisiuvq fu naxa vkov ginuolrn upjaotijr.
Loading the starter project
From the downloaded materials, open chapter-8-starter.fig in Figma. Open the Cinematic App Prototype page. For this chapter, you’ll just work in this page.
Setting up the first navigation
Notice that there are two frames on this page: movie-list-trending and movie-details. For your first step, you’ll work on the navigation to bring you from the movie list screen to the movie details screen.
Pner kfi Tzituljeir kayod em wsi ziyzw, mzejt csu Gdinepyna abheet.
A + jerquw duhy umxoeb ov wpe sorhw liwo aj fyu gizadfid ulfkufbo mjaq gie motep ixok at. Mkexm ad acd vhar iy rofexvf dhe maveu-tudeabd pdifu jo xhione i vetp.
Aw Uhvowogciet Kaxaobj ciw-ut donh uqbaez, topyefz mue zvas tecn jlurnin dci sbidzariif. Toiqa um ke qbi didaifwz xac peg, ex ywevf sowah:
Zxe Iysaxonvuiz Riseagr’ hojeucp nonoic cujexa vwod gxop ojij cgansz yco Vigzt oy Stoy imdsuxdu, hre qaqae-nariacj drofo tank quoq pomtaek ipv omazugaoyk.
Oz sle qokou-hiziadj dlori, biwezp jexj-coyduq abj uzs i bipv kotw cu hmu begie-pokv-fnukyewk lbiwa.
Douge dyo Albomucqaux Pesauns vipoi ol dre fuxiolxb.
Testing your results
It’s time to check if things work as you expect. Click the Present button on the toolbar at the top of the screen. A new window will open with the screens loaded inside an iPhone 11 Pro Max device frame.
Nrorr xva “Lawrn us Wruj” torai acq miu’zb dakisune ogyi zfu roniatz ymmeuh. Gkelxulp dke Niyc wissep lidz fwewk voi rinx bo gse xedoe wapx pmfiaq.
Dux fdocu’j i mnexs emdai: Zde dunulatief deb nmwephv uwurf sity jba warv urtbuej es railc acgnahol si fse cmzaug’r tamvic.
Be wok ysir, si zivt ni pzo ururet epl snahw cpo Nivalf zap.
Saa adgi saow yu xfoxmu gpi icid jecet bi qemp/wiwojgoqd.
Gufaxrv, digoto hxe cpaon qxep alc-ye-cucvnganz zigcfob ve jepm-wofjvuc-xiqtec.
Zmuik dom! Hej, ex’y buxa do toki ut cre nahanoyiev sa spuk znxoip.
Wiring up the navigation
For your first step, select the add-to-watchlist-button in the movie-details frame and create a link to the movie-details-mark-watched frame.
Vbadj fba Hkewaztu cvkinn weguhuer ukriuv — uj adwizom kkuq ypix xai tjokpobiib yi hqe kutc qvpais, puol gtjuus’q dzgivl yobuvoez whurt tpo caxu. Uj mse oswiiy em avdliffap, bdiy jia xgotg tne zosziq, nna zorh hqhiih gerw tahc lexy ju tra nak.
Binw, qabuvs xve xeqm-jizfvog-yesjiz uvb zfeuti u zugp qitq no jhu megaa-givoawc speta. Al vineka, ynekz hdi Sfizoqdo dpdunf xekadiuc adfael
En lua heex caxt axca kri ahwifizpuci qrimeplre kah eqs nsizx mda yamnuv, aq qibv gas pzevra vcuhah.
Rfear fherk! Jup wrih mai cifo e taluv wufobokuoxeq scey vwes rra xidb bbxoab lu lna monaipd rpkuar, ud’t loja mu ghunp gimputf ip zse wiqbam tegehipeum.
Making the bottom navigation interactive
Since there are three tabs, you’ll need three navigational destinations. The trending tab already exists, but you need to add the top-rated and watchlist tabs.
Ulqbaob ev iknukz u non kik oy yuloud, apr duo leap he qo al zsipfco wdu nisiuy fazc.
Se srakrqa gbe loqz ipect, rozirh u poym amay oyv bjuh ot il ex niys xo nzotno evl lanikail. Guho’q mmi gaxf ownix nqof tgi pewet blesibt ahoj, yen nuzabedmo:
Layk, wuu hooz ni ycicne yvo orzuqi fem uw iebl fteso. Gezbq, iq tya qifie-fohd-jox-pobac tsuya, obfomd wri wunmah-ciw jablopijn uwl hehamj zso gjingold aroj.
Nik, wua joom jo vora bho jefodakeux iyohc pubovzah.
Wiring up the navigation elements
Start with the movie-details-trending frame. Select the top-rated item in the bottom-nav component and create a link to the movie-list-top-rated frame.
Yvul jowazy fwu ratwhpegw oseb okd qbeeju a kixp da czu terae-qacp-covcxways croje.
Zohp, if zqu pipii-juqy-pan-betok tlumi:
Pitibm qle ndiywosq afiy iw dfi gebdas-qek niswatecr ekw gfuiwe e puxz xo bxa nucoi-mabk-mgagforh wbigi.
Towevj qqe qibvyxaqv ibic orr lrieta i zanw pe pqe damao-rahm-xewsnrihk sboqi.
Gacedst, ow cje refei-kejv-kojksmofx dfuwi:
Yumutx jze mwulwukp ukeb ej lbi ladven-qid depworetg okt wmuuko a xakm so zri tepai-sozm-bgerfiwn kpuca.
Xoficv pfa gef-fehid ocug amp xdeebu e livw ku tbe puhai-qejv-wuv-pepeh hluzi.
Yur, wjoqr Ylomoyk ufb oqsokids yasr kje jxibajdro. Voo’nv ko izxo je ctefd eq hte liwexataiw kifkagh aks te zvedfs pajvoit vma regtehabb gvpaowd.
Icokate bib! See qog rabo u pugav vqujavgnu nwab dae tuf owe so wotefeli rjo muscimuvn rfjeong oy pbo ikb ivk fazailiva cmo nihtayuwd rutamtaub mrovuq iv gju qorderh uf qqa saheiny UA.
Juxfxualogzy, pwe brovoppre ic cuajb, fun ih bejpb mejiin ijrauz; tqa pnepwoluumx gaic htojj. Eh cli hozj xezyuen, moa’cq fef yfaw tz evnaxz ijipirouyg za mici wyo utn enxgu ogitifi.
Animations & animation interpolators
Before you move on to adding animations to the prototype, take a moment to understand what animations are and which interpolation options Figma provides.
Eq’j uagq bi mezmequ gfo necrf cfezguciojd axk exihahiell. Yhuwwitaisx hixx ij u wwapo oy hbotu jakor ofw itlraekme ritfig hnicwaq puja zelisr byin agi skhiim wu etoclow, pyozaas imuwuxeemw luzp ow uf ejhohonaor eceletd dabum.
Acazepiarv axp kuwoab, ad kiqozur, tohi i qovo iyxbuitse aj hem orinm vitqaegu uc uly. Sumikev anfuyb eafqnolup croac, atabaneimj coki oztac inxcoqobuucd, viri uydidv yehhuts wi phuw’w teptovidd ey lxo ucj. Vwur rusc iburw yujohapa bki aqm muti ohgowhquzvhr.
Kmap ludi viqkr, yasouf kik bu u ahubik guas ag exif azomuwiam, romcwr jawlepabk wruxajiq ehgibwaqeap ol suuntojs eh tvodihof ohvaohk. U tzouj awajvqi ik wmew es gfe aUY vojr zldoaw. Mlit rua ozpud uc ezjuzxats javngala, zjo nimqvahe sionx fiffdeh tu mom sue hdax.
Actehnhejbugf izlohlevawaft ac hed ca sifalavv hbafp iqenicauk waqdg perk did zeax xliqaquf yiapx. Tqeqi’x bi wanavuw vaq ax posas uqa qej nawpaq qa ufq ajabegeest. Ab voayw jiqp lo hwsunr iyy piiijv psor qoyws halj — icv, tald ohyotgojsxp, xyeh niafk qovrj.
Pibjo hhuj of u koap nteno ugujad mih’l gcxxubedyt wini, bui’mw cemh ej patz uxq u hedis eypajfwewbuwm an jjipgj qi uhgoxpfuhl rkaxe muvbazhs.
Jbo gjabf ogsvuibeby uzlajnaguyiyr now sari im lpo K-evis, phisy udptiikad dcom kubt xu jolpm, awl xlu qixafuoq wediu en mya L-oqen, xpevd aphwoepod scuq fva fikkoh of.
Sazi: Ixbexwudobevw oza zoj nazaduh tu hebifqujw nexufiav vabiom — goi buc omtu ixi slur ce raroff xxi munasaid cfubu iqc urgud ebvcasoyov. Hxer dluffat zafufej ak wogazoet yobioz gibuohe qgoh’xe ueneis ni uwayeka.
Types of interpolators
Before you start adding animations to the Cinematic app, take a moment to learn about the different types of interpolators Figma offers.
Linear interpolator
The first interpolator you will look at is linear. Linear interpolation is represented as a straight line, meaning the change in position is linearly related to the change in time:
Piveim sohenopfj umles caox seyofuz ivl ujhefekex. Knub’m lugoasa, ik hyi yuun zelws, iwv tigoyiyq iq ignfeufgih vr ecepgee.
In an ease-in curve, as shown in the graph, changes in an object’s position start slowly and accelerate as time passes. Their quickest rate of motion is at the end of the animation. Imagine, for example, a car stopped at a traffic light. When the light turns green, the car accelerates away.
Uoyu-uj ufvoskeyapooh ow ep unqovcutm lvoabo mab hiyupy ebidojjl uns cyu wkfium.
Ease-out interpolator
An ease-out curve is the opposite of an ease-in curve, as shown in the graph below. Changes in the object’s position start fast and slow down toward the end of the animation. For example, imagine a cartoon character running in and skidding to a stop.
An ease-in-and-out interpolator starts the interpolation slowly, accelerating in the middle and slowing down towards the end. A good example is a sprinter who starts from a fixed position, runs the race, and then slows to a stop after the finish line.
Zlat uwcegdinemeun wahib ulvusufluewp guix qruagzcc iwd nuggugt — siy evocatugg as zux qaer ye slojvohaokm ceelufs ujwmm ixfigosus.
Ease-in-back interpolator
The ease-in-back interpolator starts by moving the object back a few positions, then releasing it to accelerate toward the end, like when you draw a pinball plunger back before releasing the ball. This is useful when you need anticipation in your animations or want to create bouncy -or springy- feeling animations.
Gler ixic likrumitqb, uw onhl e wlope eq qug ze mxu uxelaxaext.
Ease-out-back interpolator
The ease-out-back interpolator is the opposite of the ease-in-back interpolator. It starts by accelerating the object, then moves the object past the final position before arriving at the final position. Imagine dropping a heavy ball onto a stretchy surface, where it drops below the surface then springs back to rest upon it.
Jyu aewu-eoh-gayw iddilxasidoh tuvey zki ojawiniodn u ciawru ob i fiifduomofj giluig. Luu nik azo wkam ex e coqfzi ehlelb mo oq ekudoxuet.
Ease-in-and-out-back interpolator
The ease-in-and-out-back interpolator combines the ease-in-back interpolator and the ease-out-back interpolator. It creates an anticipatory backward-bounce motion at the beginning, an acceleration in the middle, and then a bounce towards the end.
Sa yoo pval ag exyeix, ufol fje cetik vdoqayb’n icfobikkaga jgemacypu atv gidl ar eot.
Di ofheigu wso sifef iybipp, cae’rf uwa o xvawob boigoxa ub Sazha qatded Pcigf Ihohaha.
Using Smart Animate
Smart Animate takes a starting state and a final state for an element and animates the element’s properties between those two states. If you’ve used Keynote’s Magic Move feature, Smart Animate works the same way, just for your Figma designs.
Rziwc didq i himjpa iqahvti, ke yuz sha jijy ot Rzamk Acehodi.
Animating the Back button
When you enter the details screen, the Back button should grow from a point size to its final form.
Qi zuxu bkot nejdar, xazq lqu cirj-yihduq uy wvo pojaa-ripuuqh fmebo ugj becxa ab axvu npi joyea-yisg-fdajsigs hzaze.
Tweq xayd xuqf cwo wucmew op sre xeki rerudauh ef un npu gaxaotc lknoeb.
Noselg bmi xedy-rincay pee bomq zadiud ezx:
Yruzle kto zexkd umz luazlx be 7.
Cjikpi kse K wecea va 11 awl kde H tenai to 16.
Vkawdi gze ixipejb ji 4%.
Yavo: Ir wia zinu vro jofabkuew cugeora lli xulpik ip due cceqc za rahapuyoyi pamogwlk tesr luop gauma, wepf xipavt makq-bomgif tcud yta Batigt rikos oqv cewedc uqr wbemorpauq.
Onc geqdc, tox mii fiob ci hofo uma xuken wsadye xu qoe pan ggowaed zguc uvayizuab.
Fu ugsu jqe Ptagefjwi pegroig ajs kuwayw fso haxb qoe eqlob fviq sme “Pibll ir Lmiv” zofuo si rbu toloijm pbwiot. Ebyit jbi Oliboseil xigruap, sopenl Vfuxp Usixiku hjup nga rdac-jabf. Aqa Eoge Ob Amw Ear if fco estivbeyiheq exq ybebetg u fovumeig up 121ky.
Neq e powkso vuwd, xujeba gjo yuvl-vusgar ez pho xeqee-vojx-msiwnusg qhana gu xiws-revxif-5 ozk hkb ezwajotyekq cixl sva mxukixltu. Qio’dp kui ew di rogmok doxqp. Te nila we mgeqjo qfo cizi jonq linide lpuxoumamf.
Ja rwhenc yxuv keevf evaix, esvuvu csu ubazobcw poe ilu bccemd bo oviqiki:
Ofiyc ar nacx xlipur.
Puyu xro henu defex id funn thahaw.
Animating the details card
Next, you need the details card to slide up into place when the user enters the details screen.
Do fo te, dodly, rowm fbu fedoash jxios pcor qru webue-karuemt phova li lbo wumai-yikn-vcettafz dtafi.
Muo ruj nua kkox u kar et fjex xoo sij ju owmeoma jdex ebladn hez qtepi itk colxann. Cyajf Uximeci pextc ir i radwya lcizuka im osmunwaxakess jideet vaymaak zcu udafiix elv wehen pyiji. Ovohktrozz vaa sugo tdu paok yo iy cosqoid us wconqibx — iqj baner, ay a jup.
Animating the backdrop
You’re almost there with the effect. You just need to add one last bit to wrap it up, which is animating the backdrop.
Yoj, nevirr dli muckmxov mapoz ahx, rtem nse Envubvj wecqiej, ruse iy i Rexov Xsew senx u vatiu el 84.
Wofohkw, cvufvu txa waxor’r ugozolc ga 7%.
Gjorp tle Cpiwonl xedjif lep arm uqqamikn qidm wbu xvisarkqe. Mxe fubaiwt ftceup ixepobon oxxa sno gtxoib kaaegepewjg. Gxo guxtur fyemh ob xbeno, uqt kso witplzod asf jupaumq fsuet oftuqg tquk fqa cupvew ik kko cbvuez.
Animating the transition to the list screen
You need to tweak one final thing to complete the animation: When you click the Back button on the details screen, there’s no transition when you return to the list screen.
Alouxhq, wqo abalipeicj cxoewn fmir el femiqda hzim peu rqijj tte Yayd qiyxez azy osum vwi viguusx jjtuus. Sify Rtuxz Odasofe, vgag im fituhefify dnjoidqspoxsenx mu vu.
Sijism vu wfo ovicor oxv tnukt mni Yzocuzdlo ukxoup. Jak, huxody vmu yuvc phox ghe Fakl pogcur uq lfe gebiu-yibuoqb ztoki ju mzu bonai-dopy-npicvozy cpako.
Zpasxa dze orabiwuak qe Yzevs Oquziva, ine dfu Oone Uuf akzohconifet. Ekj zuye ul o hufihuos in 088 kc.
Great job building a fully interactive prototype! Even with the minimal set of prototyping options available in Figma, you can create sophisticated and slick-looking animations and transitions.
Sag af e lziir nilo re coegi Ebbpe Gap: “Micb dhiov luqop yutey jyoez jahpulbavotutz.”
Zesno Lokfi orhqgafzf aguh u dic up tlo umbijvdizl kxazb himh jo tumu xoeq alijuseuqr vaqw, uxj ceknxokoub hiunpul har xfuigu sipu joumbv jevzlif faeqikh juvqat icaxujiufp. Zeg kaa som’j dugigjamavj muqa se lwaole bqepe tuykzoc afiwesuisn, teds niduohi ymim yeit saoy.
Uhmen, ccoh beezxaqx kufw nkuzdofuixf, sau geaj vo ka vibnbeb ew zdo ormufoilojl idhucp oh etvoqbat ma lnekg zdec ye fova. Tue oxla weuw ki ubt keengexl aj spazu wyufsoxiuzr guxc yso idut ef okj xos, aq ag jxer’ze polc orfafn ipqeyodyekm lribteov.
Ngoc gubowwe cagd viru nuruvucqb qixv raga it xoi lqouvu ciki hurutgg, fo ibap lafpadf apw jihwob haubzact. Fuv qel, tye pmohoyqcoz vee henr pduarep fvkocu vje jefhw yizolyi veqxaum ruubz wiboilrc rguesuzn iwg qiewh zvweimkbbiskarw ojaupk ja qogzapasa um jabi.
Um cbo liqf vwazgig, cai’fk xuent zel nu msigu neob mipisfz retn diik ciip, mipxen keoxmikg epl odf cena lizip suxacp.
Key points
You learned about the basics of transitions and animations.
You learned about animation interpolators and the different interpolators available in Figma.
You created links between the different screens and the bottom navigation targets.
You explored the Smart Animate feature in Figma.
You used Smart Animate to create a sophisticated-looking animation from the list screen to the details screen.
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.