Microsoft faced the challenge of maintaining a consistent UI design across platforms. Enter Fluent UI—an innovative framework that simplifies UI design, empowers developers, and enhances product integration.
What is Fluent UI?
Fluent UI, previously known as Office UI Fabric, is an open-source, cross-platform design system used to build consistent and visually appealing user interfaces. Microsoft’s Fluent gives designers and developers the frameworks needed to create web and mobile applications that improve user experience (UX). These applications share design, code, and interactive experiences across different platforms. As a result, their functionality, appearance, and consistency are maintained while the time used to create these products is significantly reduced. So, is this interface framework free? Yes. Its design gives users the freedom to use it without upfront costs.
Microsoft Fluent UI for web variants
Fluent UI for web variants include:
#1 Fluent UI React Components
Fluent UI React Components is a React components library designed to help React developers create consistent web experiences while building interfaces that can be used in various products while using Fluent Design System’s aesthetics and guidelines. Fluent UI React Components can be configured using CSS-in-JS, including design tokens such as:
- Input Controls: Checkbox, Button, Dropdown, TextField, Toggle, SpinButton, ComboBox, Label, etc.
- Items & Lists: Basic List, Hover Card, ActivityItem, Persona, DetailsList, etc.
- Surfaces: Panel, Modal, Dialog, ScrollablePane, Callout, etc.
- Commands, Menus, & Navs: Nav, CommandBar, Breadcrumb, ContextualMenu, etc.
- Galleries & Pickers: DatePicker, Calendar, ColorPicker, PeoplePicker, etc.
- Progress: Shimmer, Spinner, and ProgressIndicator
- Utilities: Image, Keytips, Icon, Text, Stack, Selection, and Separator
- Notification & Engagement: Coachmark, MessageBar, and TeachingBubble
- Experimental: Card
#2 Fabric Core
Fluent UI Fabric Core, often known as simply Fabric Core, is a responsive, mobile-first collection of various tools and styles designed to enhance your speed and efficiency in creating a web experience while using Office Design Language. An assortment of Sass mixins and CSS classes gives users access to fonts, icons, colors, animations, and grids. As a result, you can easily change the appearance of the controls or the whole page template and create user-friendly interfaces.
The independent framework can be used with any server-side framework or single-page application and is ideal for a static page or a non-React project. Fluent UI Fabric Core, unlike Fluent UI React Components, is technology-agnostic, hence it can be used with different frontend frameworks and technologies, making it ideal for handling a wide range of web projects. It allows users to create custom UI components that align with Fluent design guidelines but without relying on pre-built React components.
Read more on Web development:
A web application security checklist for every stage of development
React best practices for web development
Progressive web apps (PWA)—a gentle introduction
Angular vs. React—which one to choose
React vs React native—which one is better for your business
What is the Electron software framework?
Fluent UI key features
Rich component library: Fluent is rich in pre-built, reusable UI components with a library featuring buttons, lists, forms, and navigation bars, among others. This can help save development time.
Consistency: Fluent UI follows the set guidelines of Microsoft Design System to help create a uniform look and feel across different platforms and apps. Its consistency helps to enhance trust and user familiarity, creating a unified user experience.
Cross-platform: Fluent UI is compatible with JavaScript frameworks used for building user interfaces in web applications.
Responsive design: Fluent UI encourages the implementation of responsive design practices. Its components can adapt to different screen orientations and sizes, leading to easier creation of responsive user interfaces that deliver optimized performance on a wide range of devices.
Customizable themes: It provides developers with a set of pre-built components that allow extensive customization. The design system can adapt to different project requirements, allowing developers to modify and customize the look and feel of user interfaces based on fonts, colors, and other elements of design.
Accessibility: The UI framework puts a strong emphasis on accessibility to ensure developers create apps that can be used by a wide range of people, including users with disabilities. For instance, the framework has built-in support for keyboard navigation and screen readers.
Localization and internationalization: The design system facilitates the development of user interfaces that can be used in different regions and languages.
Fluent design system platforms
The Fluent UI framework can be used in multiple platforms, including:
#1 React
Fluent uses the React framework with a list of building blocks with components such as Basic Inputs, Galleries, Pickers, Items and Lists, Commands, Menus, Navigations, etc. The robust React-based components are designed to adhere to Fluent Design System standards such as small bundle size, with refactored components that allow you to include the required package and dependencies.
#2 Web components
Fluent’s web components are used to create new web apps from scratch or to add new features to existing apps. It has several reusable components, instructions, and tools that you can use with Fluent UI React Components on GitHub. Microsoft Fluent Web Components are built with FAST. They allow users to:
- use only web platform code without other frameworks to build a web frontend
- integrate with other frameworks such as Vue, React, .NET and Blazor
- customize your project’s design language by creating and modifying new design tokens
- build a modern, highly performant, and accessible web frontend
#3 Windows
Fluent UI allows designers and developers to craft applications that feel customized for use with each Windows device, including Xbox One, PCs, and HoloLens. The Windows components include Windows applications design and code, layout and style, and control and patterns.
#4 iOS and macOS
You can design and build custom applications native to iOS and macOS with Fluent UIson GitHub. The iOS/macOS control components are built with SWIFT and are compatible with Objective-C.
#5 Android
Fluent’s Android controls are built with Kotlin and are compatible with Java. This OS has similar components to iOS.
#6 Cross-platform
Also, you can build apps and add-ins that work natively across multiple platforms with React Native. The controls are compatible with other JavaScript and React Native component libraries.
Who uses Fluent UI?
Fluent UI is developed by Microsoft and therefore integrates seamlessly with Microsoft’s technology stack, including Microsoft 365, SharePoint, and Windows applications. Several Microsoft products use the Fluent design, including:
- Outlook
- Word
- Excel
- OneDrive
- SharePoint
- PowerPoint
- OneNote
Other apps that use Microsoft Fluent design elements include:
- SoundByte, which uses a crispy Fluent design to enhance interaction behavior with SoundCloud
- Newsflow, an RSS reader that allows you to synchronize all your web reading across different gadgets easily; this enhances accessibility, since you can download content for offline use
However, Fluent UI can also be used with non-Microsoft technology stacks such as React, a JavaScript framework used to build UIs. Fluent UI’s components can be integrated into web-based React apps, and as a result, developers can use Fluent UI React Components in non-Microsoft environments to create modern, consistent UIs.
Pros of Fluent UI
The Fluent UI framework can help businesses produce more engaging product experiences, which is vital for attracting and retaining customers. Fluent’s benefits for businesses include:
#1 Immersive and engaging
All of the components of Fluent UI effortlessly offer a completely immersive experience. The combination of all these components builds an engaging product experience that enhances accessibility, performance, and internationalization. In addition, the framework enhances the process from design to code, ensuring you stay update-to-date with changes to the Fluent Design System language.
#2 Device-agnostic
Fluent’s components are designed to be adaptable to different environments. That is why every component tends to feel natural on different devices, ranging from PCs to TVs, laptops to tablets, and other emerging technologies such as wearable devices.
#3 Ease of use
The unified design language enhances the use of Fluent for both designers and developers working on UI projects, thanks to its clear user guidelines and pre-built components for easier integrations. Fluent UI designs optimize the user-friendliness of interfaces, making them easy to understand, easy to navigate, and capable of handling complex workflows and tasks. Additionally, Fluent experiences tend to adjust based on intent and behavior, i.e., they anticipate and understand what is needed by learning patterns and can therefore offer users shortcuts or provide suggestions.
#4 Customization
Businesses that intend to use these services can simply pick a platform that suits them and get started. Every platform has its own look and feel, allowing developers to choose platforms that can effectively cater to their needs. Its design improves with input, so developers and designers can improve the system based on responses from relevant stakeholders.
#5 Efficiency
Fluent UI’s component library provides developers and designers with a ready-to-use set of UI components. This helps to save time and effort, as it minimizes the need to design and develop custom UI components from scratch, which can be costly.
#6 Future proofing
Microsoft continuously improves and updates Fluent UI, and so its component library will continue evolving. This ensures that users can build modern interfaces using an update-to-date library with the best practices and latest design trends, eliminating the need for extensive updates and redesigns in the future.
#7 Versatility
While Fluent UI is optimized for use in Microsoft’s ecosystem, its cross-platform functionality allows designers and developers to use it with frameworks such as React Native, allowing them to create cross-platform mobile apps consisting of Fluent UI elements that can work in iOS, macOS, and Android.
#8 Community support
This open-source framework has a growing community of developers, so you can easily find tutorials, plugins, and other resources that can help enhance your developer experience.
Cons of Fluent UI
Downsides of using this design system include:
#1 Works best in Microsoft’s ecosystem
Although Fluent UI is an adaptable frontend framework, it is designed to work best in products or projects strongly associated with Microsoft’s ecosystem. Thus, developers using it with other technologies might need to implement extra measures including significant customization to seamlessly integrate it.
#2 Maintenance
This is a design system that is constantly updated. As it evolves, keeping up with the necessary changes can be time-consuming.
#3 Documentation
While the documentation includes examples of sample code, many of them pull in hidden codes or may lack critical elements. Due to the lack of proper documentation, it is challenging to integrate certain components such as the details list. Consequentially, this can make customization of some components feel difficult.
Conclusion
Fluent UI’s effectiveness lies in its open approach, offering a unified design language and a collection of reusable UI components primarily for web applications, with potential adaptability for use in mobile apps. It is now possible to build consistent and feature-rich design interfaces that offer the same functionalities across different platforms.
Moreover, by using this design framework, developers can streamline various processes and seamlessly integrate their apps with other Microsoft products and services, thereby reducing UI development time.
Additionally, the collaborative nature of this open-source design system has produced a community for people to contribute to, thereby improving the system and reducing the gap between product design and code implementation, especially when it comes to design tokens.
This article was originally published January 17, 2022, and updated September 27, 2023.
