Motion shows a relationship between elements and provides continuity.  In the Fluent Design System, they make use of many different kinds of animations, such as content transitions and fades.

New York University

The Microsoft Fluent Design system is a cross-platform design system that was developed in 2017, and has guidelines for designs and interactions for Windows 10 devices and platforms.  There are five key components to the system: Light, Depth, Motion, Material, and Scale.

Microsoft Fluent Design System

In Fluent Design, they use a reveal highlight, which draws attention to illuminate information, and reveal focus, which gives items a border glow upon focusing.

Light

In the Fluent Design System, the z-axis is utilized.  Depth is presented through drop shadows, as well.

Depth

Motion

Within Fluent Design System, Acrylic is a component that adds texture to your elements and can help to establish visual hierarchy using different opacities.

Material

In the Fluent Design System, elements adapt to screen size responsively.

Learn Before

Related