Microsoft’s Fluent UI is one of the most mature open-source design systems available. Used across Microsoft 365, Teams, Outlook, and Azure, Fluent UI provides a comprehensive React component library that solves foundational usability and accessibility challenges \u2014 freeing your team to focus on product development.<\/p>\n
In this guide, you’ll learn what Fluent UI is, why it’s an excellent choice for enterprise products, and how to bring Fluent UI React components into UXPin<\/a> using Storybook integration. By the end, you’ll be able to prototype with production-ready Fluent UI components in a visual editor \u2014 no coding required.<\/p>\n Fluent UI (previously Fluent Design System and Office UI Fabric) is Microsoft’s open-source design system for building web and native applications. It includes:<\/p>\n If your product lives within the Microsoft ecosystem \u2014 Teams apps, SharePoint add-ins, Outlook extensions, or Azure portal integrations \u2014 Fluent UI ensures your product feels native. Users get a consistent experience across your product and the Microsoft tools they already know.<\/p>\n Fluent UI components are tested against WCAG 2.1 AA standards. For enterprise products where accessibility compliance is a requirement (government, healthcare, finance), Fluent UI dramatically reduces the work needed to meet accessibility standards.<\/p>\n Fluent UI includes 60+ components covering common enterprise patterns:<\/p>\n Instead of designing and building foundational components from scratch, teams using Fluent UI can focus their engineering time on product-specific features. The component library handles the UI foundation.<\/p>\n Component-driven prototyping means building prototypes from reusable UI components rather than drawing static screens. When those components are real React code \u2014 like Fluent UI \u2014 the prototype behaves exactly like the final product.<\/p>\n Benefits of component-driven prototyping:<\/p>\n UXPin Merge<\/a> supports a Storybook integration that lets you import any Storybook-documented component library into UXPin’s visual design editor. Here’s how to set it up with Fluent UI.<\/p>\n If you don’t already have a Storybook setup for your Fluent UI components, initialize one:<\/p>\n Create stories for each Fluent UI component you want to use in UXPin. Each story represents a component variant that will appear in UXPin’s design panel.<\/p>\n Create a This command builds your Storybook, extracts component metadata (props, args, defaults), and syncs everything to your UXPin account.<\/p>\n Open UXPin and you’ll see your Fluent UI components in the design panel. Drag them onto the canvas, configure props through the properties panel, and build interactive prototypes.<\/p>\n Every Fluent UI component synced via Storybook brings its props into UXPin’s properties panel. For example, a Button component lets you configure:<\/p>\n All prop changes render in real time using the actual Fluent UI React component \u2014 not a static approximation.<\/p>\n Combine Fluent UI components with UXPin’s interaction features:<\/p>\n If you prefer not to use Storybook, UXPin Merge also supports a direct Git integration. Point Merge at your React component repository, and it will pull components directly from your codebase. This is ideal for teams with private, custom-themed Fluent UI implementations.<\/p>\n PayPal’s product teams use UXPin Merge to prototype with their production React components. Product managers and developers \u2014 not just designers \u2014 build and test prototypes using PayPal’s internal design system. The result: 90% of design projects<\/strong> are completed by product teams without dedicated designer involvement, dramatically accelerating their product development cycle.<\/p>\n This approach works because the prototypes are built with real components. There’s no gap between the design and what gets shipped.<\/p>\n Ready to prototype with Fluent UI in a visual editor? Here’s how to get started:<\/p>\nWhat Is the Fluent UI Design System?<\/h2>\n
\n
@fluentui\/react-components<\/code>).<\/li>\nWhy Use Fluent UI for Enterprise Products?<\/h2>\n
Seamless Microsoft 365 Integration<\/h3>\n
Enterprise-Grade Accessibility<\/h3>\n
Mature Component Library<\/h3>\n
\n
Rapid Product Development<\/h3>\n
Component-Driven Prototyping with Fluent UI<\/h2>\n
\n
How to Import Fluent UI into UXPin with Storybook<\/h2>\n
Prerequisites<\/h3>\n
\n
Step 1: Set Up Fluent UI with Storybook<\/h3>\n
npx storybook@latest init<\/code><\/pre>\nStep 2: Install the UXPin Merge CLI<\/h3>\n
npm install @uxpin\/merge-cli --save-dev<\/code><\/pre>\nStep 3: Configure the Integration<\/h3>\n
uxpin.config.js<\/code> file in your project root that tells Merge which components to sync:<\/p>\nmodule.exports = {\n components: {\n categories: [\n {\n name: 'Fluent UI',\n include: ['src\/components\/**\/*.stories.tsx']\n }\n ]\n }\n};<\/code><\/pre>\nStep 4: Push Components to UXPin<\/h3>\n
npx uxpin-merge push --storybook<\/code><\/pre>\nStep 5: Start Designing<\/h3>\n
Using Fluent UI Components in UXPin<\/h2>\n
Configuring Props and Args<\/h3>\n
\n
Building Interactive Prototypes<\/h3>\n
\n
Alternative: Git Integration<\/h3>\n
Real-World Example: How PayPal Uses Component-Driven Prototyping<\/h2>\n
Getting Started with Fluent UI and UXPin Merge<\/h2>\n
\n