Microsoft's big Fluent design push: Web developers get a new Office UI Fabric

Microsoft brings its Windows UI design system to web developers.
Written by Liam Tung, Contributing Writer on

Microsoft has been implementing a major design overhaul for all its Windows app and utility icons in line with its Fluent Design System for Windows. Now the company is taking its Fluent push to its user interface (UI) Fabric for developers who integrate with Microsoft products across the web, iOS and Android. 

Consumers have probably never heard of Microsoft's UI Fabric but the company uses the framework for icons across its Office products, which have undergone redesigns that help lift them from the screen. 

Previously Microsoft used flat designs, but its designers think the new designs don't mesh as well with Windows 10 features like Live Tiles. Microsoft Fluent Design System changes are intended to align better with design systems that Google and Apple have shifted towards on Android and iOS, respectively. 

The UI Fabric is Microsoft's set of tools for developers using the React JavaScript library to build user interfaces for web apps. 

SEE: 20 pro tips to make Windows 10 work the way you want (free PDF)

The new Fluent UI involves converging Microsoft's two most-used web engineering frameworks, Fabric and Stardust. 

"Shortly, we'll rename our UI Fabric GitHub repo to reflect our future Fluent UI vision. This is step one toward our vision for a more simplified developer ecosystem," Microsoft said on its Microsoft 365 developer blog.  

Microsoft says its goal is "a shared foundation with open-source engineering processes to create experience coherence, efficiency, and effectiveness". It argues this enables the company to do more with less.

While it is just a name change, developers should know that the UI Fabric and Stardust GitHub repositories will move to the Microsoft GitHub organization known as Fluent UI. 

Microsoft notes that after the change package names remain the same and that it will continue releasing UI Fabric packages as usual. Developers should also not need to re-clone the repository. 

It also assures developers that the current version of UI Fabric is still supported. "Nothing is changing in our level of support to the community for the library," it says, in an FAQ.    

The shift does not change Microsoft's direction with the Windows UI or the Fluent Design System within Windows. 

SEE: Windows 10's new icons are rolling out: This is what you'll see, says Microsoft

"The Fluent Design System lies at the core of our recommendations for how to build engaging user experiences on Windows and across platforms now, too," Microsoft said.  

"WinUI continues to embody the Fluent Design System as the native user experience platform of Windows. With the addition of the JavaScript-based Fluent UI libraries, you'll also be able to build more coherent experiences across other platforms and the web, too, and the Fluent Design System will continue to expand."

Microsoft will be offering more details about the Windows UI and ReactNative this week at the MVP Global Summit, which is being held as an online-only event due to concerns over the COVID-19 virus.    

Microsoft is promising the next releases of Fluent UI will include improved runtime performance as well as more flexible components due to better use of React hooks and function components. It will also remove deprecated React APIs to help its partners test rendering. 

Editorial standards