In a previous article, we listed design systems that marked 2021 they were beautiful, diverse, functional, and in all sizes and types and pretty much covering every aspect you might need in your design operations! Yet noticeably in the design community there is one element that is always left behind for the wrong reasons: Animation AKA Motion! But no worries, Design systems are kinda a recent concept that once immerged never backed off toward documenting and systematizing components in both design and code so there is no doubt that most design systems would start including guidelines for animation ASAP

The use of motion in design aligns perfectly with the guideline that design systems promote: time efficiency, reusable assets &undiscussable CONSISTENCY, and this blog is here to scope it all!

How important it is to consider animations?

Animation is beyond just trendy elements they are the secret to bring user interfaces to life.

User/human-centered designs need to be intuitive, responsive and push the user to feel like the main focus. Animations bring several benefits to the UI/UX design world and play a major role in showcasing product personality. 

clarifying how animation is to be used or not used in your design system can help ensure your brand is using animation consistently and effectively while also accelerating your design process. Motion can help guide the user through the navigation and draw his attention towards focus content.

 To add motion to your design system, follow these steps:

Steps to include motion in your design systems

Conduct audits and Clarify what you are working on

Guidelines are gonna serve people so the best way to know what they need is by asking them. This helps set focus on aspects to cover as no one wants to waste time on unnecessary details.

User interviews help identifies where they need animation in their design process and what practices they find more efficient for them. What you can call a good animation and how to reach consistent motions.

Audits include observing existing markets to conclude which elements are worth repeating and reusing to be added to your design system such as:

• Choreography patterns
• Timing curves
• Usage (express,focus,inform)
• Scale, opacity, elevation, etc patterns 

By focusing on consistency across your motion system, you can create an environment that feels comfortable and predictable for the user.

Create guiding principles

Guidelines are meant to enhance UX. predefining what actually makes a motion feel good is a matter of determining actual checkpoints to be implemented with the systems: Where do we need stronger practices where do we need feedback? How to ensure onboarding? Where users would need navigation directions?

According to cohort.work experts the best practices to determine your guidelines is by dividing them into:

Motion principles

High-level points that explain clearly how the brand should use motion (or not use) and translates the designer’s point of view in implementing motion.

Implementation

Points that define how the forest section gets implemented with design or coding in order to build blocks for the design system 

The right guidelines should result in an animation:

• Informative
• Focused
• Expressive 

Develop functional  blocks

Motion is about building relations between objects in time and effects. The best time-saving practice is to define an animation library of functional blocks. Building blocks consists of defining:

• Duration per second
• Object effects per second (dynamic element )
• Ease (natural rests, and custom acceleration and deceleration)
• Choreography (multiple objects animation).

To systematize these effects, you can use a naming convention that describes them in bundles, or one that describes them as animate-in and animate-out states.

The blocks you build should be conformable and consistent according to project needs they can be:

• Complex & simple: A small number of objects in motion vs more complex approaches 
• Narrative: At different stages of the user journey, make choreography more complex
• Accessibility: Offer settings to reduce motion intensity or keep motion to containers instead of elements.
• Principle-based: Focus users on an object to show navigation context, or show spatial context, such as where to find a button.

Assist with robust documentation

To facilitate adoption for users it is necessary to build the right documentation in order to assist designers and coders. The easiest way to document motion is to map out the start and end states. You might think that few videos would be enough for developers to know what to do to build a prototype but it is absolutely not as documentation is the key to scale motion systems 

Get Started With Motion

It is never too late to adopt a design system!