What is Fluent UI?
Fluent UI is an open-source component library developed by Microsoft. It is a collection of UX frameworks for creating cross-platform apps that share code, design, and interaction behavior. It helps teams create applications that are easy to access, scale, and use.
These applications work on all devices, including mobile, tablet, and desktop. They also run on different operating systems like iOS, Android, and Windows.
The Evolution and Versions
In 2020, Microsoft renamed its UI Fabric GitHub repository to Fluent UI. This change reflected their broader vision, connecting multiple products through code. They wanted to combine their popular web engineering frameworks, Fabric and Stardust. This would help create a smoother developer environment.
Since then, Fluent UI has worked on improving performance. They have added better theming features and combined components. They also created a more flexible API using React hooks and function components.
Microsoft released Fluent 2 in 2023. As of now, the latest version of Fluent UI React is V9.
What Products Built with Fluent UI
Fluent UI is an open-source library that lets developers easily use Fluent Design principles in their projects. But there are no widely known non-Microsoft products that prominently use Fluent UI as their primary design system. Fluent UI is primarily used by Microsoft products like Office.
Outlook: An email and calendar service that helps you manage your communications and schedule in one place.
OneDrive: A cloud storage service that stores, shares, and syncs files across devices.
Word: A word-processing application for creating, editing, and formatting documents.
Excel: A spreadsheet program for data analysis, calculations, and visualization.
PowerPoint: A presentation software used to create, edit, and share slideshows.
OneNote: A digital note-taking app that lets you capture and organize your ideas and information.
SharePoint: A platform for managing and sharing an organization's documents, data, and resources.
Teams: A collaboration tool that combines chat, meetings, file sharing, and app integration in one space.
PowerBI: A business analytics service that delivers insights through interactive dashboards and reports.
Applicable industries for reference
Microsoft empowers the workforce with industry-relevant capabilities. Fluent UI is versatile and can be used in a variety of industries.
Technology: It helps software developers create modern apps with consistent and customizable components.
Education: Its theming capabilities help build engaging e-learning platforms and student management systems.
Finance: Fluent UI allows for clean and quick interfaces for banking apps and financial tools.
Retail: E-commerce websites and customer service portals benefit from its attractive, smooth design components.
Government: Fluent UI ensures public service portals are accessible and easy to use for everyone.
Platform Support and Use Cases of Fluent UI
Supported Platforms
Fluent UI supports cross-platform development, which allows users to create consistent and cohesive user interfaces across different devices and operating systems.
Web: It supports Windows web browsers for creating consistent and modern web applications.
Desktop: It also supports desktop applications.
Mobile: Compatible with Android and iOS for developing responsive mobile apps
HTML/CSS: Microsoft provides tools to style HTML and CSS together and customize CSS.
React: Fluent UI is a React-based UI library for creating web experiences with Microsoft's design aesthetic.
Angular/ Vue.js: It supports Angular and Vue.js through its "Fluent UI Web Components" which can be integrated into an Angular or Vue-based project.
Use Case Scenarios
A Guide and Template for Fluent UI
Style Template File for Motiff
Open and Use Fluent 2 Components in Motiff
Effective Use of the Color System
Fluent UI features an adaptive color system with "neutral," "shared," and "brand" color palettes. This system allows for easy switching between light and dark modes while maintaining accessibility.
The neutral palette consists of black, white, and gray colors that form the basic elements of an interface. Shared colors are used sparingly to highlight important areas. Brand colors help users immediately recognize Microsoft's suite of products.
Each color in the Fluent UI palettes is stored as a global token, which means it can be used flexibly in different contexts. This system ensures that color schemes are both flexible and meet accessibility standards set by the WCAG. It let users personalize their color scheme so that it always works for them.
Typography Hierarchy and Readability
Fluent UI focuses on making text clear and easy to read by using a well-defined typography hierarchy. Fluent UI has different type ramps for web, Windows, macOS, iOS, and Android. This ensures a clear and readable text hierarchy on all platforms.
It usually uses the Segoe UI font family as the main typeface for Fluent. This font is chosen because it looks modern. It is easy to read on any device including Windows OS, Win UI native apps, and web apps.
However, the system uses native fonts by default. This choice helps create a familiar and accessible experience on all platforms.
Icon Design Principles
Fluent UI icons are designed to be modern and friendly, with rounded corners and simple shapes that fit different design needs.
Consistency: Icons should always mean the same thing no matter where you use them. The name of the icon should match what it looks like.
Simplicity: cons need to be simple and easy to understand. They should fit naturally on the screen and not be too complicated.
Localization: Be aware that some symbols might mean different things in different cultures. Make sure icons are suitable and understandable for people from various cultural backgrounds.
Fluent UI Components Templates
Open and Use Fluent 2 Components in Motiff
The Fluent UI system has five key components: light, depth, motion, material, and scale.
They are customizable with Fluent styles by default but can easily fit whatever the brand and theme. Additionally, they stay updated with Fluent Design Language changes through Design Tokens. Besides the React Components below, Microsoft also offers Web, iOS, Android and Windows Components for users.
A-C
D-N
O-S
T-V
Accessibility in Fluent UI
Microsoft aims to help everyone achieve more by considering the diverse backgrounds, perspectives, and abilities of the users. It focuses on identifying and fixing exclusions, designing for different needs, and learning from diversity.
Keyboard Navigation: Supports keyboard navigation and assistive tech.
Contrast Ratios: Standard text needs 4.5:1 contrast, larger text and interactive components need 3:1 contrast.
Rich Media and Alternatives: Use images and videos for easier understanding, especially for cognitive and learning disabilities; always provide text alternatives.
Accessible Coding: Write logical and semantic code from the start; follow WAI-ARIA authoring practices.
Other Resources
Github-fluent-ui: The page includes code, documentation, and resources for using Fluent UI in projects.
Medium | Fluent Design: Articles about design decisions, best practices, and updates of Fluent UI Design System.
Official Microsoft Blog: Updates, news, and insights directly from the Microsoft team about Fluent UI and other related topics.
Fluent UI Developer Center: A platform to collaborate, ask questions, and share feedback.
Microsoft Learn: Educational resources and tutorials to learn how to use Microsoft products effectively in your projects.