Motion design kit

This After Effects sticker sheet illustrates an efficient workflow for creating motion examples following the Material motion guidelines. It includes a collection of Material components, baseline UIs, and navigation transitions.

Download Motion Design Kit

Available under Apache 2.0. By downloading this file, you agree to the Google Terms of Service. The Google Privacy Policy describes how data is handled in this service.

Components

Master Properties are found in the timeline by expanding the properties for any composition taken from the Components folder. Components are reusable UI elements which

This folder contains many of the components found in the Material guidelines. These components can be dragged into a new composition to quickly create new UIs.

Master properties

Master Properties are found in the timeline by expanding the properties for any composition taken from the Components folder. Components are reusable UI elements which you can quickly tweak using Master Properties. They’re similar to how overrides work with symbols in Sketch.

Collapse transformations

Some components like Buttons are responsive to text length.

Enabling “collapse transformations” removes unwanted cropping.

Baseline UIs

This folder includes UI examples featured in the Material guidelines. They demonstrate how to build a UI using compositions from the Components folder. They’re also a handy starting point for testing motion patterns.

Navigation transitions

This folder contains common navigation transitions that use Material motion patterns.

Time remapping

Each animated property is animated using linear easing. The composition is then time remapped to apply easing and adjust duration. This is done because:
• It allows for quick adjustments to the overall duration and easing of a transition, which are two of the most common motion customizations.
• It’s a simple method for applying one overarching easing type to all animated elements (persistent, outgoing and incoming). This concept is key to Material Choreography. Read more here under “Complex choreography”.

Up next