Microsoft Announces Fluent UI: Opening a New Chapter in the Microsoft 365 Experience

In an official blog post updated today, Microsoft details improvements to the design language Fluent Design for developers and users. The design language is now widely used in applications such as Outlook, Teams, and OneDrive, and in this blog post Microsoft introduced fluent UI, which brings together web and mobile UI under a shared charter.

In this blog post, Microsoft details the evolution of the developer framework, collecting and incorporating input from designers, developers, accessibility, international experts, and writers. Microsoft says it has identified many areas of improvement that Fluent Design needs to improve, and their goal in 2020 is to close the gap between design and code, starting with the design of token systems.

Microsoft Announces Fluent UI: Opening a New Chapter in the Microsoft 365 Experience

A new cross-platform library

Fluent UI is a collection of UX frameworks that make it easy to create Web and mobile applications that share code, design, and interactive behavior.

Using components from Microsoft’s Fluent UI (web), Fluent UI Apple (iOS and macOS), and fluent UI Android GitHub library ensures that Microsoft 365 apps and services remain productive while feeling more intuitive and coherent across platforms.

Microsoft Announces Fluent UI: Opening a New Chapter in the Microsoft 365 Experience

By adding the new Fluent React UI Native library, Microsoft has created several cross-platform components that make it easier for JavaScript developers to deliver experiences quickly to customers across devices.

Device-native experiences that remain unified with Fluent

Microsoft says it believes their Fluent design elements, such as custom navigation bars, allow the app to still feel unique fluency and cross-platform consistency on native iOS and Android platforms.

Microsoft Announces Fluent UI: Opening a New Chapter in the Microsoft 365 Experience

Provide a more consistent and productive experience

Using the same design language in all Microsoft 365 apps also makes it easy for users to switch from one app to another and have a pretty good idea of how to browse it and get things done. The same is true of platforms. Microsoft points out that people often start a task on one device and then do it from another, so creating a coherent cross-platform experience can reduce customer cognitive overload.

Microsoft Announces Fluent UI: Opening a New Chapter in the Microsoft 365 Experience

Modernization of Microsoft’s theme architecture

Currently, microsoft products use disjointed theme-related approaches.

Microsoft is looking to modernize its theme architecture to create a scalable, future-proof design system. With common theme architectures, taxonomys, and cross-Microsoft frameworks, it’s easier and faster to deploy themes across all platforms in the future.

To do this, Microsoft is moving from fixed values to more unknown variables, namely design tokens. The design token defines the visual properties of the UI interface and uses a common syntax to connect the design to the code. A centralized style library that can be accessed by both design and development tools will serve as a place for updates without modifying the coded components.

To expose the power and reduce the complexity of tokens, Microsoft is exploring how to meet the needs of designers within existing design tools. Since most of Microsoft’s designers are using Figma, Microsoft has looked for ways to extend the tool’s functionality to support their design tokens with little barrier.

The initial result is the Figma plug-in, which will replace the native properties panel. Instead of assigning colors or stroke widths to create designs through the Property Panel, designers will assign tokens to their layers. If necessary, they can remap these tokens to different values and let any changes propagate throughout the design. Microsoft is also building a pipeline to turn these design tokens into platform-specific values.

Together, these efforts help distribute design values directly to the code base, providing a fully integrated design-to-code workflow for product designers and developers.

For end users, it’s easy to opt in to the theme library of the applications they create. They can then customize these libraries to better reflect the brand or service of the product and feel more consistent across the ecosystem.

Microsoft will talk more about fluent UI and their future expectations for fluent design systems at the Microsoft Build 2020 online conference on May 19-20, which is free for everyone.