Chapters
Chapters

Chapters

Hide chapters

App Design Apprentice

Second Edition · Figma

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Design & Tool Fundamentals

Section 1: 3 chapters
Show chapters Hide chapters

Section II: Components & Design Systems

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Interactive prototypes & Developer Handoff

Section 3: 4 chapters
Show chapters Hide chapters

9. Transitions & Animations
Written by Prateek Prasad

Heads up... 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.

Unlock now

Heads up... 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.

Unlock now

In the last section, you built a typographic scale and color palette that helped you decompose your design into even smaller granular layers. You ended the section by organizing these elements into your design system and wrapping up the app’s design.

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 users perceive it 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. They’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-9-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-9-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 the 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 taps 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. Check the Preserve scroll position option — it ensures that when you transition to the next screen, your screen’s scroll position stays the same. If the option is unchecked, the next screen will jump back to the top when you click the button.

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’ll 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.

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 toward 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 pull 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 toward 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: animating the backdrop. In the final project, the backdrop image grows to its final size from the screen’s center. You’ll add that animation now.

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

  • Transitions and animations can be valuable tools in helping the user navigate your app — in addition to giving it some extra flair.
  • Figma offers several different animation interpolators, allowing you to choose the animation type that best suits your app.
  • You created links between the different screens and the bottom navigation targets.
  • Figma’s Smart Animate feature allows you to animate elements easily. However, the elements must appear on the beginning and final screens and have the same name on both.
  • To give your app a more natural feel, when a user backs out of a screen, use the animation opposite of the one used to enter the screen.
8. Design Systems
10. 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.
© 2024 Kodeco Inc.

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.

Unlock now