Bring Fluent Design System for React into UXPin with Storybook
Open-source design systems offer an opportunity to develop high-quality products at a rapid pace. By solving foundational usability and accessibility challenges, organizations can focus on product development and solving problems.
Fluent UI is an open-source design system favored by companies developing enterprise products. The comprehensive component library allows organizations to build apps for the Microsoft ecosystem while enabling full customization and flexibility through theming for any product.
Import your Fluent UI design system into UXPin using our revolutionary Merge technology to create a single source of truth between design and development. Visit our Merge page for more details and how to request access.
What is the Fluent UI Design System?
Fluent UI is a design system built and maintained by Microsoft. The open-source design system has two functions:
- A design language and component library for developing Microsoft 365 products–much like Lightning does for Salesforce
- A themeable component library for building enterprise applications outside of the Microsoft ecosystem
The comprehensive design system includes components and patterns for building cross-platform applications, including platform-specific UI elements for web, Windows, iOS, Android, and macOS.
Every component and pattern includes basic states and interactivity to enhance cohesion and consistency for cross-platform product development. These features allow organizations to focus on the product and user experience rather than designing, prototyping, testing, and iterating from scratch.
The Benefits of Using Fluent UI Design System
Aside from cohesion and consistency–which you get from most open-source component libraries–Fluent UI has many benefits for B2B and enterprise product developers.
Seamless Microsoft 365 Product Experiences
If your company uses Microsoft 365 for email, Excel, Word, Teams, etc., Fluent UI is a fantastic design system for internal products–even if they don’t sync with Microsoft 365.
Creating a seamless UI design from inbox and spreadsheets to warehouse inventory systems and data visualization gives employees a familiar user experience in every workspace, reducing learning curves which ultimately improves collaboration and productivity.
Enterprise Product Development
Enterprise UIs often have more complex architecture, layers, and data than B2C applications. Designing from scratch requires significant resources adding to the burden and complexities of developing and maintaining the final product.
An open-source library like Fluent UI eliminates hundreds (possibly thousands) of hours of building and testing components from scratch. Instead, product teams can effectively drag and drop Fluent UI components to develop new products.
Fluent UI includes a comprehensive library from Basic Inputs to more complex patterns like date pickers, list UIs, navigational components, notifications, modals, and more. The design system is also themeable, making it easy to adapt the library to integrate with other products or meet brand requirements.
Organizations also benefit from free maintenance as the Fluent UI team matures the design system, ensuring products meet foundational usability and accessibility requirements.
Component-Driven Prototyping With Fluent UI
Component-driven prototyping uses ready-made UI elements to build prototypes during the design process rather than designing from scratch.
The benefit of this prototyping methodology is that design teams can go from sketching and paper prototyping straight into high-fidelity prototyping, bypassing the time-consuming process of designing new UI elements.
For example, designing tables from scratch is particularly tricky and time-consuming. Fluent UI comes with many list UIs with implementation instructions and best practices.
Designers can choose an appropriate list for their project, add relevant content, and begin testing immediately. This document library UI, for example, would require many hours of designing, testing, and iterating. Fluent UI eliminates that work, so designers can focus on solving the core user need rather than drawing lines, circles, squares, etc.
While Fluent UI offers many benefits, building prototypes using traditional design tools have constraints that limit testing–like non-functioning inputs, date pickers, and other user controls.
With UXPin Merge, designers achieve code-like fidelity and functionality!
As a code-based design tool, UXPin Merge enables component-driven prototyping, where designers can build exact replicas of the final product without writing a single line of code!
Advanced Component-Driven Prototyping With UXPin Merge
UXPin Merge allows organizations to sync a component library from a repository, so designers use the same UI elements as engineers. Instead of using one of Fluent UI’s UI kits, designers use the design system’s React components in UXPin’s design editor.
These Merge components include Fluent UI’s React props defined by the design system, like color, size, interactivity, states, functionality, etc. These props appear in UXPin’s Properties Panel so designers can adjust components to meet product requirements.
How PayPal Uses Fluent UI and UXPin Merge
Before PayPal switched to UXPin Merge, the company’s internal products were inconsistent and fraught with usability issues.
As Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal, notes in an interview with UXPin, “None of PayPal’s product teams had experienced UX people or UI developers. The result was a range of usability and design consistency issues—no two products looked the same!”
Erica decided on Fluent UI: “We settled on Microsoft’s Fluent design system with UI controls for our internal tools development because they’re more enterprise-focused and better suited to internal user interfaces.”
Fluent UI gave PayPal the UI controls and consistency to focus on product development rather than building and managing components. The company uses a private GitHub repo to host its themed Fluent UI library, including custom components and user interface templates that minimize any need to design from scratch.
With constraints set by code in the repository, PayPal’s product team completes 90% of design projects. UX designers act as “user experience mentors,” helping with complex usability issues and continuous coaching.
Since the switch to Fluent UI and UXPin Merge, PayPal’s product teams deliver products 8X faster than experienced UX designers could previously using image-based tools.
A Single Source of Truth
The most significant benefit of using a design system like Fluent UI and Merge is that it creates a single source of truth across all product development teams.
With every Fluent UI component coming from a single repository, designers and engineers work within the same limitations and constraints. Any changes to the repo automatically sync to UXPin, notifying design teams of the update. Designers can use UXPin’s Version Control to switch to any version of the design system in any project at any time!
Fast-Track Product Maturity
Achieving product and design system maturity takes considerable time and resources. With Fluent UI, a startup can fast-track years of research and development to compete with Fortune500 software companies with their first release!
Instead of worrying about developing components, Fluent UI users can focus on product innovation and solving problems. The design system has all the UI elements to scale a product with little or no design (or programming) from scratch.
How to Import Fluent UI Components Into UXPin
Designers have two options when importing Fluent UI’s React component library. Both options require engineering collaboration to correctly set up the file structure and repository.
Git Integration
UXPin’s Git Integration only works with React components and connects directly to a repository. Engineers can use UXPin’s boilerplate repo as a template to set everything up. UXPin’s technical support is on hand to guide companies through this process and ensure the design system syncs correctly.
Once the initial connection is complete, UXPin will automatically sync any changes and notify designers of the update.
Storybook Integration
UXPin’s Storybook Integration also works with React but also enables organizations to sync Fluent UI’s Vue, Angular, and Ember libraries.
Storybook is a fantastic tool for developing and managing UI components in isolation. UXPin’s Storybook best practices ensure organizations get the most out of Storybook and Merge.
Using Storybook Components in UXPin
Once the Storybook setup is complete, the component library will appear in the left sidebar under Design System Libraries. The Storybook icon will appear next to the library’s name, like this Material UI example below (note the MUI library has a different icon for the Git Integration).
Designers drag and drop components from the library to build user interfaces. They can also combine these Storybook components or elements from other libraries using UXPin Patterns.
UXPin Patterns offer two significant benefits:
- Creating new UI components and templates to scale the design system (designers can share and use these to continue prototyping while waiting for engineers to add them to the repository)
- Saving multiple states or versions of a component for faster changes during prototyping and testing
Using Args and Props
Organizations can use React props or Storybook Args to set component properties that appear in UXPin’s Properties Panel. These props and Args ensure designers stick to the design system’s guidelines for styling, like colors, typography, states, shadows, and other crucial values.
Designers can apply different properties using dropdowns, checkboxes, text fields, etc., to achieve an on-brand result with minimal effort every time.
These properties also help engineers develop the final product faster because they already have the components and styling in the repository–ensuring absolute cohesion and consistency with every release!
Start Designing With Merge and Fluent UI Today!
Leverage the power of UXPin Merge and Fluent UI to develop enterprise products that exceed customer expectations with high-quality user experiences. Visit our Merge page for more information and how to request access to sync your design system or open-source component library.
