Fluent Design System – Building apps that feel natural on every device
This blog is an extract from the Microsoft Build 2020 – Fluent Design System – Building apps that feel natural on every device.
✏️ Fluent Design System – Overview:
Microsoft is evolving to speak a common language through a shared design system, across a broader set of platforms. A collective approach to creating simplicity and coherence. Fluent Design brings the fundamentals of principled design, innovation in technology and customer needs together as one. It allows us to innovate with technology and allows us to deliver customer needs together as one big team.
The Fluent Design System isn’t just only for Microsoft. It’s an open ecosystem and an open design system which means its the foundation and the shared DNA with anyone can use to deliver their own user experience.
🎁 What do you get with Fluent Design System?
Design Fundamentals: Core design fundamentals, patterns, and universal design elements. Design Language, Typography, Iconography, Spacing, and Color Palette.
Design Toolkits: Set of cross-platform design controls, patterns, and templates that can be used to create coherent experiences across a variety of UI frameworks.
UI Libraries: Set of libraries across a variety of frameworks and languages, that delivers coherence through controls, design patterns, and implements the fluent design in code.
Documentation: A hub for the samples, examples, and reference docs. Central location for style guide design tool kits, and what’s new.
💭 Why Fluent Design?
Today users use multiple devices and multiple devices at the same time. Fluent is native to each platform while still feeling uniquely fluent. The fluent design follows “80/20 rule” which brings only the essential fluent elements across the devices. This gives users a more coherent and productive experience. Users start a task on one device and end up completing the task on another device. Familiar user patterns increase productivity for end-users. Rich UI libraries in fluent design enable the designers and developers to provide native experience to the users on any device. Also, the fluent simplifies the design to code implementation process.
Read more about Fluent Design System
🚀 New Updates:
Previously, It was a bit confusing what UI libraries actually supported the Fluent Design System. Microsoft took this feedback from the users and renamed the UI libraries. So from now on, there will be two UI libraries – Fluent UI and WinUI. As WinUI has a large number of users and communities, Microsoft decided not to rename it just for namesake. WinUI will also be a part of the Fluent Design System.
Fluent UI for macOS is the latest announcement from the Build 2020. Fluent UI for macOS allows the designers and developers to provide native experience for macOS using the fluent design principles.
Fluent UI
👉🏻 Fluent UI React
👉🏻 Fluent UI iOS
👉🏻 Fluent UI macOS (new)
👉🏻 Fluent UI Android
WinUI
👉🏻 WinUI Windows
Another big announcement is Fluent UI for React Native. This allows us to build cross-platform experiences for all native platforms like Windows, macOS, iOS and Android.
📣 Free icons for your websites and apps. Read more
Fluent UI React:
Fluent UI React is exactly the same as Fabric UI. It is renamed to Fluent UI to bring consistency in names and to avoid confusion. Fluent UI react is used by a bunch of Microsoft 365 applications like Word, PowerPoint, Excel, SharePoint, OneDrive, Teams. There are 70+ components that allow you to build Office add-ins, SharePoint framework add-ins, and your own productive web apps. Visit Microsoft’s GitHub repo to read more about Fluent UI React.
Fluent UI React Native:
Fluent UI React Native is the brand new framework. This allows you to build cross-platform experience across Windows, macOS, iOS, and Android using the React Native technology. The big advantage of this framework is it has the Fluent Design System and it’s fully customizable to get the native experiences. It is built with shared coding concepts. Visit Microsoft’s GitHub repo to read more about Fluent UI React Native.
WinUI:
WinUI is used in Windows development that embodies Fluent Design and principles such as great accessibilities. WinUI 3 is the latest version and with the latest version, it is possible to build windows native apps with UWP, WPF, WinForms, MFC, ComCtl32. WinUI 3 is also used to power cross-browser technologies such as React Native, Xamarin.Forms, and Uno platforms.
🔗 Read more from the WinUI website.
Learn how to modernize the experience of any windows application using WinUI from the session “Everything you need to know about WinUI” 👇🏼
Fluent UI Mobile:
Fluent UI Mobiles allows us to build native mobile experiences using Fluent Design System for Android and iOS. With the Fluent UI mobile toolkit, it is very easy to go from design to code never like before. Due to the increased usage of Dark mode, now all the Fluent UI mobile frameworks support dark mode for the existing as well as new components. These are components that are being used in the Microsoft 365 mobile apps to build experience for Android and iPhone.
🔗 Fluent UI Android
🔗 Fluent UI iOS
Fluent UI macOS:
Fluent UI for macOS is newly introduced and it is in early alpha. It is used to build native macOS experiences using the Fluent Design System. This contains open-source components that Microsoft uses internally to build its own apps. It supports a variety of package managers for macOS. As it is hot of the press, there isn’t a ton of components right in it now. Visit Microsoft’s GitHub repo to read more about Fluent UI React Native.
The Future:
“Our opportunity in this cloud-powered, multi-device and the cross-platform world is for us to design seamless experiences that close the technology gaps and allow people to organize, manage, create and communicate wherever they are in ways they’ve never imagined before.”
– Benedikt Lehnert, Director of Product Design – Microsoft
In the old days, the design handoff and communication between the designers and developers are not that easy. A few years ago modern design tools came in with advanced controls like developer handoff which made it much easier for the developers to get into the design files and inspect them and find devices they are looking for to the designers to extract the values and hand them over to the developers.
But what if there is a way to remove all these back and forth steps? Microsoft is building some cool stuff on the layer of Design to Code experiences and to make it as seamless as possible.
Microsoft has developed a plugin for Figma for Design to Code experience. The three main pieces to achieve the design to code experiences are Distribution of design values between the design and engineering team, A signal plugin to alter those tokens without leaving the design tool, and a pipeline infrastructure to deliver a platform-specific value to Fluent UI and WinUI.
