Introducing the Fabric UX System: Our resource for extending Fabric experiences
The Fabric UX System represents a leap forward in design consistency and extensibility for Microsoft Fabric. Developed by the Fabric UX Team, this system is a collection of design guidance, common patterns, and reusable components created to empower designers and developers to build consistent, accessible, and engaging workload experiences across Fabric surfaces.
On our new documentation site, you’ll find resources to help accelerate extending Microsoft Fabric and developing Fabric-aligned experiences. We’ve worked hard to get this resource out to our partners and look forward to evolving our toolkits with your feedback and engagement.
Now let’s dive into some of the core resources we offer in the Fabric UX System.
Powered by a unified design language
At the heart of the Fabric UX System is the core of Microsoft’s Fluent 2 Design System. This integration ensures that every component aligns with the latest design principles and standards, providing a seamless user experience across Fabric experiences, as well as other Microsoft products.
The Fabric UX team has taken the time to translate each aspect of the Fluent 2 Design language into the Fabric expression we see in the product today—and package this expression into the Fabric UX System for easy reuse. This includes things like our color palette, typographic ramp, common spacing and layout principles, and special details like elevation and border radius. To make leveraging these things easy, these characteristics are enabled in our system via components and design tokens. To learn more about how this is done, visit our design token resource here.
This design language also manifests in our iconography and illustration approach across the product. Our team has also worked hard to generate extensive guidelines and toolkits that enable you to understand and leverage all the work we’ve done thus far to bring more cohesion and usability into non-native Fabric extensions.
Across our documentation site, we’ve captured information on the above resources that will lead to our published toolkits. While we use these toolkits internally to develop our product experiences, we wanted to enable other teams to build Fabric-aligned experiences just as fast.
Supporting development across frameworks
One of the key features of the Fabric UX System is its framework-agnostic components. These components are interoperable with existing React and Angular components, allowing for front-end development for Fabric on any tech stack.
The Fabric UX System components use Web Components to enable development in any web framework with a single source of controls. With the latest release of our Fluent team’s [Web Component library], we’re excited to support this flexible approach to developing UI specifically for Fabric.
It’s important to us that these controls are built on our key foundational principles and commitments:
- Browser support – Our controls are compatible with all modern browsers supported by Fluent, as they are built as Web Components.
- Mobile-first compatibility – Our controls support touch compatibility, mobile-first reflow, and perform well on all mobile experiences.
- Accessible by design – Our controls are built and tested with out-of-the-box accessibility. Composing our controls together still requires some knowledge of accessibility principles in your implementation.
- Minimal dependencies – Our controls are built to limit the amount of bundle size and feature dependencies to deliver the most performant and flexible components possible.
- Composability – Easy composability allows you to quickly develop experiences using our controls as building blocks, and we guarantee that each individual component, when properly composed, behaves correctly on its own.
- Completeness – New components, documentation, and resources will be added to the Fabric UX System over time.
Our team will continue to improve developer ease-of-use and tooling in the Fabric UX system. This will include things like optimizing component wrappers for improved developer ergonomics, further performance optimizations for UI, and additional tooling for automated design tokens and theming across all components.
Continuous Improvement
The Fabric UX System is continuously evolving, with updates and enhancements being made to better serve the needs of our design and developer community. As we release this resource externally, we are excited to share the continued updates and enhancements to the Fabric UX System moving forward. We invite you to explore the Fabric UX System and join us in shaping the future of Fabric together.
To learn more about the Microsoft Fabric Workload Development Kit, check out our blog post here.
To jump right in, visit https://aka.ms/fabricux.
