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.
