Design systems have been adopted by organizations of all sizes. Whether in the form of simple style guides or full design ops teams, designers and developers are communicating more effectively than ever before. Some teams have embraced the integration of motion into these design systems, while others are focused on more static components like color, typography, and buttons.

Google Material, Shopify Polaris, Salesforce Lightning, and other public design systems have inspired many designers to move toward designing in a more structured way. Let’s see if they do the same with motion design.

Note: This article originally appeared in the Meaningful Motion UI course. This course features over an hour of video content and articles exploring how to animate faster, create more dynamic designs, and share them with users, teammates, and other designers.

Design systems often put little focus on motion

We’ll be looking at some of the best examples of motion design in design systems, but before we jump into those, it’s important to recognize that motion design systems are still in the beginning stages of their evolution. There’s still a long way to go before motion design elements are as flexible and functional as static visual elements.

The design systems of Shopify, Trello, and Atlassian have been shared widely as great design system examples. While these design systems have improved the design process for their internal teams and designers inspired by them, they make little or no mention of motion.

Shopify Polaris and the Atlassian Design Guidelines have almost no mention of motion or animation at all. Trello includes a section dedicated to motion, but it primarily echoes their design principles with added notes to “be performant”, “feel as natural as moving things in the real world”, and “reinforce high points in a user’s experience”. These are all relevant and useful ways to consider motion in digital products, but there is no mention of how, when, or what animations to use. It does little ensure designers and developers are speaking the same language when it comes to motion.

Let’s look at a few systems that empower product teams to improve user experience through a more systematized approach to motion.

Salesforce Lightning

Salesforce includes both an animation gallery and style guidelines within their design system. They acknowledge some of the major benefits of motion design (“reducing mental loads, and reducing change blindness”, “more effectively communicate content hierarchy and spatial relationships”, “accessibility benefits”), then move quickly to the specifics of how motion should be used.

Their animation guidelines provide structure on timing (multiples of 100ms), effects (“a wide variety of possible animations from transitions to micro-interactions”), and dimensionality (creating hierarchy through changing position and location).

Other motion guidelines in the Lightning Design System include:

• Use default CSS easing curves
• Balance uniformity (“it is important to keep animations consistent to deliver a clear message”) and flexibility (“The actual Z-index is up to the developer to maintain the correct shadows.”)
• Include coded examples of how both illustrations and properties are animated
• Focus on the spatial and dimensional aspect of motion and provides clear examples of what movement on each individual axis indicates to users (image)

By focusing on a wide variety of coded examples and the properties that are animated, Salesforce puts emphasis on implementation rather than ideation.

Related: The importance of good animation in UX

Apple Human Interface Guidelines

The Apple Human Interface Guidelines provide developers a rough outline on how to use motion in their apps. Apple includes animation in the ‘Visual Design’ section of their guidelines for both macOS and iOS. This follows the larger trend of motion having a dedicated section within design systems rather than being integrated throughout the system.

Because the Apple app ecosystem is so large, their guidelines make multiple mentions of system animations to ensure that native apps consider these existing animations. The variety of apps referencing these guidelines also leads to suggestions rather than a strict set of properties, timing durations, and easing curves.

Other motion elements in the Apple Human Interface Guidelines include:

• Require the ability to opt-out of animations
• Focus on using animation sparingly and thoughtfully
• Mention physicality and realism but make user benefits (“keeping people oriented, providing clear feedback in response to user actions, and calling attention to specific locations on the screen”) a main focus

Apple doesn’t require the use of motion, and even recommends using it sparingly; however, the Human Interface Guidelines still providing insight into the benefits of motion without locking teams into specific animation types or styles.

IBM Design Language

IBM has two separate (but related) design systems. The IBM Design Language is outlined here—it’s provided “guidance on how to communicate IBM’s brand promise and creates a basic framework for how all IBM products should look and feel”. Tl;dr it’s a global system for the entire organization.

