{"id":50355,"date":"2023-10-03T05:34:32","date_gmt":"2023-10-03T12:34:32","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=50355"},"modified":"2023-10-04T01:56:50","modified_gmt":"2023-10-04T08:56:50","slug":"functional-prototype","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/","title":{"rendered":"Functional Prototype \u2013 A Short Guide for Digital Product Designers"},"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\/10\/Functional-Prototype-1-min-1024x512.png\" alt=\"Functional Prototype 1 min\" class=\"wp-image-50356\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min.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>A functional prototype is a working model of a product that demonstrates its core functionalities. Through <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Merge technology<\/a>, designers can seamlessly convey their designs to developers.\u00a0<\/p>\n\n\n\n<p><strong>Key Takeaways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A functional prototype is a practical representation of a product, showcasing its main functions.<\/li>\n\n\n\n<li>UXPin&#8217;s Merge technology integrates interactive React components into design editors, allowing designers to communicate seamlessly with developers, test prototypes, and transition designs to development.<\/li>\n\n\n\n<li>Functional prototypes offer insights into user behavior, validate designs, and drive improvements.<\/li>\n\n\n\n<li>Crafting a functional prototype involves designing with interactions, conducting tests, and embracing a learning process.<\/li>\n\n\n\n<li>By leveraging Merge technology, designers bridge the gap between prototype creation and development through shared, interactive React components.<\/li>\n<\/ul>\n\n\n\n<p>Merge technology integrates React components into a design editor, allowing designers to create prototypes. These interactive React components are utilized by developers in the final product. After designers construct and test prototypes with users, the design is prepared for development. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover how UXPin Merge works<\/a>.<\/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<h2 class=\"wp-block-heading\" id=\"h-what-is-a-functional-prototype\">What is a functional prototype?<\/h2>\n\n\n\n<p>A functional prototype is a dynamic representation of how a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/product-design-ultimate-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">product design<\/a> works. It lets you interact with the product to understand its features and flaws, helping you refine your <a href=\"https:\/\/theroxanneperspective.com\/ux-resources\" target=\"_blank\" rel=\"noreferrer noopener\">design for a better user experience<\/a>.<\/p>\n\n\n\n<p>While <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-prototype-a-guide-to-functional-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">traditional prototypes<\/a> might simulate the appearance or layout of a product, they often fall short in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/\" target=\"_blank\" rel=\"noreferrer noopener\">depicting its actual behavior<\/a>. Functional prototypes, on the other hand, introduce the invaluable element of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactivity<\/a>. Every click, swipe, or scroll is more than a predefined animation\u2014it&#8217;s a glimpse into the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-create-ux-customer-journey\/\" target=\"_blank\" rel=\"noreferrer noopener\">user&#8217;s journey<\/a>, offering insights into the product&#8217;s usability and efficiency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-functional-vs-non-functional-prototype\">Functional vs non-functional prototype?<\/h2>\n\n\n\n<p>Functional and non-functional prototypes primarily differ in the depth of interactivity they offer. Functional prototypes go beyond appearances, letting you experience a product&#8217;s behavior, while non-functional prototypes offer a visual preview without being able to interact with the prototype.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-functional-prototype\">Functional Prototype:<\/h3>\n\n\n\n<p>A functional prototype thrives on its ability to mimic the actual functionality of a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-a-product\/\" target=\"_blank\" rel=\"noreferrer noopener\">product design<\/a>. It&#8217;s not just about appearances\u2014it&#8217;s about actions, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactions<\/a>, and user experiences. When you interact with a functional prototype, you&#8217;re navigating through a scenario that closely mirrors what a user will do in the product. The features work, the buttons click, and the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">user flow<\/a> replicates the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-vs-final-product\/\" target=\"_blank\" rel=\"noreferrer noopener\">real product<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-functional-prototype-example\">Functional Prototype Example:<\/h4>\n\n\n\n<p>Imagine you&#8217;re designing a mobile app for a fitness tracker. A functional prototype would allow users to navigate through the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-user-interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">interface<\/a>, tap on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">buttons<\/a> to simulate exercise tracking, and even experience the app&#8217;s real-time feedback as if they were logging an actual workout. This prototype showcases not only the design but also the real-world usability of the app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-non-functional-prototype\">Non-Functional Prototype:<\/h3>\n\n\n\n<p>A non-functional prototype predominantly emphasizes the visual aspect of a product. It may look like the final product, sporting its <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system components<\/a> and layout, but it&#8217;s devoid of the dynamic interplay that defines user interactions. A non-functional prototype is like a static snapshot\u2014a mere preview of how the product might appear, rather than how it truly functions.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-non-functional-prototype-example\">Non-Functional Prototype Example:<\/h4>\n\n\n\n<p>Continuing with the fitness tracker app, a non-functional prototype would <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">capture the visual essence of the app<\/a>\u2014the layout of screens, the arrangement of buttons, and the overall aesthetic. However, it would lack the ability to simulate interactions. Users wouldn&#8217;t be able to tap on buttons or simulate workout tracking; they would merely be able view the app&#8217;s static visual representation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-the-benefits-of-functional-prototyping\">What are the benefits of functional prototyping?<\/h2>\n\n\n\n<p>Performing functional prototyping offers several advantages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understand how users will interact with your product, avoiding <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/bad-product-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX design mistakes<\/a>.<\/li>\n\n\n\n<li>Validate user experience design concepts through <a href=\"https:\/\/theroxanneperspective.com\/best-user-testing-tools\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">user testing and feedback<\/a>.<\/li>\n\n\n\n<li>Refine UX designs <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-iteration-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">iteratively<\/a>, improving user experience and functionality.<\/li>\n\n\n\n<li>Enhance collaboration by presenting interactive prototypes to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-analysis-for-product-teams\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a>.<\/li>\n\n\n\n<li>Efficiently iterate and innovate, saving time and resources in the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-do-you-create-a-functional-prototype\">How do you create a functional prototype?<\/h2>\n\n\n\n<p>For this process, we will create a functional prototype of a signup form to check if the email and password inputs are filled out and validate the email format as well as the password length for a truly real user experience. This is how your hypothetical functional prototype of a signup form will look like:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-set-up-your-canvas\">1. Set up your canvas<\/h3>\n\n\n\n<p>After selecting the blank document from the dashboard, the artboard will open up, and there you can create your signup form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/functional-prototype-in-uxpin-377x300.png\" alt=\"functional prototype in uxpin\" class=\"wp-image-50361\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/functional-prototype-in-uxpin-377x300.png 377w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/functional-prototype-in-uxpin.png 494w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p>Identify the screen size of the platform on which your sign-up form will work on:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scroll to <strong>Canvas size<\/strong><\/li>\n\n\n\n<li>Select your canvas size<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"476\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/adjust-canvas-size-for-prototyping-476x300.png\" alt=\"adjust canvas size for prototyping\" class=\"wp-image-50364\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/adjust-canvas-size-for-prototyping-476x300.png 476w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/adjust-canvas-size-for-prototyping.png 622w\" sizes=\"auto, (max-width: 476px) 100vw, 476px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-begin-by-designing-your-layout-with-uxpin-libraries\">2. Begin by designing your layout with UXPin Libraries<\/h3>\n\n\n\n<p>Once the blank document is open, you&#8217;ll see the canvas:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Design System Libraries<\/strong><\/li>\n\n\n\n<li>Select <strong>UXPin Libraries<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-libraries-for-prototyping-479x300.png\" alt=\"uxpin libraries for prototyping\" class=\"wp-image-50369\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-libraries-for-prototyping-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-libraries-for-prototyping.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select a library to add components to your canvas. You can create your own library of components to easily drag and drop elements into your canvas, in this scenario, let\u2019s use the iOS library.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/ios-library-in-uxpin-480x300.png\" alt=\"ios library in uxpin\" class=\"wp-image-50372\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/ios-library-in-uxpin-480x300.png 480w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/ios-library-in-uxpin-290x180.png 290w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/ios-library-in-uxpin.png 582w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p>Design the layout of your sign-up form by adding elements like email and password inputs, along with labels and buttons.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"391\" src=\"https:\/\/lh5.googleusercontent.com\/RHKpDCz9etSQg-rRL7un6mzpyfrbDoL7FdPgReAK5AfapXlRN3ddDpeLl8jzm3GHt9_jgsqsAtRme1NAp-V3JVNDphzkNrhK0xFTmcgljKxZJuV8U4Vf3ljNXRo4ixVXX8g8TfoXmK1zfAhx9vUbLQA\"><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-make-the-email-and-password-input-an-interactive-element\">3. Make the email and password input an interactive element<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the email input field<\/li>\n\n\n\n<li>Go to <strong>Interactions<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/go-to-interaction-479x300.png\" alt=\"go to interaction\" class=\"wp-image-50375\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/go-to-interaction-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/go-to-interaction.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Trigger<\/strong><\/li>\n\n\n\n<li>Set the trigger to <strong>Focus<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/go-to-trigger-479x300.png\" alt=\"go to trigger\" class=\"wp-image-50378\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/go-to-trigger-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/go-to-trigger.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Scroll to Action and select <strong>Set State<\/strong><\/li>\n\n\n\n<li>Go to<strong> Element <\/strong>and select <strong>Email input<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image1-479x300.png\" alt=\"image1\" class=\"wp-image-50394\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image1-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image1.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Next, we will set the state and add the interaction:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Set State <\/strong>and select <strong>Base<\/strong><\/li>\n\n\n\n<li>Click on <strong>\u2018Add\u2019\u00a0<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/email-input-in-functional-prototype-479x300.png\" alt=\"email input in functional prototype\" class=\"wp-image-50382\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/email-input-in-functional-prototype-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/email-input-in-functional-prototype.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Repeat this prototyping process for the password input field.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-add-a-validation-logic\">3. Add a validation logic<\/h3>\n\n\n\n<p>Set up logic to check if the email and password fields are filled out. Display error messages if not. Add a new interaction:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the email input<\/li>\n\n\n\n<li>Go to <strong>Interactions<\/strong><\/li>\n\n\n\n<li>Go to New Interaction<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/validation-logic-in-prototyping-479x300.png\" alt=\"validation logic in prototyping\" class=\"wp-image-50388\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/validation-logic-in-prototyping-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/validation-logic-in-prototyping.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Next, set up the condition to detect if the email input field is empty:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Change the trigger to <strong>Focus Lost<\/strong><\/li>\n\n\n\n<li>Go to <strong>Conditions <\/strong>and select <strong>Content of element <\/strong>in the first field<\/li>\n\n\n\n<li>Select <strong>Email input <\/strong>(it should be auto selected)<\/li>\n\n\n\n<li>Select the condition <strong>is empty<\/strong><\/li>\n\n\n\n<li>Click on <strong>Add condition<\/strong> to finish<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/add-email-field-in-functional-prototype-1-479x300.png\" alt=\"add email field in functional prototype 1\" class=\"wp-image-50391\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/add-email-field-in-functional-prototype-1-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/add-email-field-in-functional-prototype-1.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Next, we will confirm the new interaction:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Under Action, select <strong>Set state<\/strong><\/li>\n\n\n\n<li>Change the <strong>Element<\/strong> to \u2018Email input\u2019<\/li>\n\n\n\n<li><strong>Set state<\/strong> to \u2018Empty\u2019<\/li>\n\n\n\n<li>Go to <strong>Add<\/strong>\u00a0<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image6-479x300.png\" alt=\"image6\" class=\"wp-image-50397\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image6-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image6.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Repeat this prototyping process for the password input field.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-set-up-an-email-format-validation\">4. Set up an Email Format Validation<\/h3>\n\n\n\n<p>Next, we will add a condition to ensure the email input follows a valid email format. Follow the steps above to create a new interaction on the email input field.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set the trigger to <strong>Focus Lost<\/strong><\/li>\n\n\n\n<li>Select <strong>Content of element <\/strong>as \u2018email input\u2019<\/li>\n\n\n\n<li>Set the condition to <strong>matches regex<\/strong><\/li>\n\n\n\n<li>Select <strong>Email<\/strong><\/li>\n\n\n\n<li>Click on <strong>Add condition<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image11-479x300.png\" alt=\"image11\" class=\"wp-image-50400\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image11-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image11.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Next, we will confirm the new interaction:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Under Action, select <strong>Set state<\/strong><\/li>\n\n\n\n<li>Change the <strong>Element<\/strong> to \u2018Email input\u2019<\/li>\n\n\n\n<li><strong>Set state<\/strong> to \u2018Incorrect\u2019<\/li>\n\n\n\n<li>Go to <strong>Add<\/strong>\u00a0<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image6-1-479x300.png\" alt=\"image6\" class=\"wp-image-50403\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image6-1-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image6-1.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-set-up-a-password-length-validation\">5. Set up a Password Length Validation<\/h3>\n\n\n\n<p>Add logic to verify the length of the password input meets the required criteria.<\/p>\n\n\n\n<p>Follow the steps above to create a new interaction on the password input field.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set the Trigger to <strong>Focus Lost<\/strong><\/li>\n\n\n\n<li>Select <strong>Content of element <\/strong>as \u2018password input\u2019<\/li>\n\n\n\n<li>Set the condition to <strong>doesn\u2019t<\/strong> <strong>match regex<\/strong><\/li>\n\n\n\n<li>Select <strong>Custom <\/strong>and enter criteria for the password input<\/li>\n\n\n\n<li>Click on <strong>Add condition<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image11-1-479x300.png\" alt=\"image11\" class=\"wp-image-50406\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image11-1-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image11-1.png 624w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Next, we will confirm the new interaction:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Under Action, select <strong>Set state<\/strong><\/li>\n\n\n\n<li>Change the <strong>Element<\/strong> to \u2018Password input\u2019<\/li>\n\n\n\n<li><strong>Set state<\/strong> to \u2018Incorrect\u2019<\/li>\n\n\n\n<li>Go to <strong>Add<\/strong>\u00a0<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image14-480x300.png\" alt=\"image14\" class=\"wp-image-50409\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image14-480x300.png 480w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image14-290x180.png 290w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/image14.png 624w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-test-the-prototype\">7. Test the Prototype<\/h3>\n\n\n\n<p>Interact with the prototype to experience the flow and test the validations. Ensure it provides an accurate representation of the final product&#8217;s behavior.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/6eW0lylrQlNSUQlQ4L14Xw6mUEuQE3nmxI8emF_KaP8SO4XXsC8V4JVLN8oxB4xWuGzeKttEJ8RTnlg8n2bx2a3rIkZ0D_-vPeMJZeqN0f4-8O-Be7E5EUC1njiJfSWG8ouAktYYwk9_5iCjnNmrd2Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>By following these steps, you&#8217;ll create a functional prototype of a sign-up form that showcases the validation of email and password inputs using UXPin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-functional-prototypes-with-uxpin-merge\">Design Functional Prototypes with UXPin Merge<\/h2>\n\n\n\n<p>Functional prototypes are a vital link between design and development, as demonstrated by our exploration of UXPin&#8217;s Merge technology. Merge seamlessly combines design and development by integrating dynamic React components.\u00a0<\/p>\n\n\n\n<p>This real-time collaboration lets designers test interactive models and streamlines the design-to-production process. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/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>A functional prototype is a working model of a product that demonstrates its core functionalities. Through UXPin&#8217;s Merge technology, designers can seamlessly convey their designs to developers.\u00a0 Key Takeaways: Merge technology integrates React components into a design editor, allowing designers to create prototypes. These interactive React components are utilized by developers in the final product.<\/p>\n","protected":false},"author":3,"featured_media":50356,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,8],"tags":[],"class_list":["post-50355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-prototyping"],"yoast_title":"","yoast_metadesc":"Learn what functional prototype is and when to build it. Discover where functional prototyping fits within a product design process.","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>Functional Prototype \u2013 A Short Guide for Digital Product Designers | UXPin<\/title>\n<meta name=\"description\" content=\"Learn what functional prototype is and when to build it. Discover where functional prototyping fits within a product design process.\" \/>\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\/functional-prototype\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Functional Prototype \u2013 A Short Guide for Digital Product Designers\" \/>\n<meta property=\"og:description\" content=\"Learn what functional prototype is and when to build it. Discover where functional prototyping fits within a product design process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-03T12:34:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-04T08:56:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min.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=\"10 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\\\/functional-prototype\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Functional Prototype \u2013 A Short Guide for Digital Product Designers\",\"datePublished\":\"2023-10-03T12:34:32+00:00\",\"dateModified\":\"2023-10-04T08:56:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/\"},\"wordCount\":1307,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Functional-Prototype-1-min.png\",\"articleSection\":[\"Blog\",\"Prototyping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/\",\"name\":\"Functional Prototype \u2013 A Short Guide for Digital Product Designers | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Functional-Prototype-1-min.png\",\"datePublished\":\"2023-10-03T12:34:32+00:00\",\"dateModified\":\"2023-10-04T08:56:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn what functional prototype is and when to build it. Discover where functional prototyping fits within a product design process.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Functional-Prototype-1-min.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Functional-Prototype-1-min.png\",\"width\":1200,\"height\":600,\"caption\":\"Functional Prototype 1 min\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/functional-prototype\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Functional Prototype \u2013 A Short Guide for Digital Product Designers\"}]},{\"@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":"Functional Prototype \u2013 A Short Guide for Digital Product Designers | UXPin","description":"Learn what functional prototype is and when to build it. Discover where functional prototyping fits within a product design process.","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\/functional-prototype\/","og_locale":"en_US","og_type":"article","og_title":"Functional Prototype \u2013 A Short Guide for Digital Product Designers","og_description":"Learn what functional prototype is and when to build it. Discover where functional prototyping fits within a product design process.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/","og_site_name":"Studio by UXPin","article_published_time":"2023-10-03T12:34:32+00:00","article_modified_time":"2023-10-04T08:56:50+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Functional Prototype \u2013 A Short Guide for Digital Product Designers","datePublished":"2023-10-03T12:34:32+00:00","dateModified":"2023-10-04T08:56:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/"},"wordCount":1307,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min.png","articleSection":["Blog","Prototyping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/","name":"Functional Prototype \u2013 A Short Guide for Digital Product Designers | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min.png","datePublished":"2023-10-03T12:34:32+00:00","dateModified":"2023-10-04T08:56:50+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn what functional prototype is and when to build it. Discover where functional prototyping fits within a product design process.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Functional-Prototype-1-min.png","width":1200,"height":600,"caption":"Functional Prototype 1 min"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Functional Prototype \u2013 A Short Guide for Digital Product Designers"}]},{"@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\/50355","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=50355"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/50355\/revisions"}],"predecessor-version":[{"id":50413,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/50355\/revisions\/50413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/50356"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=50355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=50355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=50355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}