In a weblog submit, Microsoft has introduced new enhancements to the Fluent Design expertise for builders and customers.
The design framework is at present utilized in apps equivalent to Outlook, Teams and OneDrive, and Microsoft just lately introduced Fluent UI, unifying their net and cellular UI libraries beneath a shared constitution.
Microsoft has introduced an evolution of their developer frameworks, with enter from designers, builders, accessibility and internationalization consultants, and writers. They have recognized areas for enchancment, and this 12 months, are aiming to shut the hole between design and code, beginning with a design token system.
New cross-platform library
Fluent UI is a group of UX frameworks for creating net and cellular apps that share code, design, and interplay behaviour.
Using elements from Microsoft’s Fluent UI React (net), Fluent UI Apple (iOS and macOS), and Fluent UI Android GitHub libraries guarantee their Microsoft 365 apps and providers stay highly effective instruments whereas feeling extra intuitive and coherent throughout platforms. With the addition of their new Fluent UI React Native library, Microsoft is creating cross-platform elements — making it simpler for JavaScript builders to ship experiences throughout units to prospects extra shortly.
For builders constructing native Windows experiences, WinUI continues to embody the Fluent Design System.
Native to every system, nonetheless uniquely Fluent
Microsoft says they consider their Fluent Design components, such because the customized navigation bar, makes apps really feel uniquely Fluent and coherent throughout platforms whereas nonetheless becoming into native iOS and Android platforms.
Delivering a extra coherent, productive expertise
Using the identical design language for all Microsoft 365 apps additionally permits customers to simply transfer from one app to a different and have a reasonably good concept easy methods to navigate it and get issues completed. The identical goes for platforms. Microsoft notes that individuals usually begin a process on one system and end it from one other, so creating coherent experiences throughout platforms reduces cognitive overload for his or her prospects.
Modernizing Microsoft’s theming structure
Currently, Microsoft merchandise all use disconnected theming approaches.
Microsoft is seeking to modernize its theming structure to create a scalable, future-proof design system. Future themes will make it simpler and quicker to replace design values throughout all platforms utilizing a typical theming infrastructure, taxonomy, and centralized set of cross-platform fashion libraries throughout Microsoft frameworks.
To do that, they’re transferring away from fastened values and towards extra agnostic variables, or design tokens. Design tokens outline the visible attributes of a UI floor and hyperlink design to code utilizing a typical syntax. Centralized fashion libraries, accessible by each design and growth instruments, will function the place to make updates with out having to revise coded elements.
To expose the ability of tokens and mitigate their complexity, Microsoft is explored methods to fulfill designers inside their present design instruments. Since most designers at Microsoft use Figma, Microsoft searched for methods to increase the capabilities of that software to assist their design tokens with little to no friction.
The consequence was a Figma plug-in which can substitute the native properties panel. Instead of making designs by assigning colors or stroke-widths
Source hyperlink
