Fluent UI

Authors

Contents

Over the years, Microsoft consistently created productivity apps with great user interfaces and collaborative features. But what this company has been trying to maintain is creating applications with consistent design interfaces across different platforms. However, building a good UI with consistency, simplicity, and intuitiveness isn’t easy. Therefore, Microsoft has introduced a ready-made framework called Fluent UI to make this process easier for developers and promote product integration.

 

What is Fluent UI?

Fluent UI is an open-source, cross-platform design system you can use to build a user interface. Microsoft’s Fluent gives designers and developers the frameworks needed to create web and mobile applications that improve user experience. 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 web components

Fluent’s web components include:

Fluent UI and React

Fluent React is an official open-source collection of React front-end framework or React-based components designed to help users create consistent web experiences while building interfaces that can fit in various products. It has a wide range of robust control components that 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.

 

Fig 1. Sample Fluent UI controls

 

Fabric Core

Fabric Core is a responsive, mobile-first assortment of various tools and styles designed to enhance your speed and efficiency in creating a web experience while using Office Design Language. The collection of Sass mixins and CSS classes gives users access to fonts, icons, colors, animations, and grids. As a result, it allows you to easily change the appearance of the controls or the whole page template.

Fabric Core is ideal for static pages or non-React applications.

 

Fluent UI and Microsoft Teams

Microsoft Teams is a popular example of this interface design framework. The communicator consists of a kit with components, patterns, and best practices for presenting typical use cases and building team applications. As a result, designers have the best source of inspiration with easily available hints on relevant functionalities. On the other hand, developers can build finished solutions faster with this communicator’s UI library package.

 

Fig 2. Sample Teams React UI

 

Fluent design system key principles

Also known as “Blocks,” Fluent’s operations are based on five principles: Light, Depth, Scale, Motion, and Material.

 

#1 Light

There are two components of Light: Reveal highlight, and Reveal focus. Reveal highlight helps to draw attention to information. You can see hidden object borders when hovering, e.g., the hamburger navigation menu buttons and lists. On the other hand, Reveal focus with focus visual gives focusable items a border glow. Overall, Light helps to enhance user orientation during navigation and selection, producing an atmosphere that aids user guidance.

 

#2 Depth

Depth utilizes the Z-axis to input an additional dimension to the 2D display. Depth enhances content differentiation through layering and its presented via Z-depth layering and drop shadows.

 

#3 Material

Acrylic and Mica are the main materials created for Microsoft programs. Microsoft materials provide an exclusive touch and feel experience, tempting users to interact.

 

#4 Motion

Motion creates a relationship between UI elements. This is important in improving experience continuity by establishing smooth and natural transitions between various elements.

 

#5 Scale

Applications can scale across different dimensions, form factors, and display sizes. Microsoft design scale mainly focuses on interoperability and consistency across all devices and from 2D to 3D.

 

Fluent design system platforms

Fluent’s UX frameworks 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.

 

#2 Web components

Fluent’s web components are used to create new web apps from scratch or add new features to existing apps. It has several reusable components, instructions, and tools that you can use with Fluent UI React on GitHub. Microsoft Fluent web components are built with FAST.

 

#3 Windows

Allows designers and developers to craft applications that feel customized for use with each Windows device, including Xbox One, PCs, phones, and HoloLens. The Windows components include Windows applications design and code, Layout and style, and Control and patterns.

 

#4 iOS and macOS

Design and build custom applications native to iOS and macOS with Fluent UIs on GitHub. The iOS /macOS control components are built with SWIFT and 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

Build apps and add-ins that natively work across multiple platforms with React Native. The controls are compatible with other JavaScript & React Native component libraries.

 

Fluent UI apps

Several Microsoft products use the Fluent design, including:

 

  • Outlook
  • Word
  • Excel
  • OneDrive
  • SharePoint
  • PowerPoint
  • OneNote

 

Other apps that use Microsoft Fluent design elements include:

 

  • myTube: this brings a premium YouTube experience to Windows 10 users.
  • SoundByte: uses a crispy fluent design to enhance interaction behavior with SoundCloud.
  • Newsflow: this is an RSS reader that allows you to sync all your web readings across different gadgets easily. This enhances accessibility, since you can download content for offline use.

 

Business benefits of Fluent UI

Fluent design’s various UX frameworks can help businesses produce more engaging product experiences that are vital in attracting and retaining customers. Fluent’s benefits for businesses include:

 

#1 Cross-platform use

This non-proprietary design system can be used by businesses to design across different platforms, including iOS, Android, Windows, and Web.

 

#2 Unique platform design

Every platform has its own look and feel, allowing developers to choose platforms that can effectively cater to their needs.

 

#3 Natural on every device

Fluent’s components are designed to listen with intent and adapt. That’s why every component tends to feel natural on different tools ranging from PCs to TVs, laptops to tablets.

 

#4 Engaging and immersive

All components on Fluent offer a completely immersive experience effortlessly. The combination of all these components builds an engaging product experience that enhances accessibility, performance, and internationalization.

 

#5 Powerful and intuitive

This platform’s interface adjusts to different intents and behaviors. Fluent components quickly anticipate and understand what’s required, thereby effectively uniting people and ideas by creating a thriving community where users can share code and ideas, regardless of the physical location.

Businesses that intend to use these services can go ahead and pick a platform that suits them and get started. Its design improves with input, so developers and designers have a better chance to improve the system based on responses from the relevant stakeholders.

 

Summary

Fluent’s effectiveness lies in its open approach that effectively unifies mobile and web UI libraries under one shared charter. It’s now possible to build consistent design interfaces that maintain the same functionalities across different platforms. The design framework reduces UI development time while easily promoting integration with other Microsoft services/products. This has produced a community for people to contribute to and improve the design system, thereby reducing the gap between product design and code, especially when it comes to design tokens.

Sign up for the newsletter and other marketing communication

The controller of the personal data is FABRITY sp. z o. o. with its registered office in Warsaw; the data is processed for the purpose of sending commercial information and conducting direct marketing; the legal basis for processing is the controller’s legitimate interest in conducting such marketing; Individuals whose data is processed have the following rights: access to data, rectification, erasure or restriction, right to object and the right to lodge a complaint with PUODO. Personal data will be processed according to our privacy policy.

You may also find interesting:

Micro frontends: pros and cons

Micro frontends can be an alternative to the frontend monolith architecture, especially for more complex projects. Read on to find out more.

How can we help?

The controller of the personal data is FABRITY sp. z o. o. with its registered office in Warsaw; the data is processed for the purpose of responding to a submitted inquiry; the legal basis for processing is the controller's legitimate interest in responding to a submitted inquiry and not leaving messages unanswered. Individuals whose data is processed have the following rights: access to data, rectification, erasure or restriction, right to object and the right to lodge a complaint with PUODO. Personal data in this form will be processed according to our privacy policy.

You can also send us an email.

In this case the controller of the personal data will be FABRITY sp. z o. o. and the data will be processed for the purpose of responding to a submitted inquiry; the legal basis for processing is the controller’s legitimate interest in responding to a submitted inquiry and not leaving messages unanswered. Personal data will be processed according to our privacy policy.