Microsoft
Fluent 2: Creating Microsoft’s Design System
PROJECT OVERVIEW
To establish a coherent user experience across devices, Microsoft needed a design system whose philosophy is device/platform agnostic. One set of principal to rule all medium. A system that is tokens based and adhere to uniform set of design principles across organisation.
As a ‘system design team’, our responsibility was to create a Design System that binds iOS, Android, Windows and Web together as one quotient. A library which is tokenised and flexible. With consumer-grade user experience, seamless transitions and appealing interface, we created the new version of Microsoft’s design system, Fluent 2.
Why Version 2?
Fluent 1, the very first version of Microsoft’s design System was quite successful. It had around 20 components in its Android kit and was widely used across organisation. It would get updates from time to time that includes new component addition and revision of current ones.
But then what lead to the requirement of a new system?
Answer is: The ‘flexibility’ within a design system!
We saw Fluent 1 had limitations due to its fixed UI values and lack of structural integrity.
Fluent 1 had limitations due to its fixed UI values and lack of structural integrity.
It didn’t had semantic values, that means all UI building blocks like Colour, Shape, Icons, Elevation, Strokes, Paddings etc had fixed values. There was no guidance for our partner teams on how to alter these values as per their requirements.
We did not want a system which relied on ‘intuition’ to change variables. Rather we wanted something which auto evolves with time, a flexible system that is not bound to a certain UI value. Something that gives product makers freedom to create freely but still follow certain semantic norms. And that lead to the creation of Fluent 2.
Android Design Tokens
Design tokens are stored values used to assign Fluent styles like color, typography, spacing, or elevation, without hardcoding pixels and hex codes. Our token system allows us to speak a common language and ensure consistent designs across platforms and disciplines.
Typography
Typography tokens in a design system promotes consistency and efficiency by ensuring uniformity in font styles, sizes, and weight across Microsoft products like Outlook, Teams, OneDrive, OneNote, M365 etc.
These tokens enhance accessibility by providing clear guidelines for legibility. The Fluent type ramp for Android builds on OS’s native font family. It uses Roboto.
Colour
Fluent defines three color palettes: neutral, shared, and brand. Each palette performs specific functions. The neutral palette consists of the black, white, and grays that ground an interface.
Tokenizing colors in a design system simplifies management, ensuring consistent usage of colors across projects, which enhances collaboration.
- It enhances Dark/Light mode compatibility.
- Is accessibility complaint.
- Fosters brand’s consistency across applications.
Elevation
Tokenising elevation values across components creates a cohesive look and feel. Additionally, tokenized elevations allow for easy updates and modifications, enhancing flexibility. Proper use of elevations also improves accessibility by providing consistent visual cues for interactive elements.
Shapes
Shapes help make UI personable, easier to process, and recognizable at a glance. Selecting the correct shape for components builds consistent visual vocabulary and narrative.
Fluent components use four simple forms: rectangle, circle, pill, and beak.
Iconography
Fluent iconography is familiar, friendly, and modern to ensure an inviting, intuitive experience. Our icons are divided into three collections for use: system, product launch, and file icons.
UI Components
The Fluent design system is incredibly helpful for UI components for both Designers and Developers. By leveraging the Fluent design system, developers can create consistent and visually appealing components that work seamlessly across different platforms and devices.
This system includes a wide range of UI components, such as buttons, checkboxes, dropdowns, and more, which are designed to be flexible and customizable.
Themes
UI tokens are created catering to 4 colour themes.
- Light
- Dark
- Brand
- Brand (dark): Which in most cases adapts to the tokens of dark mode.
UI Components
We created around 24 Core components with more than 140 supporting sub component variables.
This makes fluent one of the most robust design system in the industry.
Building Fluent App
The most fundamental step of building a design System is collaboration with developers. Together we define the usage guidelines of the system.
For Fluent 2 Android, we developed the entire Fluent App within Microsoft IDC Hyderabad.
It starts with a hand off file, which contains all structure level details required to build a UI.
Dev. Hand off
Fluent UI App (actual screenshots)
Impact
Introduction of new Fluent Design System took both Designers and developers by storm within Microsoft.
Fluent 2 is based on new Jet Pack Compose code which provides more flexibility to android developers. Alot of teams within Microsoft started shifting their code to new JPC.
As of August 2024, around 293 Design teams within Microsoft is using Fluent 2, with more than 22,000 inserts everyday by our designer, which is 4 times the Fluent 1 components.
Fluent 2 is designed to be flexible and scalable, allowing developers and designers to create user interfaces that are accessible, theme-able, and customizable. It is implemented through UI libraries like Fluent UI React, Fluent UI React Native and OS Native platforms.
The Fluent 2 design tokens are available in a public repository on GitHub, making it easy for developers to use and contribute to the system
Additionally, Fluent UI React v9, which is part of Fluent 2, has been released with significant improvements in performance, accessibility, customization, and design-to-code.
