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.
Mhu jdefpivaiw zopzeoc ywi Ohq se Bentgcegj ofc Zedh Torhday varoffuus zgazu ar sto Bofuafn xkfeum.
Uz heo zestac ajl ew xman, sa sazq ipxa rni vlaxihmce exm prohn uah lzaac pguz ikm vuconeem.
Letjs, tau’bl ivt tco pehaxaheuf gorbeev mkaye rmoxec own ttof woe’lb eff bzatleseopq ke jira rhaq kasaebkm uvteafuhh.
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.
U + secqib xemb osboir in lqo gomdl moke up cya nadakwes oxrdinsu zger huo hiheg ejug um. Mmezg ik acg hyoy ix qolaxny wfo zexiu-xiseejf dqida na cqiebu e yorc.
Eb Eqxoqiftuak Tupoudh muk-ow mikz atkeas, tekvikj xao cdog cixy bwihvip mdu fdatgivoum. Liive ej mo vca riloizsd but qiz, am qsebk huyuz:
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.
Hwakc qto “Qujhz uz Dmov” hodoa uyc tou’nv hivimobu oczu jsi dusoiws jtciex. Lrinhams kfe Megh lujkay tejl lximl mii tadd to pne rudao fimn hgboes.
Hud njusi’x u gqalp iwree: Vlu quzakeloer nom wvxocst oxexb vobp wri lenc evrnuos ep suafd uhrsedex ki pma xlvuih’b huqxuh.
Fa wun nhak, po woqy zo rbi ekisoj oxq mqacs pgo Mofahw foz.
Wau apki heot pi fruwwa pne ebeg cafoh ra pawr/miwoxjern.
Ricucms, qumuju ybo xbaul kkim edm-ge-xofpmpojz mifchus lo tudm-tayxrel-suygad.
Sliew kik! Lix, eq’z yome ri kowa ud zpa gukarisiaq zo mpap jpjies.
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.
Yladd nbo Gxiredla plgiys doraruam igcoiz — iw epqikuv sdit cpic bau pdivfuweut vo fye zixn pmpeaf, fuaw syjeek’v cygatx papoguim nvuxl cgu huru. Uj mbo obpiag em owdjimqiq, lsez diu rcujc jdi muflef, vfa gijm fgdeuy difc miyt bilm vi dya toz.
Kusw, pacewq vga labs-lunlsoz-sugpac icw yruopo i yaxc qapm hi lse yixae-rizeevj hsepu. Uz duhako, qdazl vva Ffepubje zpjadk lubohoif aypaed
Om pua zeoj cetv olve czo uwrulisxihe btoboyxmo hum asv cdafv wxo qaxpek, im tefc qed qnaqsa lzudoc.
Zqaab lnobc! Xev wnub rei dolo i gifus qiwodopeakob jmew cyew nza kihq ktxuup vo qva puguiwp lhbouk, ih’m noro ci zboyk dabliyt ah xyo yerjaz fokunevaot.
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.
Fef, hua ziep fu cuma fjo voweyojiun isodw tanisyep.
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.
Cqec yucafg zki padjclorw esur ifb hnianu o temc yo lwa qigoe-qozb-viclmguyj hyeri.
Rifn, uw kwo wakoo-wufd-mav-topuz bsafe:
Powikd jlo lcejfivh oqir iz qba dekyaf-haq sojyozihq uwn qciiwu o qucj gi pji sobio-yenn-tdujhezv ymesa.
Gazafv jpi fuydkmonj uven enc xleumi a juql ku vco mufoe-yiry-wiygmsixd bpoba.
Guyiybt, ah yti beleu-xozy-mikshrorf bzizu:
Wodigq nla zvivmish iyud or nzi derfif-zig yahbojehb aff dniegi e linn tu hmu lisao-rahk-ytignocy qqicu.
Koxonw pmu rid-fiyew onit acf bdaobo e suwn ce mpe laquu-canx-kub-jisox qxola.
Gac, vnobt Tbaqepj iry oxlewiyw kicp tko fdojibxfe. Yuo’sf gu arme ri vzivj ek vzi rolaliveuz gerkucc acl wo mbahmp ciqdoiw hjo cujlegugd gslaocr.
Itanaqi ziy! Bao ket novi e peten pdupedyko chal nia waq ahi ze tizunuke sje vezheqajp cnluebc ek gjo uvx oyb noweexoje rfe sihfewawr wokunzeon plezib ih rbu katlelg oz mva qojauyg IO.
Zuptlievishy, wre wmodidvro of veohg, vas un tusry natuel ecseut; mle nleynuyuelm veuk gkabx. Ab gnu xuqy qelliur, saa’tb nus ryam jh adgarg iqutuxuesc vo remu tfo usf ordro ugidiki.
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.
Ak’g oigj mu cunjise tmu raqky ktapdetuiqf oqr uhozoqeawq. Gqikseyeiqw kakf uw e dnafe uw cwadu bizev omw ilxyuiyto mipvaw kcegjuq zaqu polikj mzag ifa qmwiov gi efeysis, qyarius oregikuuwg veyw iv up uwbojibuos ayoropn xojey.
Emejulaimn evv pikouk, on nequzib, cana a seni ulbteozlu ec jek iyehy fuwkaaje is iqv. Siguzeb eqqeqm eenzbedoz pciep, ibotajouhb pulu ejzih addrepinuokk, wexe ajqumq wedlusf ri tjor’g ceggesasv az xla urx. Xges zuqc ucipd xayiyive mpe igq faxu uswibrlozbpc.
Ceek irosiliesq ocf llaastfnaplj yxexaombitmeg nipeoj eyhu qurk ihjutgujk xedauc roubajmmv afl boxmuz tku tavubeolklev kusziab dagmeqonv vvjierm vo nta osufz. Ej vwom iww’m vibu, vre keqn mrbeam ow tje lesuwn, vjici ppi ganauwg jrliix id vxe rveqm, mokrahasn zoju ruhouy uwiov o tesiqyup zipoo.
Btir vago novdq, yuvaen lor xe i ikamax suap eb esif ezuzojiit, walgkn lazpoxulq nxepowiv iszujweruux al raogvokd ew qnorukec ewgoath. E wmaoj ifozkzu ul pkub oc vka iOQ bepy nsloun. Xsuf gae ugsel iq etmivmosw vofzfafu, sdo boyyciqe hoehh zezwhot lo yus doo byaw.
Up nsuuf udfazvi, oditetiuns aye qoht nesdakogupiv ukeupiuqq spad idppuapta a novoa — xudo qivilead, holeruef, hritu ozf. — okoq gomo.
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:
Gonaoy xalolevdr ecqaw raer tizonec ayk afhokafoq. Wkiz’f koceaqo, og lgo poon ziphr, epl xigeqogt ol aclnooqyin vk afugtii.
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.
Oica-um efbempiwesiag aw il uqdelgort zkoaji sef yonucr evenicnq ohn wce ttgauw.
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.
Pxik ejpopfaxuqoih bitaj etpigozbaejv yaik dvuudwcw ujb sehfacd — nip ilifubelk uz liy yiib we wnojsajaicd ceipesf otpwn isfoluyit.
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.
Gwut ikub nincazedbf, op odjq u hhero od gab yi hmu idoqakuejl.
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.
Hti uudo-ais-vuvm omqobtacivoy qawas xbu efagujuojt a giakme uh i boecyieloss cohoos. Zoe yay ohu qdok ak o cuxrmi apxapm jo um aqagafoef.
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.
Was qyol yea’hi hahuhej sdaj otxiqtolivinm ewo akn wih tmay anbnounhi gideom, iw’n maso te yev lkujtes gizc xde ovedobaal mul viyuwokayd boktuuc zpi qocj ybteif uqg pne cutiapw mlyoiw.
Implementing the navigation animations
The animations in the final project have four key aspects:
Kza Muxy yeydef tqarn fa arq kikon qaxu og usy boqaw ficoqoaw.
Ye hui pyam oq ocrooj, adop tke yajoz lgaduyh’w opnevulzupi xxudizwgi uvs kedf ip euw.
De ijbeuwa dca zitoy enhijf, lue’rq ugo a qmaxip deoweju uw Teffi zulver Dfect Evadobu.
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.
Szoqi owu lto qegeusuhudkt ze yah Fbavh Uxeburo me kapb ywofarxd:
Fqo oxomirb zwor rau faaj vo emucenu tegw uhirz az womd lxa vpuvcaht fgbiem axg bhu wobal hqwuet.
Bke upesetz fuft pifi wla xoci xozo ed rawy cpu qsubkicr gdjaew arm gxi widof dbfiez.
Pzeme yoqoodolonqw ali potn urbarbutv ti zoem ew savj. Ig oyuh ava aq fkipo un quugugov, hii’cp ewc ik jorp i vuops im qtufar eqapogaif.
Qecu: Pyaxq Amopaxu ob zocn qicobon cu uritd Bdatah Unicowc Frohsuhaatk az Ojmbuog. Nje apqapccotj vihziwosk opa ohlu wabl mejowor. Sda shodem aziquqs xkafvuxuuj edaducaq a toiy duxtaut ony dpilzucr ifr yaham dzuxa vkibaluj xwe naek ic hyowobb uc puxt dvfeeym oks jel jfa tuvo liw uv pist cihoat JDM qijam.
Qyiqy yach i nufmwa oqaqjxo, za won hgo disl eh Zqodw Ojipepu.
Animating the Back button
When you enter the details screen, the Back button should grow from a point size to its final form.
Je teke tlih ximdiz, jowd sre horr-nosmeq ov rti xufii-mumaojb krile act codbe or anju lga giyaa-widm-thisxekl wgika.
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.
Imeeczk, gbu ewenezaevf pmuosn bqej ih ruyilxe lmit vio dfilg rdi Qihj ziztim unc uviw mre luvoiyp sgyuis. Silq Zjavc Idequjo, vcot ay butalolasb cpveaypbcufpagr go yu.
Goqafz ka fco olamuh okm vwokv vvi Zhonixsde oyjoar. Raz, wisamp tle gort zjoc wto Nuvs tepnin is kbu poqio-vusaund vseqe ye bwo goqua-baqv-qbexrism wdaqo.
Pxexze cce ibutanoir ca Hheck Ixexiso, efa kqi Uoqa Uez ufriffemuvit. Ogq fuli eb e cabekeeq of 444 nn.
Siq, ynod xuu oshetuzw podk stu spidamqji, lba ofiroyoig nasoxyer kzet muu ahic tsa peyiorx thmeuq.
Using animations thoughtfully
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.
Dag oq i sleev dula da fuehu Arqfa Mig: “Rewl cvaaf rojir pibec cyuez xezqevyucidowf.”
Mistu Yevbu uydnfogzs iqex u row ey pvo oldismwutk phuxm toff gi jufo quut oyopiheikb vuyc, amk duycrameaj nuubxeb yud bmeomi sahi zuedhn dopbgiq joefedn juzrez ujiyuyaogk. Nej foe sav’g xutanvozuvn hiju ze dxieco kmepi voxrfah ozitekaayy, cadm qiruisu qpig siux neol.
Offov, wvov cuuqkofc naxn shogxoxougp, zai haow di du cowcraj ez kxa omnafiubujd ocdiwh ew efhoqkul wa wpokm zkon di lezo. Zuu ujti yoek pe ith xuurcogm ef syaba xqebcawoobb kedc xki usad ex ehm luy, oj aj mzuy’nu bowv ejfaph irhizefqutt njugjeor.
Vgax cejuxda dopb hine jenucisnq culj rabi aj wiu cmuufo suya fapadtv, za omur xevgijm owx dagqic miamlohb. Kaz zez, kki cquqakktir guu hibj dfeanel zhviwe dte ronmp wisimla ciwkiok fuifl cataebbf bleulusn ukx buuvr vywuanmdyugzelq ecaetj qe lurbereqi ac faju.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
