Getting started with UI motion design
By: Molly Lafferty
Tags: UI, Design, Motion Design, Product Design, After Effects

Our work at This Also mostly falls into two categories: product design and product vision. For our product design projects, we work on existing products or platforms and design for near-term launches. We share detailed designs and scrappy prototypes early and often with our client to get the best product to the end consumer.

Product vision work, on the other hand, explores what a product, or a platform, could look like in two to five years. The details are less important than presenting a compelling vision of the future. The final audience for this type of work is often an executive with limited time but the ability to make strategic decisions that will allow product teams to pursue innovative work.

When tackling these types of complex products, a motion design can be a great tool to organize large teams around core concepts. We’ve found that being faster and more efficient with our tools has freed us to solve problems holistically. In this tutorial, I’ll share a little about how we’ve sped up our workflow to make motion an integral part of our design process. Over time, I’ve even found that I’ll use After Effects as the first tool on a project, since it can be one of the fastest ways to sketch out the structure of a product.

There’s no shortage of great motion design and After Effects resources out there, and I’ll be sharing my favorites here (and in this handy link pack). However, I found one of the challenges in developing a UI motion skill set is building a workflow and toolset that will have you working and iterating faster.

This is not a how-to, but rather a blueprint of my favorite techniques, tools, and tutorials to help you develop your own practice. Some familiarity with After Effects is helpful, but I’ll also point you to resources help you to get started from scratch.

Setting up your Photoshop File

Organize your file before moving into After Effects

If I’m just producing quick motion concepts, then I’ll sketch the UI using solids and shapes in After Effects. But for more polished designs, I always begin in Photoshop. It’s the quickest, most direct way to get a design animated quickly. If you’re primarily a Sketch user, there is workaround involving Illustrator, but I’ll be focusing on Photoshop here.

There are two simple but important things to know when setting up your Photoshop file:

A layer or smart object in Photoshop becomes a layer in After Effects A group of layers or smart objects in Photoshop becomes a composition of layers in After Effects

To make your After Effects timeline manageable, you’ll want to have as few layers and compositions as feasibly possible. To do this, you’ll need to start envisioning what elements require motion. Consider the following as you organize:

Do I need to animate this component? For a static component like a phone’s status bar, consider flattening all the UI elements into a single layer.

For a static component like a phone’s status bar, consider flattening all the UI elements into a single layer. Do I need to animate elements within this component? Say you have a list of items. You may not only want to animate that list, but also animate each item in the list. In this case, I would create a group where each list item is a layer.

Say you have a list of items. You may not only want to animate that list, but also animate each item in the list. In this case, I would create a group where each list item is a layer. Can I simplify this element? A common technique is to use clipping masks and shape layers to crop images. Because this would create two layers in After Effects, combine the layers into a single smart object in Photoshop before importing.

Top: Layers panel in Photoshop, Bottom: Timeline panel in After Effects after importing. The icon next to [Message List] indicates the layer is a composition.

This is a tedious process with no concrete rules, but with enough experience you’ll learn how to quickly and efficiently organize your layers and groups for your own needs.

Tip: Add a few empty layers to your Photoshop file before importing. While some changes to Photoshop files will appear in After Effects, there are limitations. The best way to add a new element is to add it to an existing, empty layer in your Photoshop file.

Importing into After Effects

Keep an organized folder and project structure

When you import a Photoshop file into After Effects you’ll see the following:

Always select Composition — Retain Layer Sizes and Editable Layer Styles. This imports your file as a composition and includes access to any layer styles you’ve selected in Photoshop.

Here, organization is key. After Effects does not play nice with missing files, and you won’t want to spend precious time relinking files. To save yourself a headache:

Create a single folder for your entire project. Save your PSDs in a dedicated folder, such as _PSD. When you create an After Effects project, save your project in that folder as well. You can create other folders other asset types like _Audio. I use a “_” before my asset folders to bump them to the top of my finder windows above my After Effects project file (AEP) but follow any organization and naming conventions you normally do.

Keep your Project panel in After Effects organized. As soon as I start importing, I start organizing. Create a _Layers folder and add your folder of Photoshop layers — you’ll rarely need to refer to this, mainly just for reloading or relinking of files. I move my imported compositions into a _Comps folder.

Lastly, you’ll want to adjust your Composition Settings for your purposes. When working purely with digital assets, and no video, I set the composition as follows:

Generally, we deliver video at 1080p. Setting the Frame Rate to 60 FPS provides a smooth animation and selecting Square Pixels ensures our Photoshop files appear 1:1 in After Effects.

Organizing your workspace

The essential panels and plugins for UI motion

Because After Effects was originally developed for video post-production, there are hundreds more features available than you will ever need. Here are the default windows I keep open. Once you set up your workspace, save it so you can always return to your default.