{"id":43711,"date":"2023-03-16T04:07:50","date_gmt":"2023-03-16T11:07:50","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=43711"},"modified":"2023-08-13T02:32:52","modified_gmt":"2023-08-13T09:32:52","slug":"design-with-fluent-ui-components","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/","title":{"rendered":"Fluent UI \u2013 A Free Interactive UI Library in UXPin"},"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\/2023\/03\/Fluent_UI_blogpost-1024x512.png\" alt=\"Fluent UI blogpost\" class=\"wp-image-43712\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost-601x300.png 601w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost.png 1201w\" 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>Try a full set of interactive, ready-made components created by Microsoft and used by hundreds of enterprise companies. Build prototypes with the drag-and-drop elements that developers can easily copy. <a href=\"https:\/\/www.uxpin.com\/merge\/fluent-ui-library\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about Fluent UI<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__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-fluent-ui\">What is Fluent UI?<\/h2>\n\n\n\n<p>Fluent UI is an open-source React component library developed by Microsoft. It helps teams build accessible, scalable, and usable applications that <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-platform-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">work across devices<\/a> (mobile, tablet, desktop) and operating systems (<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ios-vs-andoid-ui-design-for-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">iOs, Android<\/a>, Windows).<\/p>\n\n\n\n<p>It\u2019s one of the most popular design systems, preferred by companies that build enterprise solutions. It\u2019s well-documented, customizable, and used by Microsoft to build Windows products. That\u2019s why it includes pivot tables, charts, and other <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">complex UI components<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-use-fluent-ui-in-uxpin\">Use Fluent UI in UXPin<\/h2>\n\n\n\n<p>We\u2019ve just added a built-in Fluent UI library. It contains 70+ components that you can use in prototyping. They are fully interactive. Once you use them, you can set up their properties and they will behave the same way as they do in the product.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design faster <\/strong>\u2013 build prototypes by dragging and dropping fully functional UI components; assemble your prototypes, test them with users, do multiple iterations in the same timeframe as you would just design a prototype.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Build interactive interfaces without coding <\/strong>\u2013 Fluent UI components are fully interactive, so you don\u2019t need to ask developers to help you build advanced prototypes with a high level of interactivity. You can do it on your own without limits to how the prototype could behave.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Streamline design handoff <\/strong>\u2013 share prototypes with developers \u2013 they can just copy the ready code in a few clicks. Put an end to a lengthy design handoff process and make sure what you design can be easily translated into code.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/t.co\/KHc6ho8mlr\">https:\/\/t.co\/KHc6ho8mlr<\/a> \ud83d\udcab Build interactive prototypes with 60+ ready-made <a href=\"https:\/\/twitter.com\/fluentui?ref_src=twsrc%5Etfw\">@fluentui<\/a> components, such as color picker, charts, and more. Try it for free! <a href=\"https:\/\/t.co\/88Agen5Gmj\">pic.twitter.com\/88Agen5Gmj<\/a><\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1636296270028460032?ref_src=twsrc%5Etfw\">March 16, 2023<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\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-how-to-use-fluent-ui-on-trial\">How to Use Fluent UI on Trial?<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/fluent-ui-library\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a trial<\/a> \u2013 Fluent UI is available for 14 days.<\/li>\n\n\n\n<li>Open a new prototype from the UXPin Dashboard.<\/li>\n\n\n\n<li>Go to Design System Libraries in the Toolbar on the left.&nbsp;<\/li>\n\n\n\n<li>Drag and drop interactive components from the library and preview how they behave.<\/li>\n\n\n\n<li>View and copy the code in the Spec Mode. Fluent UI is available until your trial ends.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/t.co\/1QU5DZC1HZ\">https:\/\/t.co\/1QU5DZC1HZ<\/a> \ud83c\udf89Performance, documentation, accessibility&#8230; there are dozens more benefits that come with using Fluent UI library. Try it yourself. <a href=\"https:\/\/t.co\/LmEGEhUlGK\">pic.twitter.com\/LmEGEhUlGK<\/a><\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1636323101808918528?ref_src=twsrc%5Etfw\">March 16, 2023<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\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-try-interactive-prototyping-with-fluent-ui\">Try Interactive Prototyping with Fluent UI<\/h2>\n\n\n\n<p>Create prototypes that are interactive from the start. <a href=\"https:\/\/www.uxpin.com\/merge\/fluent-ui-library\" target=\"_blank\" rel=\"noreferrer noopener\">Use Fluent UI components in UXPin<\/a>.<\/p>\n\n\n\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\/fluent-ui-library\" target=\"_blank\" rel=\"noopener\">Try Fluent UI Library<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Try a full set of interactive, ready-made components created by Microsoft and used by hundreds of enterprise companies. Build prototypes with the drag-and-drop elements that developers can easily copy. Learn more about Fluent UI. What is Fluent UI? Fluent UI is an open-source React component library developed by Microsoft. It helps teams build accessible, scalable,<\/p>\n","protected":false},"author":3,"featured_media":43712,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-43711","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"UXPin has over 70 Fluent UI components for designers to use. Now you can build interactive prototypes even on trial.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fluent UI \u2013 A Free Interactive UI Library in UXPin | UXPin<\/title>\n<meta name=\"description\" content=\"UXPin has over 70 Fluent UI components for designers to use. Now you can build interactive prototypes even on trial.\" \/>\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\/design-with-fluent-ui-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fluent UI \u2013 A Free Interactive UI Library in UXPin\" \/>\n<meta property=\"og:description\" content=\"UXPin has over 70 Fluent UI components for designers to use. Now you can build interactive prototypes even on trial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T11:07:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-13T09:32:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\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=\"2 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\\\/design-with-fluent-ui-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Fluent UI \u2013 A Free Interactive UI Library in UXPin\",\"datePublished\":\"2023-03-16T11:07:50+00:00\",\"dateModified\":\"2023-08-13T09:32:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/\"},\"wordCount\":387,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Fluent_UI_blogpost.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/\",\"name\":\"Fluent UI \u2013 A Free Interactive UI Library in UXPin | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Fluent_UI_blogpost.png\",\"datePublished\":\"2023-03-16T11:07:50+00:00\",\"dateModified\":\"2023-08-13T09:32:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"UXPin has over 70 Fluent UI components for designers to use. Now you can build interactive prototypes even on trial.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Fluent_UI_blogpost.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Fluent_UI_blogpost.png\",\"width\":1201,\"height\":600,\"caption\":\"Fluent UI blogpost\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-with-fluent-ui-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fluent UI \u2013 A Free Interactive UI Library in UXPin\"}]},{\"@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":"Fluent UI \u2013 A Free Interactive UI Library in UXPin | UXPin","description":"UXPin has over 70 Fluent UI components for designers to use. Now you can build interactive prototypes even on trial.","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\/design-with-fluent-ui-components\/","og_locale":"en_US","og_type":"article","og_title":"Fluent UI \u2013 A Free Interactive UI Library in UXPin","og_description":"UXPin has over 70 Fluent UI components for designers to use. Now you can build interactive prototypes even on trial.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/","og_site_name":"Studio by UXPin","article_published_time":"2023-03-16T11:07:50+00:00","article_modified_time":"2023-08-13T09:32:52+00:00","og_image":[{"width":1201,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Fluent UI \u2013 A Free Interactive UI Library in UXPin","datePublished":"2023-03-16T11:07:50+00:00","dateModified":"2023-08-13T09:32:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/"},"wordCount":387,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/","name":"Fluent UI \u2013 A Free Interactive UI Library in UXPin | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost.png","datePublished":"2023-03-16T11:07:50+00:00","dateModified":"2023-08-13T09:32:52+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"UXPin has over 70 Fluent UI components for designers to use. Now you can build interactive prototypes even on trial.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Fluent_UI_blogpost.png","width":1201,"height":600,"caption":"Fluent UI blogpost"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Fluent UI \u2013 A Free Interactive UI Library in UXPin"}]},{"@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\/43711","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=43711"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/43711\/revisions"}],"predecessor-version":[{"id":49276,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/43711\/revisions\/49276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/43712"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=43711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=43711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=43711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}