Microsoft Fluent UI system
Microsoft recently updated the official blog post, detailing the current existing Microsoft Fluent UI system.
New cross-platform library
Microsoft Fluent UI is more than just a collection of UX frameworks for creating web and mobile applications that share code, design, and interaction behavior – it provides a seamless experience for customers. Microsoft is streamlining the developer ecosystem so that various partners can better leverage these frameworks.
Microsoft officials say that components in Fluent UI React (Web), Fluent UI Apple (iOS and macOS), and Fluent UI Android GitHub libraries ensure that Microsoft 365 apps and services remain powerful tools, while the former allows these apps to deliver a more intuitive and consistent experience for users across platforms.
A better experience for iOS/Android devices
Microsoft says its own Fluent UI-style navigation bar still adapts to existing iOS and Android platforms, which in turn provides customers with a more coherent and connected experience.
The experience is more coherent.
In addition, users can easily switch from one app to another when using Microsoft 365 apps. Microsoft aims to reduce the cognitive burden on customers by creating a coherent experience across platforms. In short, Fluent aims to enable designers and developers to better collaborate to create first-class experiences that enhance the user experience.
Microsoft Theme Architecture Modernization
Microsoft is modernizing the thematic architecture to create a scalable design system for the future. Future themes will use a common theme infrastructure, taxonomy, and a centralized cross-platform style library across Microsoft frameworks, making it easier and faster for users to update designs across all platforms.
In addition, Microsoft is moving away from fixed values to more agnostic variables, known as Design Tokens. Design tokens define the visual properties of the UI interface and link the design to the code using a common syntax. Users can update without modifying coding components through a centralized style library accessible through design and development tools.
The Figma plugin will replace the native properties panel. Instead of assigning colors or stroke widths through the properties panel to create designs, designers simply assign tokens to their layers.