Post
Ask Question

Fluent UI (Collection of UX Frameworks from Microsoft )

What is Fluent UI?

Fluent UI is a collection of UX frameworks that Microsoft uses to build experiences for its products and it is designed to create consistent and accessible components. It includes styles, controls, and resources that can be used to create cross-platform apps. Designed to help build web apps using extensible Web Components. Fluent UI provides a collection of react-based components which can be used to create consistent web experiences. These components are designed to use the Fluent Design Language. 

What are the key features of fluent UI?

  1. Design Consistency: Fluent UI provides Design Consistency it means it ensures uniformity across different platforms or devices. There is no any major changes or look in design across different platforms.
  2. Accessibility: The Fluent UI design system is accessible by default, and Microsoft has guidelines for creating accessible experiences. It means components use alternative keywords navigation such as arrow keys to navigate menus and for other navigation. And it supports multiple ways to navigate.
  3. Customization: Fluent UI components are highly customizable so developer can customize as per need so that components can be fit in branding and design needs.
  4. Performance: Fluent UI components are built in optimized for high performance so that it can improve performance of processing and delivers fast and responsive UI with better performance.

Fluent UI Components

As we know that Fluent UI is UX library provided by Microsoft  it provides many component which are used by developers at development time and those are components also can be customizable so lets look at that components which Fluent UI provides.

  • Buttons: Various styles and functionalities (primary, secondary, icon buttons).
  • Inputs: Text fields, check-boxes, radio buttons, drop-downs.
  • Navigation: Menus, breadcrumbs, pagination.
  • Surfaces: Panels, dialogs, cards.
  • Utilities: Icons, typography, themes.

Components which are listed above are the limited for an example there are many other components also which you can use form official web site of fluent UI.

Basics Examples of Fluent UI

Here is an example of how we can start with fluent ui .

npm install @fluentui/react

import { initializeIcons } from '@fluentui/react/lib/Icons’; 
import { DefaultButton } from '@fluentui/react/lib/Button’; 

 const App = () => (
	 <DefaultButton text="Click Me" />
	 );

Theming in Fluent UI

Fluent UI provides us the Theming functionality. So it helps to customize visual appearance of User Interface. we can use with two different ways lets look in to that two ways :

  1. Custom Themes: In Fluent UI allows you to define your own theme and styles and color scheme, typography, and other design and theme related changes to match your need. We can also create a custom theme by defining a ‘theme’ object and passing it to our components. Theme object includes our custom theme settings like colors, fonts, spacing, and other design related settings.
  2. Dynamic Themes: Dynamic theme allows user to switch at runtime it means user can switch between one them to another based on their preferences . Dynamic theming is particularly useful for that application where user wants to multiple color schemes or user preferences.

Here we have an example for custom theme.

import { createTheme, ThemeProvider } from '@fluentui/react';

const myTheme = createTheme({
    palette: {
        themePrimary: '#0078d4',
        themeLighterAlt: '#f3f9fd',
        themeLighter: '#d0e7f8',
        themeLight: '#a9d3f2',
        themeTertiary: '#5ca9e5',
        themeSecondary: '#1a86d9',
        themeDarkAlt: '#006cbe',
        neutralPrimary: '#333333',
        neutralDark: '#212121',
        black: '#000000',
        white: '#ffffff',
    },
});

const App = () => (
    <ThemeProvider theme={myTheme}>
        <DefaultButton text="Themed Button" />
    </ThemeProvider>
);

Responsive Design

Fluent UI provides responsive design layout like grid . in grid we can some breakpoints or value for some specific screen size and according to that value design reacts for different screen size responsively.

Breakpoints are used for customize components  according to different screen size so that UI becomes responsive at defined breakpoint.

Here we have an example:

import { Stack } from '@fluentui/react';

const columnProps = {
    tokens: { childrenGap: 15 },
    styles: { root: { width: '100%' } },
};

const App = () => (
    <Stack horizontal {...columnProps}>
        <Stack.Item grow>Content</Stack.Item>
        <Stack.Item grow>Content</Stack.Item>
        <Stack.Item grow>Content 3</Stack.Item>
    </Stack>
);

In given example we have used stack so when screen changes it works according to screen size and adjust the content for screen size.

Case Studies

Microsoft Office

Microsoft is suite of productivity applications like word, excel, PowerPoint, SharePoint, outlook and many more.. these applications are designed to enhance productivity for developer and individuals and also enhance collaboration with individuals and organizations.

Fluent UI plays a crucial role in ensuring that consistency in design and responsive and accessible user interface across all platforms in Microsoft suite.

Microsoft Teams

Microsoft Teams is one of the productivity tool of the Microsoft 365 suite and it integrates workplace chat, meeting and notes and attachments. It is widely used by for team collaboration and communication across organizations of all sizes. It ensures accessibility like keyboard navigation , screen reader support, ensures performance.

Power BI

Power BI is business analytics service which is provided by Microsoft by using we can generate reports and dashboards by using business intelligence capabilities. Power BI leverages Fluent UI. Power BI Uses Fluent UI components for building interactive and responsive data visualizations.

Now we will talk about resources of fluent UI,

  1. GitHub Repository: Fluent UI on GitHub
  2. Documentation: Official site for documentation and examples available.

Conclusion

In this article we have seen that how Fluent UI offers a robust framework for building consistent, responsive, accessible components. It encourages best practices in designing and developing with optimized component for better performance. And as we know that Fluent UI is provided by Microsoft so there is large community of Microsoft so Fluent UI is Continuously evolving with contributions from the community and Microsoft.


Similar Articles