How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences
Continuing our journey toward a true design-to-code system at scale
Microsoft has built the world’s preferred productivity apps for decades. Powerful tools, such as Office, Outlook, OneDrive, and Teams, empower people around the world to achieve more. Fluent UI, a collection of UX frameworks, is how we’ll deliver these experiences to our customers.
Yes, there’s a dedicated team supporting Fluent UI. But the beauty in our open-source approach is that the people who eat, live, and breathe our products contribute to and improve the Fluent Design System for everyone. It’s how we cultivate and support great ideas from across the company (and beyond) that push us all forward.
It’s similar to biodiversity in nature; the richest soil results from a wide range of organisms weaving themselves into a thriving environment.
That’s why we’re laser-focused on improving how we craft experiences together. As you may know, Microsoft recently announced Fluent UI, unifying our web and mobile UI libraries under a shared charter. This was no small feat! And this year, we aim to close the gap between design and code, starting with a design token system. Read on to learn more about what we’re doing with Fluent UI, why we’re invested in it, and how you can get involved.
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.
We’re simplifying our developer ecosystem, so that all sorts of partners can leverage and contribute to these frameworks to build their own experiences.
Using components from our Fluent UI React (web), Fluent UI Apple (iOS and macOS), and Fluent UI Android GitHub libraries ensures our Microsoft 365 apps and services remain powerful tools while feeling more intuitive and coherent across platforms. With the addition of our new Fluent UI React Native library, we’re creating cross-platform components — making it easier for JavaScript developers to deliver experiences across devices to customers more quickly.
For developers building native Windows experiences, WinUI continues to embody the Fluent Design System.
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.
Like in car design, we think it takes only a few signature design elements for each product to shape the impression of a branded experience in people’s minds. These “essential” elements create clarity and structure, so people understand how to use a product no matter which device they’re on. Our Microsoft logo, familiar app icons, recognizable app names, and distinctive app brand colors shape people’s impressions of our branded experiences. But there are also more specific UI components that make our apps feel uniquely Fluent. For example, our custom navigation bar gives our mobile apps a familiar, familial touch.
To us, creating experiences that feel coherent across platforms isn’t about overwhelming style guide rules or UI that is identical down to every pixel. Instead, we focus on how each platform behaves and what our customers are accustomed to. In general, we refer to the 80/20 rule: we use native patterns 80 percent of the time, focusing our energy on custom components that improve customer experience.
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.
This means when you learn one Microsoft 365 app, you can easily pick up another and have a pretty good idea how to navigate it and get things done. The same goes for platforms. It’s about working where you want and how you want, whenever. People often start a task on one device and finish it from another, so creating coherent experiences across platforms reduces cognitive overload for our customers.
Simply put, Fluent is about designers and developers working better together to create best-in-class experiences that empower our customers.
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.
We’re looking to modernize our theming architecture to create a scalable, future-proof design system. Future themes will make it easier and faster to update design values across all platforms using a common theming infrastructure, taxonomy, and centralized set of cross-platform style libraries across Microsoft frameworks.
To do this, we’re moving away from fixed values and toward more agnostic variables, or design tokens. Design tokens define the visual attributes of a UI surface and link design to code using a common syntax. Centralized style libraries, accessible by both design and development tools, will serve as the place to make updates without having to revise coded components.
To expose the power of tokens and mitigate their complexity, we explored ways to meet designers inside their existing design tools. Since most designers at Microsoft use Figma, we searched for ways to extend the capabilities of that tool to support our design tokens with little to no friction.
Our Figma plug-in will replace the native properties panel. Instead of creating designs by assigning colors or stroke-widths via the properties panel, designers will assign tokens to their layers. They can remap these tokens to a different value if necessary, allowing any changes to propagate throughout the design. We’re also building the development pipeline that translates these design tokens into platform-specific values.
Together, these efforts help us distribute design values directly into the codebase, offering product designers and developers a completely integrated design-to-code workflow.
All this goodness will get passed on to customers, of course. People will be able to easily opt-in to theming libraries for apps they create. They can then customize these libraries to better reflect their product’s brand or service and feel more coherent across the ecosystem.
What you’re seeing is the evolution of our developer frameworks, with input from designers, developers, accessibility and internationalization experts, and writers. We’re identifying areas for improvement, areas where customers need more from us, and delivering on that.
If you’re looking for a design system that respects native look and feel and includes UX components hundreds of developers and millions of consumers use every day, maybe give Fluent a try.
We’re excited for both internal and external developers to dive into the Fluent UI Microsoft GitHub organization and start creating.
You can hear more about Fluent UI and our future aspirations for the Fluent Design System at the Microsoft Build 2020 conference on May 19-20. This online conference is free and open to all, and we’d love for you to join us.
We’re eager to collaborate and hear your thoughts. Please join the discussion over in our LinkedIn group, tweet us @FluentUI, and visit the Fluent Design System website to explore what’s new.
To stay in the know with Microsoft Design, follow us on Twitter, Instagram, Facebook or join our Windows Insider program. And if you are interested in joining our team at Microsoft, head over to aka.ms/DesignCareers.
