{"id":37379,"date":"2022-11-03T08:24:33","date_gmt":"2022-11-03T15:24:33","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=37379"},"modified":"2022-11-04T00:58:00","modified_gmt":"2022-11-04T07:58:00","slug":"bring-fluent-design-system-for-react-into-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/","title":{"rendered":"Bring Fluent Design System for React into UXPin with Storybook"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook-1024x512.png\" alt=\"Bring Fluent Design System for React into UXPin with Storybook\" class=\"wp-image-37380\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Import your Fluent UI design system into UXPin using our revolutionary Merge technology to create a single source of truth between design and development. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page for more details<\/a> and how to request access.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-fluent-ui-design-system\">What is the Fluent UI Design System?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.microsoft.com\/design\/fluent\/\">Fluent UI<\/a> is a design system built and maintained by Microsoft. The open-source design system has two functions:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A design language and component library for developing Microsoft 365 products\u2013much like Lightning does for Salesforce<\/li>\n\n\n\n<li>A themeable component library for building enterprise applications outside of the Microsoft ecosystem<\/li>\n<\/ol>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-benefits-of-using-fluent-ui-design-system\">The Benefits of Using Fluent UI Design System<\/h2>\n\n\n\n<p>Aside from cohesion and consistency<em>\u2013which you get from most <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>open-source component libraries<\/em><\/a><em>\u2013<\/em>Fluent UI has many benefits for B2B and enterprise product developers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-seamless-microsoft-365-product-experiences\">Seamless Microsoft 365 Product Experiences<\/h3>\n\n\n\n<p>If your company uses Microsoft 365 for email, Excel, Word, Teams, etc., Fluent UI is a fantastic design system for internal products\u2013even if they don&#8217;t sync with Microsoft 365.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-enterprise-product-development\">Enterprise Product Development<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Fluent UI includes a comprehensive library from <a href=\"https:\/\/developer.microsoft.com\/en-us\/fluentui#\/controls\/web\/button\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Basic Inputs<\/em><\/a> to more complex patterns like date pickers, list UIs, navigational components, notifications, modals, and more. The <a href=\"https:\/\/github.com\/microsoft\/fluentui\/wiki\/How-to-apply-theme-to-Fluent-UI-React-components\" target=\"_blank\" rel=\"noreferrer noopener\">design system is also themeable<\/a>, making it easy to adapt the library to integrate with other products or meet brand requirements.<\/p>\n\n\n\n<p>Organizations also benefit from free maintenance as the Fluent UI team <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">matures the design system<\/a>, ensuring products meet foundational usability and accessibility requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-component-driven-prototyping-with-fluent-ui\">Component-Driven Prototyping With Fluent UI<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">Component-driven prototyping<\/a> uses ready-made UI elements to build prototypes during the design process rather than designing from scratch.<\/p>\n\n\n\n<p>The benefit of this prototyping methodology is that design teams can go from sketching and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paper-prototyping-the-practical-beginners-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">paper prototyping<\/a> straight into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">high-fidelity prototyping<\/a>, bypassing the time-consuming process of designing new UI elements.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>While Fluent UI offers many benefits, building prototypes using traditional design tools have constraints that limit testing\u2013like non-functioning inputs, date pickers, and other user controls.<\/p>\n\n\n\n<p><em>With <\/em><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UXPin Merge<\/em><\/a><em>, designers achieve code-like fidelity and functionality!<\/em><\/p>\n\n\n\n<p>As a code-based design tool, UXPin Merge enables component-driven prototyping, where designers can <strong>build exact replicas of the final product without writing a single line of code!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-advanced-component-driven-prototyping-with-uxpin-merge\">Advanced Component-Driven Prototyping With UXPin Merge<\/h2>\n\n\n\n<p>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&#8217;s UI kits, designers use the design system&#8217;s React components in UXPin&#8217;s design editor.<\/p>\n\n\n\n<p>These Merge components include Fluent UI&#8217;s React props defined by the design system, like color, size, interactivity, states, functionality, etc. These props appear in UXPin&#8217;s Properties Panel so designers can adjust components to meet product requirements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-paypal-uses-fluent-ui-and-uxpin-merge\">How PayPal Uses Fluent UI and UXPin Merge<\/h3>\n\n\n\n<p>Before PayPal switched to UXPin Merge, the company&#8217;s internal products were inconsistent and fraught with usability issues.<\/p>\n\n\n\n<p>As Erica Rider, Senior Manager for UX \u2013 Developer tools and platform experience at PayPal, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">notes in an interview with UXPin<\/a>, <em>&#8220;None of PayPal&#8217;s product teams had experienced UX people or UI developers. The result was a range of usability and design consistency issues\u2014no two products looked the same!&#8221;<\/em><\/p>\n\n\n\n<p>Erica decided on Fluent UI: <em>&#8220;We settled on Microsoft&#8217;s Fluent design system with UI controls for our internal tools development because they&#8217;re more enterprise-focused and better suited to internal user interfaces.&#8221;<\/em><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>With constraints set by code in the repository, PayPal&#8217;s product team completes 90% of design projects. UX designers act as &#8220;user experience mentors,&#8221; helping with complex usability issues and continuous coaching.<\/p>\n\n\n\n<p>Since the switch to Fluent UI and UXPin Merge, PayPal&#8217;s product teams deliver products 8X faster than experienced UX designers could previously using image-based tools.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-single-source-of-truth\">A Single Source of Truth<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Version Control<\/a> to switch to any version of the design system in any project at any time!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fast-track-product-maturity\">Fast-Track Product Maturity<\/h3>\n\n\n\n<p>Achieving product and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system maturity<\/a> 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!<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-import-fluent-ui-components-into-uxpin\">How to Import Fluent UI Components Into UXPin<\/h2>\n\n\n\n<p>Designers have two options when importing Fluent UI&#8217;s React component library. Both options require engineering collaboration to correctly set up the file structure and repository.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-git-integration\">Git Integration<\/h3>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git Integration<\/a> only works with React components and connects directly to a repository. Engineers can use UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/start-with-a-boilerplate-repo\/\" target=\"_blank\" rel=\"noreferrer noopener\">boilerplate repo<\/a> as a template to set everything up. UXPin&#8217;s technical support is on hand to guide companies through this process and ensure the design system syncs correctly.<\/p>\n\n\n\n<p>Once the initial connection is complete, UXPin will automatically sync any changes and notify designers of the update.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-storybook-integration\">Storybook Integration<\/h3>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Integration<\/a> also works with React but also enables organizations to sync Fluent UI&#8217;s Vue, Angular, and Ember libraries.<\/p>\n\n\n\n<p><a href=\"https:\/\/storybook.js.org\/\">Storybook<\/a> is a fantastic tool for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-component-library-for-your-product-team\/\" target=\"_blank\" rel=\"noreferrer noopener\">developing and managing UI components in isolation<\/a>. UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-best-practices-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook best practices<\/a> ensure organizations get the most out of Storybook and Merge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-using-storybook-components-in-uxpin\">Using Storybook Components in UXPin<\/h2>\n\n\n\n<p>Once the Storybook setup is complete, the component library will appear in the left sidebar under <em>Design System Libraries<\/em>. The Storybook icon will appear next to the library&#8217;s name, like this Material UI example below (note the MUI library has a different icon for the Git Integration).<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/T6s5ttdTuWJ6ufsNoRYS3YszeDj2Gz04FxJSTe0eiLeBuFTfsfCl86H1oug1jLF3rIgFbNAsOG_OLdDlrwBqpgfa8Mz1Zx490PmVNw1gW4OYwvc96SbIs4oKPIGZiYfv7xUbnYaGc-OXGKWaPDT54pFZ8hzIDEUeLZJZJFLVEHsOOwt127T7DLbHDCAlLg\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>UXPin Patterns offer two significant benefits:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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)<\/li>\n\n\n\n<li>Saving multiple states or versions of a component for faster changes during prototyping and testing<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-args-and-props\">Using Args and Props<\/h3>\n\n\n\n<p>Organizations can use <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/using-react.js-components\/#editing-components\" target=\"_blank\" rel=\"noreferrer noopener\">React props<\/a> or <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/storybook-integration\/#how-to-change-component-properties\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Args<\/a> to set component properties that appear in <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/configuring-the-properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Properties Panel<\/a>. These props and Args ensure designers stick to the design system&#8217;s guidelines for styling, like colors, typography, states, shadows, and other crucial values.<\/p>\n\n\n\n<p>Designers can apply different properties using dropdowns, checkboxes, text fields, etc., to achieve an on-brand result with minimal effort every time.<\/p>\n\n\n\n<p>These properties also help engineers develop the final product faster because they already have the components and styling in the repository\u2013<em>ensuring absolute cohesion and consistency with every release!<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-start-designing-with-merge-and-fluent-ui-today\">Start Designing With Merge and Fluent UI <em>Today!<\/em><\/h2>\n\n\n\n<p>Leverage the power of <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> and Fluent UI to develop enterprise products that exceed customer expectations with high-quality user experiences. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page for more information<\/a> and how to request access to sync your design system or open-source component library.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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<\/p>\n","protected":false},"author":3,"featured_media":37380,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,199,440,11],"tags":[],"class_list":["post-37379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-design-systems","category-merge","category-tutorials"],"yoast_title":"","yoast_metadesc":"Storybook tutorial? Here it is! Learn how to bring Fluent Design System for React into UXpin's design editor and create rich prototypes.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bring Fluent Design System for React into UXPin with Storybook | UXPin<\/title>\n<meta name=\"description\" content=\"Storybook tutorial? Here it is! Learn how to bring Fluent Design System for React into UXpin&#039;s design editor and create rich prototypes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bring Fluent Design System for React into UXPin with Storybook\" \/>\n<meta property=\"og:description\" content=\"Storybook tutorial? Here it is! Learn how to bring Fluent Design System for React into UXpin&#039;s design editor and create rich prototypes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T15:24:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-04T07:58:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Bring Fluent Design System for React into UXPin with Storybook\",\"datePublished\":\"2022-11-03T15:24:33+00:00\",\"dateModified\":\"2022-11-04T07:58:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/\"},\"wordCount\":1560,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Design Systems\",\"Merge by UXPin\",\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/\",\"name\":\"Bring Fluent Design System for React into UXPin with Storybook | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png\",\"datePublished\":\"2022-11-03T15:24:33+00:00\",\"dateModified\":\"2022-11-04T07:58:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Storybook tutorial? Here it is! Learn how to bring Fluent Design System for React into UXpin's design editor and create rich prototypes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png\",\"width\":1200,\"height\":600,\"caption\":\"Bring Fluent Design System for React into UXPin with Storybook\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bring-fluent-design-system-for-react-into-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bring Fluent Design System for React into UXPin with Storybook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bring Fluent Design System for React into UXPin with Storybook | UXPin","description":"Storybook tutorial? Here it is! Learn how to bring Fluent Design System for React into UXpin's design editor and create rich prototypes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"Bring Fluent Design System for React into UXPin with Storybook","og_description":"Storybook tutorial? Here it is! Learn how to bring Fluent Design System for React into UXpin's design editor and create rich prototypes.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2022-11-03T15:24:33+00:00","article_modified_time":"2022-11-04T07:58:00+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Bring Fluent Design System for React into UXPin with Storybook","datePublished":"2022-11-03T15:24:33+00:00","dateModified":"2022-11-04T07:58:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/"},"wordCount":1560,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png","articleSection":["Blog","Component-Driven Prototyping","Design Systems","Merge by UXPin","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/","name":"Bring Fluent Design System for React into UXPin with Storybook | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png","datePublished":"2022-11-03T15:24:33+00:00","dateModified":"2022-11-04T07:58:00+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Storybook tutorial? Here it is! Learn how to bring Fluent Design System for React into UXpin's design editor and create rich prototypes.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Bring-Fluent-Design-System-for-React-into-UXPin-with-Storybook.png","width":1200,"height":600,"caption":"Bring Fluent Design System for React into UXPin with Storybook"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Bring Fluent Design System for React into UXPin with Storybook"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=37379"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37379\/revisions"}],"predecessor-version":[{"id":37385,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37379\/revisions\/37385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37380"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=37379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=37379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=37379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}