The Carbon Design System is focused specifically on IBM Cloud. It’s a subset of the overall IBM Design Language, and provides specifics of how the design language should be interpreted and implemented.

By combining the IBM Design Language and the Carbon Design system, IBM has (arguably) the most complete motion design system. It includes animation principles, guidelines for individual elements, a library of animation examples, data visualization animation guidelines as well as general and specific uses for IBM Cloud in the Carbon Design System.

Motion design at IBM is focused on being agile and efficient, explicitly referencing the physical machines which the company was originally built upon. Their motion principles focus on naturally guiding users (“Fluid interaction”), improving engagement (“Magnetic engagement”), and fitting seamlessly into the larger environment (“Choreographed movement”).

Other elements that make IBM’s motion documentation stand out include:

• A wide variety of animated examples to convey both abstract ideas and concrete movement patterns and properties (both purely visual, and code-based)
• Specific duration guidelines and custom easing curves
• Understanding of the technical limitations of animating on the web
• In-depth exploration of the motion design process

The IBM Design Language provides an excellent basis to allow designers and developers to bring motion to a wide variety of products. Now their biggest challenge is likely sharing the system across the organization and communicating between teams. It will be exciting to see motion become deeply integrated into IBM’s process and products.

Google Material Design

Material Design was fundamental in the push toward implementing design systems, and it’s appearing to have a similar impact on motion design. Material has provided countless designers and developers guidelines for using motion in impactful ways. Here’s a great video overview from the Google Design team.

Material Design approaches motion as one of the fundamental principles in Material Design—saying that Motion provides meaning. Like the IBM Design Language, Material uses a wide variety of both concrete and abstract visual examples to explain it’s principles of being “informative”, “focused”, and “expressive”. Accurately representing the physical world is fundamental to the Material Design as a whole, but since this realism and physicality has already been clearly established throughout the design system, the motion examples focus more on specific use cases and strategies for implementing motion.

Some additional elements that make Material Design unique:

• Android, iOS, CSS, and After Effects custom easing curves
• Detailed sequencing for creating complex animations
• Well-categorized animation examples of what to ‘Do’, ‘Don’t’, and use with ‘Caution’
• Guidelines for customizing animations to your own needs, branding, and application (https://material.io/design/motion/customization.html)

Material also includes a variety of motion design tips that are relevant, regardless of if you are using the system as a whole:

• Larger animations should have longer durations (consistent speed, not consistent duration) because elements have to move further
• Collapse, exit, and closing states should occur faster than opening states because they require less mental focus
• Similar elements should be grouped and animated as a single unit to reduce multiple elements competing for attention
• Elaborate animations should only be shown at important steps in the user journey because they can be repetitive and distracting if shown too often

Material Design includes a surprising number of specific examples of easing curves, property transitions, and timing guidelines, providing enough structure for apps to have motion that is usable and looks great without spending countless hours tweaking easing curves. In-depth customization options allow motion to be easily understood, while still creating a unique experience.

Related: 5 examples of web animation done right

Designing a motion design system

Each of these companies manages motion design very differently. It’s clear there is no ‘right’ way to integrate motion into a design system (at least not yet); however, we can begin to recognize some patterns.

Systems used primarily by internal teams, like IBM’s Carbon, can be more explicit in defining individual properties while systems used by the wider community, like Material Design, focus more on guidelines and directions rather than specific animation use cases.

A combination of both motion principles and implementable examples provides the most effective combination for teams building internal design systems. Motion design elements can take a variety of forms (coded prototypes, visual examples, text-based descriptions, style guidelines, etc.), and involving everyone who will be relying on the design system will provide the most functional and successful result.

Meaningful Motion UI, my design course on creating animations in InVision Studio, dives even deeper into integrating motion into design systems. Alongside 14 videos about the different types of motion and how to apply them, an in-depth, follow-up article includes practical steps to analyze existing motion patterns and apply them across your product. The importance of motion in design systems is clear; now we just have to understand the best ways to do it.