What is Fluent UI?
Fluent UI is a design system that contains sets of libraries and components that allow you to build a user interface. It is available for the most popular platforms – from desktop and mobile to web applications.
Based on its experience and user feedback, Microsoft has created a design that it is adapting across its family of products. A similar scenario is being pursued by Google with its Material Design or Salesforce with Lightning Design.
In the case of Microsoft, the best example is Office 365, where knowing one application, we can quickly find our way around any other. Thanks to Fluent UI, elements such as input fields, buttons and icons are uniform and intuitive.
Comparision of Office 365 applications UI
Fluent UI therefore allows designers and developers to apply the same design to their applications, regardless of the platform used. So on the one hand, we maintain a consistent appearance and functionality, and on the other, we reduce the time it takes to create the user interface. In the case of web application development, which is currently the most popular approach, we can talk about two main components of this design system.
Fluent UI React
The first is Fluent UI React, which is the official open-source React front-end framework designed to build interfaces that fit into a wide range of Microsoft products. It provides robust components that we can configure using CSS-in-JS. These include buttons, drop-down lists, grids, checkboxes and other standard controls, including those specific to the Microsoft environment such as Datepicker, Peoplepicker, etc.
So we have a whole set at our disposal with which we can effectively build a nice and intuitive user interface.
Fabric Core, on the other hand, is an open-source collection of CSS classes and Sass mixins that give access to colours, animations, fonts, icons and grids. It allows you to easily change the appearance of controls or even the entire page template.
Microsoft provides a palette of colours, icons and fonts that we know, for example, from Office 365 products. We can use them to create extensions, such as Microsoft Teams, and thus maintain consistency of interfaces.
Fluent UI in Microsoft Teams
One of the most popular products using Fluent UI in recent times is Microsoft Teams. With this communicator, we can create applications to extend its capabilities, as well as easily integrate with existing systems. We can use Microsoft design already at the application design stage in Figma, with the help of the Microsoft Teams UI Kit. It is a set of components, templates and best practices that details all the capabilities of the application and presents typical use cases. This can provide inspiration for the designer, as well as a hint as to the functionality to be built.
On the developer side, the Microsoft Teams UI Library package is used to implement Fluent UI. It’s a library that extends React’s Fluent UI capabilities with specific messenger functionality, such as dashboards and task boards. This enables us to build the finished solution even faster.