Microsoft Design
Published in

Microsoft Design

How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences

Continuing our journey toward a true design-to-code system at scale

Metaphorical image of Fluent UI’s elemental pieces

New cross-platform library

Fluent UI is more than a collection of UX frameworks for creating web and mobile apps that share code, design, and interaction behavior. It’s a new approach to how we work across disciplines and product teams to deliver more seamless experiences that feel natural on the devices our customers use throughout their day.

Native to each device, still uniquely Fluent

We believe productivity software needs to first and foremost elevate human creativity. It needs to get out of the way and make the task at hand effortless, whether on your phone, tablet, laptop, or large screen.

Android and iOS mobile screens showing how similar the Fluent UI nav bar looks
Custom Fluent UI navigation bar naturally fitting into native iOS and Android platforms

Delivering a more coherent, productive experience

It can be frustrating when things work differently for no (or some unexplained) reason. It frustrates our customers, frustrates us, and motivates us to make it better. Rallying around the Fluent Design System helps us simplify and become more efficient as a company, which is great. But it also allows us to deliver more coherent and connected experiences for our customers. Win, win.

Paper scrolls unrolling and revealing UI components
The anatomy of our UI components

Modernizing our theming architecture

Today, Microsoft products span the web and Windows, Android, iOS, and macOS platforms, and they all use disconnected theming approaches. Creating coherent experiences across all platforms requires designers and developers to update changes independently.

Work surface covered by a button design spec document with completed UI buttons casually stacked next to it

--

--

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Benedikt Lehnert

Chief Design Officer @getstarkco • Investor in design-led startups • Girl dad • Formerly CDO / design exec @SAP @Microsoft @Wunderlist • www.benediktlehnert.com