In today's updated official blog postFor developers and users, Microsoft has introduced in detail to the design language Fluent Design. The design language has been widely used in applications such as Outlook、Teams and OneDrive, and in this blog post Microsoft introduced Fluent UI, to unify Web and mobile UI under the shared charter.
In this blog, Microsoft introduces the evolution of the developer framework in detail, and collects and adopts opinions from designers, developers, accessibility, international experts and writers. Microsoft said it has identified many aspects of fluent design that need to be improved. In 2020, their goal is to narrow the gap between design and code, and the first step is to design the token system.
New cross platform library
Fluent UI is a collection of UX frameworks that facilitate the creation of Web and mobile applications that share code, design, and interaction behavior.
Using the components from Microsoft's fluent UI react (WEB), fluent UI apple (IOS and Mac OS) and fluent UI Android GitHub library can ensure that Microsoft 365 applications and services maintain a strong productivity base, while feeling more intuitive and coherent across platforms.
All kinds of device native experience, still unified fluent
Microsoft said they believe that their Fluent design elements, such as custom navigation bars, make the application still feel the unique Fluent and cross platform consistency on the native iOS and Android platforms.
Provide a more coherent and productive experience
Using the same design language in all Microsoft 365 applications also allows users to easily switch from one application to another and have a pretty good idea of how to browse it and accomplish things. so is the platform. Microsoft points out that people often start a task on one device and then do it from another, so creating a cross-platform coherent experience reduces customer cognitive overload.
Modernization of Microsoft theme architecture
At present, many products of Microsoft use the disjointed subject involving method.
Microsoft is seeking to modernize its thematic architecture to create an extensible, future-oriented design system. With a common theme architecture, taxonomy, and a cross-Microsoft framework, topics can be deployed on all platforms more easily and quickly in the future.
To do this, Microsoft is moving from fixed values to more unknown variables, design tokens. The design token defines the visual properties of the UI interface and uses a common syntax to connect the design with the code. A centralized style library, accessible to both design and development tools, will be used as a place to update without modifying the coded components.
To expose the power of tokens and reduce their complexity, Microsoft is exploring how to meet the needs of designers within existing design tools. because most of microsoft's designers are using it Figma, microsoft has looked for ways to extend the functionality of the tool to support their design tokens, with little hindrance.
The initial result is the figma plug-in, which will replace the native property panel. Instead of creating a design by assigning color or stroke width to the property panel, designers assign tokens to their layers. If necessary, they can remap these tokens to different values, allowing any changes to propagate throughout the design. Microsoft is also building development pipelines to translate these design tokens into platform specific values.
Together, these efforts help to assign design values directly to the code base, providing a fully integrated design to code workflow for product designers and developers.
For end-users, it is easy to choose the topic library to join the applications they create. they can then customize these libraries to better reflect the brand or service of the product and feel more consistency throughout the ecosystem.
Microsoft will talk more about the fluent UI and their expectations for the future of the fluent design system at the Microsoft build 2020 online conference on May 19-20, which is free for all.