How to Use Fluent UI Design System in UXPin with Storybook

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 — freeing your team to focus on product development.

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 using Storybook integration. By the end, you’ll be able to prototype with production-ready Fluent UI components in a visual editor — no coding required.

What Is the Fluent UI Design System?

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:

• React components — A comprehensive library of production-ready UI components (@fluentui/react-components).
• Design tokens — Semantic color, typography, spacing, and shadow tokens that ensure visual consistency.
• Accessibility built in — Components include ARIA attributes, keyboard navigation, focus management, and high-contrast mode support.
• Theming system — Support for light, dark, and high-contrast themes, plus custom branding.
• Cross-platform support — Fluent UI components are available for React (web), React Native, and Windows native applications.

Why Use Fluent UI for Enterprise Products?

Seamless Microsoft 365 Integration

If your product lives within the Microsoft ecosystem — Teams apps, SharePoint add-ins, Outlook extensions, or Azure portal integrations — Fluent UI ensures your product feels native. Users get a consistent experience across your product and the Microsoft tools they already know.

Enterprise-Grade Accessibility

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.

Mature Component Library

Fluent UI includes 60+ components covering common enterprise patterns:

• Data display — DataGrid, Table, Tree, List
• Navigation — Breadcrumb, Nav, TabList, Overflow
• Inputs — TextField, Dropdown, DatePicker, Checkbox, Slider
• Feedback — Dialog, Toast, MessageBar, ProgressBar
• Layout — Card, Divider, Drawer, Accordion

Rapid Product Development

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.

Component-Driven Prototyping with Fluent UI

Component-driven prototyping means building prototypes from reusable UI components rather than drawing static screens. When those components are real React code — like Fluent UI — the prototype behaves exactly like the final product.

Benefits of component-driven prototyping:

• Consistency — Every prototype uses the same components, ensuring visual and behavioral consistency.
• Speed — Assemble screens from a component library instead of designing from scratch.
• Accuracy — The prototype reflects real component behavior, including states, responsiveness, and accessibility.
• Seamless handoff — Developers receive a prototype built with the exact components they’ll use in production.

How to Import Fluent UI into UXPin with Storybook

UXPin Merge 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.

Prerequisites

• A Fluent UI React project with Storybook configured
• A UXPin account with Merge access
• Node.js and npm installed

Step 1: Set Up Fluent UI with Storybook

If you don’t already have a Storybook setup for your Fluent UI components, initialize one:

npx storybook@latest init

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.

Step 2: Install the UXPin Merge CLI

npm install @uxpin/merge-cli --save-dev

Step 3: Configure the Integration

Create a uxpin.config.js file in your project root that tells Merge which components to sync:

module.exports = {
  components: {
    categories: [
      {
        name: 'Fluent UI',
        include: ['src/components/**/*.stories.tsx']
      }
    ]
  }
};

Step 4: Push Components to UXPin

npx uxpin-merge push --storybook

This command builds your Storybook, extracts component metadata (props, args, defaults), and syncs everything to your UXPin account.

Step 5: Start Designing

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.

Using Fluent UI Components in UXPin

Configuring Props and Args

Every Fluent UI component synced via Storybook brings its props into UXPin’s properties panel. For example, a Button component lets you configure:

• Appearance — primary, subtle, outline, transparent
• Size — small, medium, large
• Icon — leading or trailing icon
• Disabled state — toggle the disabled prop
• Content — change the button label text

All prop changes render in real time using the actual Fluent UI React component — not a static approximation.

Building Interactive Prototypes

Combine Fluent UI components with UXPin’s interaction features:

• Navigation — Link buttons and menu items to other screens
• Conditional logic — Show dialogs, toggle panels, or change states based on user actions
• Variables — Pass form data between screens for realistic flows
• States — Define multiple component states (default, hover, active, error)

Alternative: Git Integration

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.

Real-World Example: How PayPal Uses Component-Driven Prototyping

PayPal’s product teams use UXPin Merge to prototype with their production React components. Product managers and developers — not just designers — build and test prototypes using PayPal’s internal design system. The result: 90% of design projects are completed by product teams without dedicated designer involvement, dramatically accelerating their product development cycle.

This approach works because the prototypes are built with real components. There’s no gap between the design and what gets shipped.

Getting Started with Fluent UI and UXPin Merge

Ready to prototype with Fluent UI in a visual editor? Here’s how to get started:

1. Sign up for UXPin — Start a free trial with Merge access
2. Choose your integration — Storybook (recommended for Fluent UI) or Git
3. Sync your components — Use the Merge CLI to push Fluent UI components to UXPin
4. Start prototyping — Build interactive prototypes with real Fluent UI components using no-code tools or visual editors

Try UXPin Merge for free and bring your Fluent UI design system into a visual prototyping workflow.

Frequently Asked Questions

What is Fluent UI?

Fluent UI is Microsoft’s open-source design system for building web and native applications. It provides React components, design tokens, theming, and accessibility features used across Microsoft 365 products.

Can I use Fluent UI components in UXPin?

Yes. UXPin Merge lets you import Fluent UI React components via Storybook or Git integration. Once synced, you can drag and drop components in UXPin’s visual editor and configure props through the properties panel.

What’s the difference between Fluent UI and Fluent 2?

Fluent 2 is the latest evolution of Microsoft’s design language, with updated visual styles, improved accessibility, and a refreshed component library. The React implementation is available as @fluentui/react-components (v9+).

Is Fluent UI good for enterprise applications?

Fluent UI is specifically designed for enterprise applications. It includes data-heavy components (DataGrid, Table), accessibility compliance (WCAG 2.1 AA), theming support, and seamless integration with the Microsoft 365 ecosystem.

Do I need Storybook to use Fluent UI in UXPin?

No. While Storybook integration is the recommended approach, UXPin Merge also supports Git integration for importing React components directly from your repository.

How does UXPin Merge differ from Figma for design system prototyping?

Figma uses static design elements that approximate components. UXPin Merge uses real, code-backed React components with actual props, states, and behavior. Prototypes built with Merge are functionally accurate and developer-ready.