Chapters
Chapters

Chapters

Hide chapters

App Design Apprentice

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: App Design Apprentice

Section 1: 12 chapters
Show chapters Hide chapters

8. Transitions & Animations
Written by Prateek Prasad

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Unlock now

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.

Breaking down the transitions

Now that you’ve checked out the final app, notice the following transitions in the prototype:

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.

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.

Handling the Add to Watchlist button

Next, you need to handle the Add to Watchlist button state. When the user clicks the button:

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.

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.

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.

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.

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:

Ease-in interpolator

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.

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.

Ease-in-and-out interpolator

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.

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.

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.

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.

Implementing the navigation animations

The animations in the final project have four key aspects:

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.

Animating the Back button

When you enter the details screen, the Back button should grow from a point size to its final form.

Animating the details card

Next, you need the details card to slide up into place when the user enters the details screen.

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.

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.

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.

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.
7. Colors
9. Feedback & Testing
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2023 Kodeco Inc.

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.

Unlock now

Access this book

To highlight or take notes, you'll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99