{"id":35208,"date":"2022-06-13T09:52:00","date_gmt":"2022-06-13T16:52:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=35208"},"modified":"2022-10-19T11:49:37","modified_gmt":"2022-10-19T18:49:37","slug":"live-data-prototype","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/","title":{"rendered":"What is Live-Data Prototype and How to Create One?"},"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\/05\/live-data-prototype-1024x512.png\" alt=\"live data prototype\" class=\"wp-image-35215\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype.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>One of the challenges with prototyping using a design tool is the lack of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">fidelity<\/a> and functionality, preventing designers from completing comprehensive and accurate <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-testing-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">user testing<\/a>.<\/p>\n\n\n\n<p>Live-data prototypes seek to solve this prototyping issue by replicating the dynamic experience of code with data from user inputs. Designers must work with a front-end developer or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-engineer\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX engineer<\/a> to build a code-based prototype capable of performing live-data functionality.<\/p>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-what-is-a-live-data-prototype\" data-level=\"2\">What is a Live-Data Prototype?<\/a><\/li><li><a href=\"#h-how-do-you-build-a-live-data-prototype\" data-level=\"2\">How do you Build a Live Data Prototype?<\/a><\/li><li><a href=\"#h-live-data-vs-real-data\" data-level=\"2\">Live Data vs. Real Data<\/a><\/li><li><a href=\"#h-live-data-prototype-example\" data-level=\"2\">Live-Data Prototype Example<\/a><\/li><li><a href=\"#h-when-should-you-use-live-data-prototyping\" data-level=\"2\">When Should You Use Live-Data Prototyping?<\/a><ul><li><a href=\"#h-1-user-triggered-features\" data-level=\"3\">1. User Triggered Features<\/a><\/li><li><a href=\"#h-2-mvp-testing\" data-level=\"3\">2. MVP Testing<\/a><\/li><li><a href=\"#h-3-a-b-testing\" data-level=\"3\">3. A\/B Testing<\/a><\/li><\/ul><\/li><li><a href=\"#h-the-pros-cons-of-live-data-prototyping-with-image-based-tools\" data-level=\"2\">The Pros &amp; Cons of Live-Data Prototyping with Image-Based Tools<\/a><ul><li><a href=\"#h-pro-1-meaningful-stakeholder-feedback\" data-level=\"3\">Pro #1 \u2013 Meaningful Stakeholder Feedback<\/a><\/li><li><a href=\"#h-pro-2-improved-usability-testing\" data-level=\"3\">Pro #2 \u2013 Improved Usability Testing<\/a><\/li><li><a href=\"#h-pro-3-fewer-errors\" data-level=\"3\">Pro #3 \u2013 Fewer Errors<\/a><\/li><li><a href=\"#h-con-1-slow-prototyping\" data-level=\"3\">Con #1 \u2013 Slow Prototyping<\/a><\/li><li><a href=\"#h-con-2-getting-buy-in\" data-level=\"3\">Con #2 \u2013 Getting Buy-In<\/a><\/li><li><a href=\"#h-con-3-limited-scope\" data-level=\"3\">Con #3 \u2013 Limited Scope<\/a><\/li><\/ul><\/li><li><a href=\"#h-live-data-prototyping-without-engineers-using-uxpin\" data-level=\"2\">Live-Data Prototyping Without Engineers Using UXPin<\/a><ul><li><a href=\"#h-functioning-user-inputs\" data-level=\"3\">Functioning User Inputs<\/a><\/li><li><a href=\"#h-using-apis-with-uxpin\" data-level=\"3\">Using APIs with UXPin<\/a><\/li><li><a href=\"#h-importing-real-data\" data-level=\"3\">Importing Real Data<\/a><\/li><\/ul><\/li><li><a href=\"#h-fully-functioning-prototypes-with-uxpin-merge\" data-level=\"2\">Fully Functioning Prototypes with UXPin Merge<\/a><\/li><\/ul><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-live-data-prototype\">What is a Live-Data Prototype?<\/h2>\n\n\n\n<p>A live-data prototype uses information from user inputs, databases, and APIs to create dynamic, customized experiences\u2013like the final product. For example, capturing a user&#8217;s name from a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-signup-page-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">signup form <\/a>to create a custom welcome message.<\/p>\n\n\n\n<p>Live-data prototypes usually test a single task or sequence triggered by a user, like an API, a one-time-pin email\/text, or other complex user interactions. The prototype might be one or two screens or even a single component.<\/p>\n\n\n\n<p>Due to it being a resource-intense process, designers reserve these live-data prototypes for features that could involve <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-run-an-insightful-usability-test\/\" target=\"_blank\" rel=\"noreferrer noopener\">usability issues<\/a> or cause product failure\u2013thus justifying the time and resources to build it.<\/p>\n\n\n\n<p>Unfortunately, designers can&#8217;t build live-data prototypes using image-based tools. They usually have to rely on engineers to develop something in code when using those vector design tools, which is a rather time-consuming and expensive exercise.<\/p>\n\n\n\n<p>Nevertheless, there&#8217;s an alternative. An advanced prototyping tool, such as UXPin and its revolutionary <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a> that empowers teams to use the same UI elements in design and code, thus using the same source of truth. We will see how it works in just a moment.<\/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-how-do-you-build-a-live-data-prototype\">How do you Build a Live Data Prototype?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/design-prototyping-collaboration-interaction.png\" alt=\"design prototyping collaboration interaction\" class=\"wp-image-35209\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/design-prototyping-collaboration-interaction.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/design-prototyping-collaboration-interaction-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Product design teams have a few options when building a live-data prototype:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Code:<\/strong> HTML, CSS, and Javascript provide the same functionality and fidelity as the final product giving accurate and actionable feedback, but designers need engineers to build them.<\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/low-code-no-code-tools\/\"><strong>Low-code builders<\/strong><\/a><strong>:<\/strong> Gives designers control to build prototypes without engineers but within the platform&#8217;s constraints, limiting what designers can test.<\/li><li><strong>Design tools:<\/strong> <a href=\"https:\/\/www.uxpin.com\/\">Code-based design tools like UXPin<\/a> provide designers with complete control to build, prototype, and test with live data, APIs, code components, etc.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-live-data-vs-real-data\">Live Data vs. Real Data<\/h2>\n\n\n\n<p>It&#8217;s important to distinguish the difference between <strong>live data<\/strong> and <strong>real data<\/strong> prototypes.<\/p>\n\n\n\n<p>Live data prototypes provide live, dynamic data. The information changes dynamically in sync with the source. Let&#8217;s look at a basic signup form with a name and email address as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Name: Joe King<\/li><li>Email: joeking@uxpin.com<\/li><\/ul>\n\n\n\n<p>A live-data prototype allows Joe to enter her name and email. Joe can change her mind and use a different email or even make a spelling error. A live-data prototype will capture the data Joe enters as is.<\/p>\n\n\n\n<p>Real-data prototypes are static. Designers must pre-populate a real-data prototype using Joe&#8217;s information because the form fields don&#8217;t function and can&#8217;t capture data. While the prototype uses Joe&#8217;s <strong><em>real<\/em><\/strong> name and email, the information is static and can&#8217;t change or respond to interactions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-live-data-prototype-example\">Live-Data Prototype Example<\/h2>\n\n\n\n<p>Designers can build live-data prototypes using UXPin&#8217;s code-based design tool. A great example is UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/examples\/sign-up-form\" target=\"_blank\" rel=\"noreferrer noopener\">free signup form template<\/a> which uses <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\" target=\"_blank\" rel=\"noreferrer noopener\">States<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Interactions<\/a> to simulate email and password validation and personalized email confirmation.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/Br_8YZCMoD5L5Y5DtDMNktEWMroco2gwu3oGi_KBJupbbNvE0uEmyZmVoQBjoSkYMqky9UmrdVlMR_fM4QqdDpj34meu-L0HeCfyuDDgDI9ycXE8lrYtd2_PO7poYqj3fjWNZCEy0PtAKOuGwg\" alt=\"\" width=\"300\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/X0bwBDd8tHyyOb5WA-jnSFrx8iXTatUGhYj12JghodpzLCnaf1OQlnR6488Htljzo11OS6pPHVW-6RS3hpnWDuF0vPF__nhJ7tJdszS2erBocF-bMU2Jng21iv_wNd3z3XyWRBm_OQ78OfTbUA\" alt=\"\" width=\"300\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/preview.uxpin.com\/8a287d07f41425bcb58de82c3b4154aa92b5091d#\/pages\/\/simulate\/no-panels?mode=ccvid\" target=\"_blank\" rel=\"noreferrer noopener\">The prototype<\/a> reacts to user inputs with error messages for the email and password fields. The password must be longer than eight characters, and the email must be formatted correctly. If the user clicks the &#8220;SIGN UP&#8221; button without entering anything, an error message says, &#8220;Can&#8217;t be blank&#8221; below the relevant input.<\/p>\n\n\n\n<p>You can follow <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/sign-up-form\/\" target=\"_blank\" rel=\"noreferrer noopener\">these instructions<\/a> to edit UXPin&#8217;s free signup form template.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-when-should-you-use-live-data-prototyping\">When Should You Use Live-Data Prototyping?<\/h2>\n\n\n\n<p>This list is by no means exhaustive, but these are the most common use cases for live-data prototypes.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-user-triggered-features\">1. User Triggered Features<\/h3>\n\n\n\n<p>Live data prototyping is beneficial for testing notifications or APIs that rely on user data or interactions. For example, if you&#8217;re designing a two-step authentication using text or Google Authenticator, testing this feature with a live-data prototype is crucial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-mvp-testing\">2. MVP Testing<\/h3>\n\n\n\n<p>Live-data prototypes are excellent for startups wanting to test an MVP (minimum viable product). The team can use this MVP to test an idea&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-review-template-balancing-desirability-viability-feasibility\/\">desirability, viability, and feasibility<\/a>\u2013testing and iterating before they commit to the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/digital-product-development-guide\/\">product development process<\/a>.&nbsp;<\/p>\n\n\n\n<p>These live-data prototypes are comprehensive enough to get accurate results for a proof of concept but lean enough that it doesn&#8217;t take long to build and make changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-a-b-testing\">3. A\/B Testing<\/h3>\n\n\n\n<p>Marty Cagan describes how SVPG (Silicon Valley Product Group) uses live-data prototypes for <a href=\"https:\/\/svpg.com\/product-discovery-with-live-data-prototypes\/\">A\/B testing during product discovery<\/a>. The product team can build two lightweight options of the same screen or flow to test the best option before committing to development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-pros-cons-of-live-data-prototyping-with-image-based-tools\">The Pros &amp; Cons of Live-Data Prototyping with Image-Based Tools<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png\" alt=\"testing user behavior prototype interaction\" class=\"wp-image-35213\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Prototyping with live-data has its pros and cons. It can garner you a more meaningful feedback from decision-makers, get you more accurate tests results and help you make fewer errors. The downsides of live-data prototyping are slower work, limited scope, and a need to get buy-in for that approach.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-pro-1-meaningful-stakeholder-feedback\">Pro #1 \u2013 Meaningful Stakeholder Feedback<\/h3>\n\n\n\n<p>One of the challenges with image-based prototypes is that designers aren&#8217;t able to create a realistic product experience for stakeholders\u2013making it difficult to get buy-in.<\/p>\n\n\n\n<p>With image-based prototypes, stakeholders and usability participants have to &#8220;imagine&#8221; that they&#8217;ve entered their details or the app has performed a complex task.<\/p>\n\n\n\n<p>Live-data prototypes give stakeholders an accurate representation of the product. It responds to their inputs, creating a dynamic, personalized user experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-pro-2-improved-usability-testing\">Pro #2 \u2013 Improved Usability Testing<\/h3>\n\n\n\n<p>Every UX designer&#8217;s goal is to test and solve usability issues before the design handoff. Live-data prototypes significantly increase fidelity and functionality, giving design teams actionable feedback from user testing.<\/p>\n\n\n\n<p>For example, how do designers test whether form errors help solve a user&#8217;s problem? The dynamic nature of a live-data prototype allows designers to test multiple scenarios, like spelling errors, password validation, email formatting, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-pro-3-fewer-errors\">Pro #3 \u2013 Fewer Errors<\/h3>\n\n\n\n<p>Live-data testing allows designers to solve more usability issues during the design process. Fewer errors mean less rework, saving companies labor costs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-con-1-slow-prototyping\">Con #1 \u2013 Slow Prototyping<\/h3>\n\n\n\n<p>Live-data prototyping relies on engineers to develop prototypes. Unlike drag-and-drop design tools, coding takes time. It also requires more team members to build the prototype, resulting in higher costs and a slower time-to-market.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-con-2-getting-buy-in\">Con #2 \u2013 Getting Buy-In<\/h3>\n\n\n\n<p>Unless you&#8217;re a designer with coding skills or a UX engineer, building a live-data prototype isn&#8217;t possible without a developer. This means you must get buy-in from the engineering team and stakeholders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-con-3-limited-scope\">Con #3 \u2013 Limited Scope<\/h3>\n\n\n\n<p>The time and resources needed to create a live-data prototype mean designers are limited by what they can build and test. For this reason, designers usually reserve these prototypes for big problems that require accurate results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-live-data-prototyping-without-engineers-using-uxpin\">Live-Data Prototyping Without Engineers Using UXPin<\/h2>\n\n\n\n<p>With a design tool like UXPin, designers can build advanced live-data prototypes without involving engineers so much, thus amending for some of the downsides of live-data prototyping we&#8217;ve mentioned above.<\/p>\n\n\n\n<p>UXPin prototypes don&#8217;t only benefit designers during testing; they also <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">streamline the design handoff process<\/a> because engineers can see exactly how everything is supposed to function with minimal documentation and explanation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-functioning-user-inputs\">Functioning User Inputs<\/h3>\n\n\n\n<p>Most prototyping tools don&#8217;t have functioning form inputs\u2013making it impossible to test features that rely on user data. UXPin&#8217;s code-based prototypes feature functional inputs that designers can program to imitate code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/text-typing-input-1.png\" alt=\"text typing input 1\" class=\"wp-image-32520\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/text-typing-input-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/text-typing-input-1-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/sign-up-form\/\" target=\"_blank\" rel=\"noreferrer noopener\">Signup Form example<\/a> demonstrates how designers can test common errors and validation that typically require code prototypes.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-apis-with-uxpin\">Using APIs with UXPin<\/h3>\n\n\n\n<p>Designers can use <a href=\"https:\/\/ifttt.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">IFTTT<\/a> to connect UXPin prototypes to other products and services via <a href=\"https:\/\/zapier.com\/blog\/what-are-webhooks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">webhooks<\/a>. For example, <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/google-calendar-events\/\" target=\"_blank\" rel=\"noreferrer noopener\">sending a Google Calendar invitation<\/a> for a meeting booking app.<\/p>\n\n\n\n<p>IFTTT has over 700 services you can connect to your UXPin app, including email, SMS, project management, internet of things products, chat, social media, and more.<\/p>\n\n\n\n<p>By integrating external services through IFTTT, designers can connect live-data prototypes in a few clicks without the help of engineers. UXPin provides actions for GET or POST HTTP requests so designers can send or receive API data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-importing-real-data\">Importing Real Data<\/h3>\n\n\n\n<p>Designers can also import real data into UXPin prototypes using JSON, Google Sheets, or CSV. UXPin also allows designers to populate fields using dummy data using the <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/data-and-content\/#match-content-by-layer-name\" target=\"_blank\" rel=\"noreferrer noopener\">Match Content by Layer Name<\/a> feature or Unsplash for images.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/loading.png\" alt=\"loading\" class=\"wp-image-32518\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/loading.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/loading-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>These content and data features allow designers to populate any field no matter the source\u2013live data, real data, or dummy data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fully-functioning-prototypes-with-uxpin-merge\">Fully Functioning Prototypes with UXPin Merge<\/h2>\n\n\n\n<p>Designers can take live-data prototypes to the next level with <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>. Sync a design system or component library to UXPin so designers can build fully functioning prototypes using code components.<\/p>\n\n\n\n<p>With Merge, designers can build high-fidelity prototypes with the same functionality as engineers using code. Instead of writing code, designers simply drag-and-drop components to build live-data prototypes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-merge-react-sync-library-git.png\" alt=\"uxpin merge react sync library git\" class=\"wp-image-35211\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-merge-react-sync-library-git.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-merge-react-sync-library-git-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Here are some examples of live-data prototypes designers can build using <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Fully functioning date pickers<\/li><li>Graphs and charts that change according to user inputs<\/li><li>Data grids that users can filter, sort, and edit<\/li><li>Functioning pagination and search fields<\/li><li>Various forms, including signups, email subscriptions, etc.<\/li><li>eCommerce and ordering flows<\/li><\/ul>\n\n\n\n<p>Live-data prototyping in Merge means designers don&#8217;t have to rely on engineers to build prototypes. They also don&#8217;t have to get buy-in from stakeholders every time to justify the additional resources.<\/p>\n\n\n\n<p>Merge also makes code-based prototyping more accessible to the rest of the organization. PayPal&#8217;s product team, who had little experience with design tools, can <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">build prototypes 8X faster with Merge<\/a> than experienced UX designers using traditional design tools.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"PayPal + UXPin Testimonial\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/vzrv9bmig4M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>With UXPin Merge, every prototype can be an immersive live-data prototype. And, designers can build these fully functioning prototypes faster than traditional image-based design tools.<\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\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>One of the challenges with prototyping using a design tool is the lack of fidelity and functionality, preventing designers from completing comprehensive and accurate user testing. Live-data prototypes seek to solve this prototyping issue by replicating the dynamic experience of code with data from user inputs. Designers must work with a front-end developer or UX<\/p>\n","protected":false},"author":3,"featured_media":35215,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,172,8,15,4,6],"tags":[],"class_list":["post-35208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-product-design","category-prototyping","category-responsive-web-design","category-ui-design","category-ux-design"],"yoast_title":"","yoast_metadesc":"Build a code-based prototype capable of performing live-data functionality. Learn all about live-data prototyping.","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>What is Live-Data Prototype and How to Create One? | UXPin<\/title>\n<meta name=\"description\" content=\"Build a code-based prototype capable of performing live-data functionality. Learn all about live-data prototyping.\" \/>\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\/live-data-prototype\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Live-Data Prototype and How to Create One?\" \/>\n<meta property=\"og:description\" content=\"Build a code-based prototype capable of performing live-data functionality. Learn all about live-data prototyping.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-13T16:52:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-19T18:49:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype.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=\"9 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\\\/live-data-prototype\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"What is Live-Data Prototype and How to Create One?\",\"datePublished\":\"2022-06-13T16:52:00+00:00\",\"dateModified\":\"2022-10-19T18:49:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/\"},\"wordCount\":1732,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/live-data-prototype.png\",\"articleSection\":[\"Blog\",\"Product Design\",\"Prototyping\",\"Responsive Web Design\",\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/\",\"name\":\"What is Live-Data Prototype and How to Create One? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/live-data-prototype.png\",\"datePublished\":\"2022-06-13T16:52:00+00:00\",\"dateModified\":\"2022-10-19T18:49:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Build a code-based prototype capable of performing live-data functionality. Learn all about live-data prototyping.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/live-data-prototype.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/live-data-prototype.png\",\"width\":1200,\"height\":600,\"caption\":\"live data prototype\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/live-data-prototype\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is Live-Data Prototype and How to Create One?\"}]},{\"@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":"What is Live-Data Prototype and How to Create One? | UXPin","description":"Build a code-based prototype capable of performing live-data functionality. Learn all about live-data prototyping.","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\/live-data-prototype\/","og_locale":"en_US","og_type":"article","og_title":"What is Live-Data Prototype and How to Create One?","og_description":"Build a code-based prototype capable of performing live-data functionality. Learn all about live-data prototyping.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/","og_site_name":"Studio by UXPin","article_published_time":"2022-06-13T16:52:00+00:00","article_modified_time":"2022-10-19T18:49:37+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"What is Live-Data Prototype and How to Create One?","datePublished":"2022-06-13T16:52:00+00:00","dateModified":"2022-10-19T18:49:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/"},"wordCount":1732,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype.png","articleSection":["Blog","Product Design","Prototyping","Responsive Web Design","UI Design","UX Design"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/","name":"What is Live-Data Prototype and How to Create One? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype.png","datePublished":"2022-06-13T16:52:00+00:00","dateModified":"2022-10-19T18:49:37+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Build a code-based prototype capable of performing live-data functionality. Learn all about live-data prototyping.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/live-data-prototype.png","width":1200,"height":600,"caption":"live data prototype"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"What is Live-Data Prototype and How to Create One?"}]},{"@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\/35208","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=35208"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35208\/revisions"}],"predecessor-version":[{"id":37194,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35208\/revisions\/37194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/35215"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=35208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=35208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=35208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}