CINXE.COM
UXPin | UX/UI and Prototyping Tool for Designers & Developers
<!DOCTYPE html> <html lang='en'> <head> <meta content='UXPin | UI Design and Prototyping Tool' property='og:title'> <meta content='https://cdn.buttercms.com/hEANM0hTqezomJsApfaQ' property='og:image'> <meta content='https://cdn.buttercms.com/hEANM0hTqezomJsApfaQ' name='twitter:image'> <meta content='Design tool like no other. Prototypes that feel real, with powers of code components, logic, states, and design systems. Join for free!' property='og:description'> <meta content='https://www.uxpin.com/' property='og:url'> <meta content='https://www.uxpin.com/' name='twitter:url'> <meta content='UXPin | UI Design and Prototyping Tool' name='twitter:title'> <meta content='Design tool like no other. Prototypes that feel real, with powers of code components, logic, states, and design systems. Join for free!' name='twitter:description'> <meta content='Design tool like no other. Prototypes that feel real, with powers of code components, logic, states, and design systems. Join for free!' name='description'> <meta content='YODKTxPhq56S2D7hE35FPS5vIHMuj33bDE0Z811ZL4Y' name='google-site-verification'> <title>UXPin | UX/UI and Prototyping Tool for Designers & Developers</title> <meta charset='UTF-8'> <meta content='image/jpg' property='og:image:type'> <meta content='600' property='og:image:width'> <meta content='317' property='og:image:height'> <meta content='website' property='og:type'> <meta content='summary_large_image' name='twitter:card'> <meta content='600' name='twitter:image:width'> <meta content='215' name='twitter:image:height'> <meta content='@uxpin' name='twitter:site'> <meta content='@uxpin' name='twitter:creator'> <meta content='width=device-width,initial-scale=1.0' name='viewport'> <link href='/images/favicon.ico' rel='icon' type='image/x-icon'> <link href='/images/favicon.ico' rel='shortcut icon' type='image/x-icon'> <link href='https://www.uxpin.com/' rel='canonical'> <script defer='defer' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script> <script> dataLayer = window.dataLayer || []; dataLayer.push({ 'userLoggedInFront': false, }) </script> <!-- Global site tag (gtag.js) - AdWords: 806836440 --> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-806836440"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-806836440'); </script> <script> function getPageLanguage() { // match rewview / staging / prod urls that contains /kr /jp or /kr/ /jp/ const matches = window.location.href.match(/\/(jp|kr)\/?|\/(jp|kr)\b/); switch (matches?.[1]) { case 'kr': return 'ko-KR'; case 'jp': return 'ja-JP'; default: return 'en-US'; } } </script> <!-- Google Tag Manager --> <noscript> <iframe height='0' src='//www.googletagmanager.com/ns.html?id=GTM-W8S4SF' style='display:none;visibility:hidden' width='0'></iframe> </noscript> <script> window.addEventListener('load', () => { setTimeout(function() { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.defer=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-W8S4SF'); }, 3500); }); </script> <!-- End Google Tag Manager --> <script> function gtmTrack(eventPayload) { const dataLayer = window.dataLayer || []; dataLayer.push({ ...eventPayload, page_title: document.title, page_url: window.location.href, page_language: getPageLanguage(), user_id: null, }) } </script> <script type="text/javascript"> // set dataLayer var userData = {'userId': ''}; dataLayer = window.dataLayer || []; dataLayer.push(userData); </script> <script> window.intercomSettings = { app_id: 'zho5cr3o', custom_launcher_selector:'.launch-chat-btn' }; const loadIntercom = function () { window.removeEventListener('scroll', loadIntercom); const browserWindow = window; const intercom = browserWindow.Intercom; if (typeof intercom === "function") { intercom('reattach_activator'); intercom('update', browserWindow.intercomSettings); } else { const documentObject = document; const args = function (args) { args.getArgs(arguments); }; args.argsArray = []; args.pushToArgsArray = function (arguments) { args.argsArray.push(arguments); }; browserWindow.Intercom = args; const createIntercomElement = function () { const createScriptElement = documentObject.createElement('script'); createScriptElement.type = 'text/javascript'; createScriptElement.async = true; createScriptElement.src = 'https://widget.intercom.io/widget/' + 'zho5cr3o'; const getScriptElement = documentObject.getElementsByTagName('script')[0]; getScriptElement.parentNode.insertBefore(createScriptElement, getScriptElement); }; createIntercomElement(); } }; if (false) { loadIntercom(); } window.addEventListener('scroll', loadIntercom) </script> <script> window._vwo_code = window._vwo_code || (function(){ var account_id=507284, settings_tolerance=2000, library_tolerance=2500, use_existing_jquery=true, is_spa=1, hide_element='body', /* DO NOT EDIT BELOW THIS LINE */ f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery;},library_tolerance:function(){return library_tolerance;},finish:function(){if(!f){f=true;var a=d.getElementById('_vis_opt_path_hides');if(a)a.parentNode.removeChild(a);}},finished:function(){return f;},load:function(a){var b=d.createElement('script');b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){_vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b);},init:function(){ window.settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);var a=d.createElement('style'),b=hide_element?hide_element+'{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}':'',h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides');a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b;else a.appendChild(d.createTextNode(b));h.appendChild(a);this.load('https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&f='+(+is_spa)+'&r='+Math.random());return settings_timer; }};window._vwo_settings_timer = code.init(); return code; }()); </script> <script> window.addEventListener('load', () => { setTimeout(() => { const isProduction = window.location.host === 'www.uxpin.com'; if (isProduction) { (function (c, l, a, r, i, t, y) { c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) }; t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i; y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y); })(window, document, "clarity", "script", "e2d8hdo2dl"); } }, 3500) }) </script> <script> (function() { let termlyTimeout; let isLoaded = false; function loadTermlyScript() { if (isLoaded) { return true; } const script = document.createElement('script'); script.src = 'https://app.termly.io/resource-blocker/54d5009f-bc18-4d18-b786-5d3162ff0c38?autoBlock=on'; script.defer = true; document.body.appendChild(script); isLoaded = true; } const onScroll = () => { loadTermlyScript(); clearTimeout(termlyTimeout); window.removeEventListener('scroll', onScroll); } const onMouseMove = () => { loadTermlyScript(); clearTimeout(termlyTimeout); document.removeEventListener('mousemove', onMouseMove); } const onTouchStart = () => { loadTermlyScript(); clearTimeout(termlyTimeout); document.removeEventListener('touchstart', onTouchStart); } window.addEventListener('load', function() { window.addEventListener('scroll', onScroll); document.addEventListener('mousemove', onMouseMove); document.addEventListener('touchstart', onTouchStart); termlyTimeout = setTimeout(loadTermlyScript, 3000); }); })(); </script> <link rel="stylesheet" media="screen" href="https://app.uxpin.com/packs/css/page-with-sections-6a938773.css" /> <link as='style' href='https://use.typekit.net/qah4vah.css' rel='preload'> <link href='https://use.typekit.net/qah4vah.css' rel='stylesheet'> <link as='style' href='https://fonts.googleapis.com/css?family=Overpass+Mono:500,700&display=swap' rel='preload'> <link href='https://fonts.googleapis.com/css?family=Overpass+Mono:500,700&display=swap' rel='stylesheet'> <link href='https://www.uxpin.com/jp' hreflang='ja' rel='alternate'> <link href='https://www.uxpin.com/kr' hreflang='ko' rel='alternate'> <link href='https://www.uxpin.com/' hreflang='en' rel='alternate'> <link href='https://www.uxpin.com/' hreflang='x-default' rel='alternate'> <style> #navbar{--navbar-height: 60px;--logo-size: 40px;--gutter: 16px;--container-padding: 20px;--menu-item-spacing: 36px;--uxpin-black: #121212;--text-color-base: var(--uxpin-black);--text-color-emphasis: var(--uxpin-black);--text-color-muted: #666666;--text-color-active-link: var(--text-color-muted);--font-size-l: 16px;--font-size-m: 14px;--font-size-s: 13px;--font-size-xs: 12px;position:sticky;top:0;padding:var(--gutter);z-index:1000;width:100%;background-color:white;font-family:soleil, Arial, sans-serif;font-weight:400}html[lang="ja"] #navbar{--menu-item-spacing: 24px}#navbar #top-menu,#navbar input[type="checkbox"],#navbar .right-column,#navbar .close-button{display:none}#navbar nav{display:flex;flex-direction:column}#navbar .uxpin-logo{background-color:black;width:var(--logo-size);height:var(--logo-size)}#navbar .top-menu-item{display:flex;align-items:center;background-color:white;color:var(--text-color-base);font-size:var(--font-size-m);font-family:inherit;font-weight:400;text-decoration:none;word-wrap:nowrap;white-space:nowrap}#navbar .overlay{background-color:white}#navbar .section-heading{display:flex;align-items:center;margin-bottom:4px;color:var(--text-color-emphasis)}#navbar .section-heading>:is(a, span){font-size:var(--font-size-s);font-weight:bold;text-transform:uppercase;letter-spacing:1px}#navbar section a:hover{text-decoration:underline}#navbar section .active>a{color:var(--text-color-active-link);cursor:default}#navbar section .active>a:hover{text-decoration:none}#navbar .section-icon{width:14px;height:14px;margin-right:6px}#navbar .sub-menu-arrow{transform:rotate(-90deg)}#navbar :is(.section-heading, .section-item)>*{color:var(--text-color-emphasis);text-decoration:none;line-height:32px}#navbar .section-item>*{font-size:var(--font-size-m)}#navbar .sign-up{height:36px;padding:0 12px;background-color:#fcc820;color:black;font-size:var(--font-size-m);font-family:inherit;font-weight:bold;border:2px solid var(--uxpin-black);border-radius:4px;word-wrap:nowrap;white-space:nowrap}#navbar .sign-up:hover{background-color:#f3f3f3}#navbar .book-demo{padding:0 12px;font-weight:bold;word-wrap:nowrap;white-space:nowrap;height:36px;border:2px solid #121212;border-radius:4px;background-color:#f3f3f3;background-size:cover;font-size:14px;font-family:inherit;color:#121212;text-decoration:none solid #121212;line-height:16px;text-align:center}#navbar .book-demo:hover{background-color:#f3f3f3}#navbar .badge-coming-soon{padding:0px 5px;background-color:#ccccff;color:var(--text-color-emphasis);font-size:var(--font-size-xs);font-weight:500;text-transform:uppercase;border-radius:2px}@media screen and (max-width: 1199px){#navbar{--logo-size: 30px}#navbar #top-menu-state:checked~nav :is(#top-menu, .close-button){display:block}#navbar #top-menu-state:checked~nav .open-button{display:none}#navbar #top-menu-state:checked~nav~.right-column{display:flex;flex-direction:column;gap:18px}#navbar .overlay{display:none;padding-left:var(--gutter)}#navbar .menu-state:checked~.overlay{display:block}#navbar .menu-state:checked~label{color:var(--text-color-emphasis)}#navbar #top-menu{margin-top:32px}#navbar #top-menu>li{margin-bottom:18px}#navbar #top-menu>li.phone-number{margin:36px 0}#navbar #menu-button{position:absolute;right:var(--gutter);width:var(--logo-size);height:var(--logo-size);display:grid;place-content:center}#navbar .sub-menu-wrapper{margin-top:16px;display:flex;flex-direction:column;gap:8px}#navbar .download-ebook{display:none}#navbar .top-menu-item{font-size:var(--font-size-l)}}@media screen and (min-width: 1200px){#navbar{padding:0}#navbar .navbar-container{margin:0 auto;max-width:1180px;padding:0 var(--container-padding)}#navbar .navbar-wrapper{display:flex;align-items:center;justify-content:space-between;padding:0 6px}#navbar nav{flex-direction:row;align-items:center}#navbar #menu-button{display:none}#navbar #top-menu-state~nav>ul{display:flex;align-items:center}#navbar #top-menu:hover .top-menu-item{color:var(--text-color-muted)}#navbar #top-menu>li{display:flex;align-items:center;height:var(--navbar-height);margin-bottom:0;padding-right:var(--menu-item-spacing)}#navbar #top-menu>li .overlay{display:none;position:absolute;top:var(--navbar-height);left:0;right:0;background-color:white;padding:25px 0;border-top:1px solid #c5c5c5;border-bottom:2px solid var(--uxpin-black)}#navbar #top-menu>li:hover .overlay{display:block}#navbar .uxpin-link{margin-right:var(--menu-item-spacing)}#navbar .sub-menu-wrapper{display:flex;gap:50px;padding-left:calc( var(--container-padding) + var(--logo-size) + var(--menu-item-spacing))}#navbar .top-menu-item:hover,#navbar #top-menu>li:hover .top-menu-item{color:var(--text-color-emphasis)}#navbar .right-column{display:flex;align-items:center;column-gap:13px;margin-bottom:0;list-style:none}#navbar .section-heading{height:32px}#navbar .download-ebook{display:grid;padding-left:72px;border-left:2px solid black;gap:35px;grid-template-columns:auto 1fr}#navbar .download-ebook-image{border-radius:4px}#navbar .download-ebook-content{display:flex;flex-direction:column;justify-content:space-between}#navbar .download-ebook-text{width:340px;margin:0;font-size:var(--font-size-xs);color:var(--text-color-muted);line-height:19px}} </style></head> <body> <div id='navbar'> <svg height='0' style='display: none' viewBox='0 0 24 24' width='0'> <symbol id='icon-arrow-down'> <path d='M17.2 9.84a.35.35 0 0 0-.1-.24l-.52-.52a.33.33 0 0 0-.47-.01l-.01.01-4.1 4.1-4.09-4.1a.33.33 0 0 0-.47-.02l-.01.01-.52.53a.33.33 0 0 0-.01.47l.01.01 4.85 4.85c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.06.1-.15.1-.24h.01z' fill='currentColor'></path> </symbol> </svg> <div class='navbar-wrapper navbar-container'> <input id='top-menu-state' type='checkbox'> <nav class='left-column'> <label for='top-menu-state' id='menu-button'> <img alt='Open menu' class='open-button' src='/images/navbar/burger.svg'> <img alt='Close menu' class='close-button' src='/images/navbar/close.svg'> </label> <a class='uxpin-link' href='/'> <img alt='UXPin logo' class='uxpin-logo' src='/images/uxpin-logo-new.svg'> </a> <ul id='top-menu'> <li class=''> <input class='menu-state' id='solutions' type='checkbox'> <label class='top-menu-item' for='solutions'> Solutions <svg class='top-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </label> <div class='overlay'> <div class='sub-menu-wrapper navbar-container'> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/design.svg'> <a href='/design'>Design</a> <svg class='sub-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </div> <ul> <li class='section-item'> <a href='/ui-design'>UI Design</a> </li> <li class='section-item'> <a href='/prototyping'>Prototyping</a> </li> <li class='section-item'> <a href='/handoff'>Handoff</a> </li> <li class='section-item'> <a href='/ux-design'>UX Design</a> </li> </ul> </section> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/design-system.svg'> <a href='/design-systems'>Design Systems</a> <svg class='sub-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </div> <ul> <li class='section-item'> <a href='/design-system-management'>Design System management</a> </li> <li class='section-item'> <a href='/design-tokens'>Design tokens</a> <span class='badge-coming-soon'>Soon</span> </li> </ul> </section> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/code-to-design.svg'> <a href='/code-to-design'>Code to Design</a> <svg class='sub-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </div> <ul> <li class='section-item'> <a href='/merge/developers'>Merge AI 🧩</a> </li> <li class='section-item'> <a href='/merge'>Merge overview 🔥</a> </li> <li class='section-item'> <a href='/advanced-prototyping'>Advanced prototyping</a> </li> <li class='section-item'> <a href='/merge/mui-library'>MUI library</a> </li> <li class='section-item'> <a href='/merge/fluent-ui-library'>Fluent UI library</a> </li> </ul> </section> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/integrations.svg'> <a href='/integrations'>Integrations</a> <svg class='sub-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </div> <ul> <li class='section-item'> <a href='/merge/git-integration'>Git integration</a> </li> <li class='section-item'> <a href='/merge/storybook-integration'>Storybook integration</a> </li> <li class='section-item'> <a href='/merge/npm-integration'>npm integration</a> </li> </ul> </section> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/usecases.svg'> <span>Use cases</span> </div> <ul> <li class='section-item'> <a href='/designers'>For Designers</a> </li> <li class='section-item'> <a href='/merge/developers'>For Developers</a> </li> <li class='section-item'> <a href='/design-ops'>For DesignOps</a> </li> <li class='section-item'> <a href='/user-testing'>For User Testing</a> </li> </ul> </section> </div> </div> </li> <li class=''> <a class='top-menu-item' href='/merge'> Merge 🔥 </a> </li> <li class=''> <a class='top-menu-item' href='/merge/developers'> UI Builder 🧩 </a> </li> <li class=''> <a class='top-menu-item' href='/examples'> Examples </a> </li> <li class=''> <input class='menu-state' id='enterprise' type='checkbox'> <label class='top-menu-item' for='enterprise'> Enterprise <svg class='top-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </label> <div class='overlay'> <div class='sub-menu-wrapper navbar-container'> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/overview.svg'> <a href='/enterprise'>Overview</a> <svg class='sub-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </div> </section> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/testimonials.svg'> <a href='/testimonials'>Testimonials</a> <svg class='sub-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </div> </section> </div> </div> </li> <li class=''> <a class='top-menu-item' href='/pricing'> Pricing </a> </li> <li class=''> <input class='menu-state' id='resources' type='checkbox'> <label class='top-menu-item' for='resources'> Resources <svg class='top-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </label> <div class='overlay'> <div class='sub-menu-wrapper navbar-container'> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/product.svg'> <span>Product</span> </div> <ul> <li class='section-item'> <a href='/docs'>Docs</a> </li> <li class='section-item'> <a href='https://www.youtube.com/watch?v=IrAzCoU39SQ&list=PLTQ1nMZTXSUUOSMKm_icOjaVosG17wbe4'>Video tutorials</a> </li> <li class='section-item'> <a href='https://community.uxpin.com/'>Community</a> </li> </ul> </section> <section> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/learn.svg'> <span>Learn</span> </div> <ul> <li class='section-item'> <a href='/studio/blog/'>Blog</a> </li> <li class='section-item'> <a href='/studio/ebooks/'>Ebooks</a> </li> <li class='section-item'> <a href='/studio/webinars/'>Webinars</a> </li> </ul> </section> <section> <div class='download-ebook'> <a class='section-heading--link' href='/studio/ebooks/designops-design-system-report/'> <img alt='UXPin design' class='download-ebook-image' loading='lazy' src='/images/navbar/download-report.svg'> </a> <div class='download-ebook-content'> <div class='section-heading'> <img alt='UXPin design' class='section-icon' loading='lazy' src='/images/navbar/download.svg'> <a class='section-heading--link' href='/studio/ebooks/designops-design-system-report/'>Download Our Latest Report</a> <svg class='sub-menu-arrow' height='24' viewBox='0 0 24 24' width='24'> <use xlink:href='#icon-arrow-down'></use> </svg> </div> <p class='download-ebook-text'>Download our free report on how leaders and design system contributors from enterprise companies like Caterpillar, PayPal, or Weir Group build and grow design systems. Learn key lessons on design system maturity and operations.</p> </div> </div> </section> </div> </div> </li> <li class='phone-number'> <a class='top-menu-item' href='tel:+18888029327'> 1 (888) 802-9327 </a> </li> </ul> </nav> <ul class='right-column'> <li> <a class='top-menu-item' href='https://app.uxpin.com' rel='noofollow'> Log in </a> </li> <li> <a href='https://calendly.com/uxpin-demo/merge-walkthrough?utm_source=demos-campaign&utm_medium=uxlink&utm_campaign=web_merge_for_devs_lp_demo' target='_blank'> <button class='book-demo'>Book a demo</button> </a> </li> <li> <a href='/sign-up' target='_blank'> <button class='sign-up'>Try for free</button> </a> </li> </ul> </div> <script> document.addEventListener("DOMContentLoaded", () => { const navbar = document.getElementById('navbar'); const inputs = Array.from(navbar.querySelectorAll(".menu-state")); function unselectAllOthers(id) { inputs .filter((input) => input.id !== id) .forEach((input) => { input.checked = false; }); } navbar.addEventListener('change', event => { const isTopMenuItemCheckbox = event.target.classList.contains('menu-state'); if (!isTopMenuItemCheckbox) return; // only target click on checkbox elements if (event.target.checked) unselectAllOthers(event.target.id); window.scroll({top: 0, left: 0, behavior: 'smooth'}); }) }); </script> </div> <script> function trackTrialButtonClicked(event) { const trackableFreeClickLabels = [ "Try for free", "Try UXPin for free", ]; if (trackableFreeClickLabels.includes(event.target.innerText)) { gtmTrack({ event: "trial_button_clicked" }); } } window.addEventListener("click", trackTrialButtonClicked); </script> <script> function trackPageViews() { gtmTrack({ event: "page_viewed" }) } window.addEventListener("load", trackPageViews); </script> <script> // code from https://github.com/paulirish/lite-youtube-embed/blob/master/src/lite-yt-embed.js // it is used to optimize youtube embedded videos class LiteYTEmbed extends HTMLElement { connectedCallback() { this.videoId = this.getAttribute('videoid'); let playBtnEl = this.querySelector('.lty-playbtn'); this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play'; this.dataset.title = this.getAttribute('title') || ''; if (!this.style.backgroundImage) { this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/maxresdefault.jpg")`; this.upgradePosterImage(); } // Set up play button, and its visually hidden label if (!playBtnEl) { playBtnEl = document.createElement('button'); playBtnEl.type = 'button'; playBtnEl.classList.add('lty-playbtn'); this.append(playBtnEl); } if (!playBtnEl.textContent) { const playBtnLabelEl = document.createElement('span'); playBtnLabelEl.className = 'lyt-visually-hidden'; playBtnLabelEl.textContent = this.playLabel; playBtnEl.append(playBtnLabelEl); } this.addNoscriptIframe(); playBtnEl.removeAttribute('href'); // On hover (or tap), warm up the TCP connections we're (likely) about to use. this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true}); this.addEventListener('click', this.activate); this.needsYTApi = this.hasAttribute('js-api') || navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi'); } static addPrefetch(kind, url, as) { const linkEl = document.createElement('link'); linkEl.rel = kind; linkEl.href = url; if (as) { linkEl.as = as; } document.head.append(linkEl); } static warmConnections() { if (LiteYTEmbed.preconnected) return; LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com'); LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com'); LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'); LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net'); LiteYTEmbed.preconnected = true; } fetchYTPlayerApi() { if (window.YT || (window.YT && window.YT.Player)) return; this.ytApiPromise = new Promise((res, rej) => { const el = document.createElement('script'); el.src = 'https://www.youtube.com/iframe_api'; el.async = true; el.onload = _ => { YT.ready(res); }; el.onerror = rej; this.append(el); }); } /** Return the YT Player API instance. (Public L-YT-E API) */ async getYTPlayer() { if (!this.playerPromise) { await this.activate(); } return this.playerPromise; } async addYTPlayerIframe() { this.fetchYTPlayerApi(); await this.ytApiPromise; const videoPlaceholderEl = document.createElement('div') this.append(videoPlaceholderEl); const paramsObj = Object.fromEntries(this.getParams().entries()); this.playerPromise = new Promise(resolve => { let player = new YT.Player(videoPlaceholderEl, { width: '100%', videoId: this.videoId, playerVars: paramsObj, events: { 'onReady': event => { event.target.playVideo(); resolve(player); } } }); }); } addNoscriptIframe() { const iframeEl = this.createBasicIframe(); const noscriptEl = document.createElement('noscript'); noscriptEl.innerHTML = iframeEl.outerHTML; this.append(noscriptEl); } getParams() { const params = new URLSearchParams(this.getAttribute('params') || []); params.append('autoplay', '1'); params.append('playsinline', '1'); return params; } async activate(){ if (this.classList.contains('lyt-activated')) return; this.classList.add('lyt-activated'); if (this.needsYTApi) { return this.addYTPlayerIframe(this.getParams()); } const iframeEl = this.createBasicIframe(); this.append(iframeEl); // Set focus for a11y iframeEl.focus(); } createBasicIframe(){ const iframeEl = document.createElement('iframe'); iframeEl.width = 560; iframeEl.height = 315; iframeEl.title = this.playLabel; iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'; iframeEl.allowFullscreen = true; iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${this.getParams().toString()}`; return iframeEl; } upgradePosterImage() { setTimeout(() => { const webpUrl = `https://i.ytimg.com/vi_webp/${this.videoId}/sddefault.webp`; const img = new Image(); img.fetchPriority = 'low'; // low priority to reduce network contention img.referrerpolicy = 'origin'; // Not 100% sure it's needed, but https://github.com/ampproject/amphtml/pull/3940 img.src = webpUrl; img.onload = (e) => { const noAvailablePoster = e.target.naturalHeight == 90 && e.target.naturalWidth == 120; if (noAvailablePoster) return; this.style.backgroundImage = `url("${webpUrl}")`; }; }, 100); } } customElements.define('lite-youtube', LiteYTEmbed); </script> <div class='light-bg-wrapper homepage-hero-with-logos-gradient'> <section class='wide-section'> <div class='homepage-hero-with-logos__container'> <div class='homepage-hero-with-logos__container-heading'> <h1>Design UI with code-backed components. </h1> </div> <div class='homepage-hero-with-logos__container-description'> Use the same components in design as in development. Build advanced prototypes easily and get production-ready code right off the design. </div> <div class='homepage-hero-with-logos__container-cta'> <div class='form'> <form action='/sign-up' method='get' target='_blank'> <input autofocus='1' class='form__input' name='email' placeholder='Work email' type='email'> <input name='test_version' type='hidden' value='test'> <button class='form__button' style='' type='submit'> Try for free </button> </form> </div> </div> <div class='homepage-hero-with-logos__container-media'> <video autoplay loop muted> <source src='https://uxpin.s3.amazonaws.com/marketing/main_AI_720px_wide.webm'> </video> </div> <div class='homepage-hero-with-logos__container-logos'> <img src='https://cdn.buttercms.com/6cDIgg1xTAKK4xYjekcT'> <img src='https://cdn.buttercms.com/sPfBH2VQi6nysFqi5J2A'> <img src='https://cdn.buttercms.com/LvoXWhgQte8FHeiN7e9w'> <img src='https://cdn.buttercms.com/5DyZt3FCQaiQ085BzQ8t'> <img src='https://cdn.buttercms.com/1ZDGGaclTwWv8oOsCeIo'> <img src='https://cdn.buttercms.com/cSpna8TyRq9uRVakPD2A'> </div> </div> </section> </div> <div class='light-bg-wrapper'> <section class='wide-section'> <div class='interactive_buttons__container'> <div class='interactive_buttons__container-buttons'> <div class='mobile-step' id='mobilestep1'> 1 </div> <div class='interactive-button active' id='step1' onclick='updateStep(1)'> Choose your building blocks </div> <div class='mobile-step not-active' id='mobilestep2'> 2 </div> <div class='interactive-button not-active' id='step2' onclick='updateStep(2)'> Assemble a high-fidelity prototype </div> <div class='mobile-step not-active' id='mobilestep3'> 3 </div> <div class='interactive-button not-active' id='step3' onclick='updateStep(3)'> Export production-ready React code </div> </div> <div class='interactive_buttons__container-bottom'> <div id='description1'> <div class='interactive_buttons__container-bottom-steps'> <div class='step active' onclick='updateStep(1)'></div> <div class='step not-active' onclick='updateStep(2)'></div> <div class='step not-active' onclick='updateStep(3)'></div> </div> <div class='interactive_buttons__container-bottom-number'> 1 </div> <div class='interactive_buttons__container-bottom-description'> Use built-in coded libraries (like MUI, Tailwind UI, and more) or sync your own Git component repository </div> <div class='interactive_buttons__container-bottom-progress-bar'> <div class='meter'> <span class='full-progress-bar' id='progress1'> <span class='progress'></span> </span> </div> </div> <div class='interactive_buttons__container-bottom-media'> <img src='https://cdn.buttercms.com/iH1sKWXdSbycJ0OHXizc'> </div> </div> <div id='description2' style='display: none;'> <div class='interactive_buttons__container-bottom-steps'> <div class='step not-active' onclick='updateStep(1)'></div> <div class='step active' onclick='updateStep(2)'></div> <div class='step not-active' onclick='updateStep(3)'></div> </div> <div class='interactive_buttons__container-bottom-number'> 2 </div> <div class='interactive_buttons__container-bottom-description'> Create a fully functional and customized design – change properties, switch themes, and add interactions. </div> <div class='interactive_buttons__container-bottom-progress-bar'> <div class='meter'> <span class='full-progress-bar' id='progress2' style='width: 0px;'> <span class='progress'></span> </span> </div> </div> <div class='interactive_buttons__container-bottom-media'> <img src='https://cdn.buttercms.com/EsJY7jUNQ6mm0FYYomig'> </div> </div> <div id='description3' style='display: none;'> <div class='interactive_buttons__container-bottom-steps'> <div class='step not-active' onclick='updateStep(1)'></div> <div class='step not-active' onclick='updateStep(2)'></div> <div class='step active' onclick='updateStep(3)'></div> </div> <div class='interactive_buttons__container-bottom-number'> 3 </div> <div class='interactive_buttons__container-bottom-description'> Start development in seconds. Copy the ready code, open it in an online environment, or export it to your project. </div> <div class='interactive_buttons__container-bottom-progress-bar'> <div class='meter'> <span class='full-progress-bar' id='progress3' style='width: 0px;'> <span class='progress'></span> </span> </div> </div> <div class='interactive_buttons__container-bottom-media'> <img src='https://cdn.buttercms.com/y3zjGnloQYmWvCyp52gY'> </div> </div> </div> </div> </section> </div> <script> function updateStep(stepNumber) { document.querySelectorAll('.interactive-button').forEach(function(button) { button.classList.remove('active'); button.classList.add('not-active'); }); document.querySelectorAll('.mobile-step').forEach(function(step) { step.classList.add('not-active'); }); document.getElementById('mobilestep' + stepNumber).classList.remove('not-active'); document.getElementById('step' + stepNumber).classList.add('active'); document.getElementById('step' + stepNumber).classList.remove('not-active'); document.querySelectorAll('.interactive_buttons__container-bottom > div').forEach(function(content) { content.style.display = 'none'; }); document.getElementById('description' + stepNumber).style.display = 'grid'; } let touchstartX = 0 let touchendX = 0 function checkDirection() { const activeStep = getActiveStep(); if (touchendX < touchstartX) nextStep(activeStep); if (touchendX > touchstartX) previousStep(activeStep); } document.querySelectorAll('.interactive_buttons__container')[0].addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX }) document.querySelectorAll('.interactive_buttons__container')[0].addEventListener('touchend', e => { touchendX = e.changedTouches[0].screenX checkDirection() }) function getActiveStep() { const steps = document.querySelectorAll('.mobile-step'); let activeStep = null; steps.forEach((step, index) => { if (step.classList.contains('mobile-step') && getComputedStyle(step).display !== 'none') { activeStep = index + 1; } }); return activeStep; } function previousStep(activeStep) { if (activeStep === 1) { updateStep(3); return; } updateStep(activeStep - 1); } function nextStep(activeStep) { updateStep((activeStep % 3) + 1); } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap'); </style> <div class='light-bg-wrapper iframe-gradient'> <section class='wide-section'> <div class='iframe__container'> <div class='iframe__container-heading'> Try out a code-backed prototype yourself </div> <div class='iframe__container-iframe'> <div class='decorative-text top-left'> It's fully interactive </div> <div class='decorative-text top-middle'> See what's in Get code </div> <div class='decorative-text middle-right'> Try me! </div> <script> document.addEventListener('DOMContentLoaded', function() { const parent = document.querySelector('.iframe__container-iframe'); const iframe = document.createElement('iframe'); iframe.title = 'UXPin Prototype'; iframe.dataset.src = 'https://preview.uxpin.com/2ab8796efcf015eace22b4dc2205bd4301511b46#/pages/172218875/simulate/no-panels?zoom=fit-to-width'; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); } }); }, { rootMargin: '1300px' }); parent.appendChild(iframe); const onScroll = () => { if (window.scrollY !== 0) { observer.observe(iframe); window.removeEventListener('scroll', onScroll); } }; window.addEventListener('scroll', onScroll); }); </script> </div> <div class='iframe__container-cta'> <button onclick='window.open('https://www.uxpin.com/sign-up', '_blank')' type='button'> Try it out yourself </button> </div> <div class='iframe__container-testimonials-heading'> What our clients are saying about us </div> <div class='iframe__container-testimonials-upper'> <div class='iframe__container-testimonials-upper-scroll'> <div class='iframe__container-testimonials-upper-scroll-cards'> <div class='card'> <div class='card-pic'> <img src='https://cdn.buttercms.com/7qpKqg6RzOKdjEyNOksw'> </div> <div class='card-name'> Mark Figueiredo </div> <div class='card-position'> Sr. UX Team Lead at T.RowePrice </div> <div class='card-review'> “What used to take days to gather feedback now takes hours. Add in the time we’ve saved from not emailing back-and-forth and manually redlining, and we’ve probably shaved months off timelines.” </div> </div> <div class='card'> <div class='card-pic'> <img src='https://cdn.buttercms.com/k3n3j7kuRLa0KBIXhYKO'> </div> <div class='card-name'> Larry Sawyer </div> <div class='card-position'> Lead UX Designer </div> <div class='card-review'> "When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers.” </div> </div> </div> </div> <div class='iframe__container-testimonials-upper-scroll'> <div class='iframe__container-testimonials-upper-scroll-cards'> <div class='card'> <div class='card-pic'> <img src='https://cdn.buttercms.com/iVeWuffVQo253Ek3gPto'> </div> <div class='card-name'> David Snodgrass </div> <div class='card-position'> Design Leader </div> <div class='card-review'> "Been a fan. The deeper interactions, the removal of artboard clutter creates a better focus on interaction rather than single screen visual interaction, a real and true UX platform that also eliminates so many handoff headaches." </div> </div> <div class='card'> <div class='card-pic'> <img src='https://cdn.buttercms.com/GEV7sTpTeCuY5ePRpSZw'> </div> <div class='card-name'> Brian Demchak </div> <div class='card-position'> Sr. UX Designer at AAA Digital & Creative Services </div> <div class='card-review'> “As a full stack design team, UXPin Merge is our primary tool when designing user experiences. We have fully integrated our custom-built React Design System and can design with our coded components. It has increased our productivity, quality, and consistency, streamlining our testing of layouts and the developer handoff process.” </div> </div> </div> </div> <div class='iframe__container-testimonials-upper-scroll'> <div class='iframe__container-testimonials-upper-scroll-cards'> <div class='card'> <div class='card-pic'> <img src='https://cdn.buttercms.com/gIXp2F3SPmxAIY6IMniw'> </div> <div class='card-name'> Benjamin Michel </div> <div class='card-position'> UX Designer at Bottomline Technologies </div> <div class='card-review'> "I think UXPin is an underrated powerhouse of design and prototyping that allows complex applications to design low, medium, and high-fidelity designs to communicate complex interactions all in one place quickly and effectively." </div> </div> </div> </div> </div> </div> </section> </div> <div class='light-bg-wrapper'> <h2 class='tiles-heading'> <p>Ship products faster by working in one environment.</p> </h2> <section class='tiles-with-copy wide-section'> <div class='tiles'> <div class='tile'> <img alt='' class='tile__image' loading='lazy' src='https://cdn.buttercms.com/Z51nsnvbQRCHlJK2aNTX'> <div class='tile__link'> <p><a href="https://www.uxpin.com/docs/getting-started/downloading-and-using-uxpin/ " target="_blank">Read Documentation</a> <img src="https://cdn.buttercms.com/Dqd0z4nCStipDantC9vd" alt="arrow"></p> </div> </div> <div class='tile'> <img alt='' class='tile__image' loading='lazy' src='https://cdn.buttercms.com/PLdhiiOxSFOFBL5wzOTc'> <div class='tile__link'> <p><a href="https://www.uxpin.com/examples " target="_blank">Explore templates</a> <img src="https://cdn.buttercms.com/Dqd0z4nCStipDantC9vd" alt="arrow"></p> </div> </div> <div class='tile'> <img alt='' class='tile__image' loading='lazy' src='https://cdn.buttercms.com/5uK68lBQT6SONc0rPs2P'> <div class='tile__link'> <p><a href="https://www.youtube.com/playlist?list=PLTQ1nMZTXSUXtt7ARfk3HUkSxEAwEDIuT" target="_blank">Watch tutorials</a> <img src="https://cdn.buttercms.com/Dqd0z4nCStipDantC9vd" alt="arrow"></p> </div> </div> </div> </section> </div> <div class='light-bg-wrapper bottom-features-gradient'> <section class='wide-section'> <div class='bottom-features__container'> <div class='bottom-features__container-heading'> Build UI with code but visually </div> <div class='bottom-features__container-features-with-gif'> <div class='bottom-features__container-features-with-gif-cards'> <div class='card active' id='card1' onclick='updateActive(1)'> <div class='card-icon'> <img src='https://cdn.buttercms.com/IDfvI5r9T2y1pwDBdMl1'> </div> <div class='card-header'> Design with AI </div> <div class='card-description'> Put design on autopilot. Build code-backed layouts using AI Component Creator with OpenAI or Claude models. Write a prompt and your auto-generated tables, forms, or whatever you like will be ready to save. </div> </div> <div class='card not-active' id='card2' onclick='updateActive(2)'> <div class='card-icon'> <img src='https://cdn.buttercms.com/UBtlFTmxS6aXwkgvXiOI'> </div> <div class='card-header'> Built-in React libraries </div> <div class='card-description'> Don’t have your own component library? Use UI elements from top React open-source ones like MUI, Tailwind UI, Ant Design, and more. </div> </div> <div class='card not-active' id='card3' onclick='updateActive(3)'> <div class='card-icon'> <img src='https://cdn.buttercms.com/WpmLlq8gQ6CNNPE0mh9R'> </div> <div class='card-header'> Get Clean Code & Specs </div> <div class='card-description'> Copy specs and production-ready React code with dependencies. All yours and easy to maintain. Export it off your design, to your project, or open it in an online dev environment like StackBlitz. </div> </div> <div class='card not-active' id='card4' onclick='updateActive(4)'> <div class='card-icon'> <img src='https://cdn.buttercms.com/sIqzN7S26GyOVqIMilA6'> </div> <div class='card-header'> Advanced interactions </div> <div class='card-description'> Breathe life into your prototypes even more. Add advanced interactions, variables, conditional logic, and more to make your prototype behave like the end product. </div> </div> </div> <div class='bottom-features__container-features-with-gif-gif' id='gif1'> <video autoplay loop muted playsinline='true'> <source src='https://uxpin.s3.amazonaws.com/marketing/vid_01_ai_2025.webm' type='video/webm'> <source src='' type='video/mp4'> </video> </div> <div class='bottom-features__container-features-with-gif-gif' id='gif2' style='display: none;'> <video autoplay loop muted playsinline='true'> <source src='https://uxpin.s3.amazonaws.com/marketing/vid_02_built_in_libraries+2x.webm' type='video/webm'> <source src='' type='video/mp4'> </video> </div> <div class='bottom-features__container-features-with-gif-gif' id='gif3' style='display: none;'> <video autoplay loop muted playsinline='true'> <source src='https://uxpin.s3.amazonaws.com/marketing/vid_03_spec+get+code+2x.webm' type='video/webm'> <source src='' type='video/mp4'> </video> </div> <div class='bottom-features__container-features-with-gif-gif' id='gif4' style='display: none;'> <video autoplay loop muted playsinline='true'> <source src='https://uxpin.s3.amazonaws.com/marketing/vid_04_interactions.webm' type='video/webm'> <source src='' type='video/mp4'> </video> </div> </div> <div class='bottom-features__container-features-with-gif-gif-steps' id='stepid1' style='display: flex'> <div class='step active' onclick='updateActive(1)'></div> <div class='step not-active' onclick='updateActive(2)'></div> <div class='step not-active' onclick='updateActive(3)'></div> <div class='step not-active' onclick='updateActive(4)'></div> </div> <div class='bottom-features__container-features-with-gif-gif-steps' id='stepid2' style='display: none'> <div class='step not-active' onclick='updateActive(1)'></div> <div class='step active' onclick='updateActive(2)'></div> <div class='step not-active' onclick='updateActive(3)'></div> <div class='step not-active' onclick='updateActive(4)'></div> </div> <div class='bottom-features__container-features-with-gif-gif-steps' id='stepid3' style='display: none'> <div class='step not-active' onclick='updateActive(1)'></div> <div class='step not-active' onclick='updateActive(2)'></div> <div class='step active' onclick='updateActive(3)'></div> <div class='step not-active' onclick='updateActive(4)'></div> </div> <div class='bottom-features__container-features-with-gif-gif-steps' id='stepid4' style='display: none'> <div class='step not-active' onclick='updateActive(1)'></div> <div class='step not-active' onclick='updateActive(2)'></div> <div class='step not-active' onclick='updateActive(3)'></div> <div class='step active' onclick='updateActive(4)'></div> </div> <div class='bottom-features__container-features'> <div class='bottom-features__container-features-cards'> <div class='card'> <div class='card-icon'> <img src='https://cdn.buttercms.com/zXs3pCXwRA6f4rtgNgRq'> </div> <div class='card-header'> <p>Reusable UI<br> components.</p> </div> <div class='card-description'> Design products faster by assembling ready and documented elements. </div> </div> <div class='card'> <div class='card-icon'> <img src='https://cdn.buttercms.com/eEHj8xKPSqe00liejXMc'> </div> <div class='card-header'> <p>No more writing code from scratch.</p> </div> <div class='card-description'> Build designs with ready code that renders as UI and export it in just one click. </div> </div> <div class='card'> <div class='card-icon'> <img src='https://cdn.buttercms.com/AxFpP6WQCG63sLIQs0P8'> </div> <div class='card-header'> <p>Make code your single source of truth.</p> </div> <div class='card-description'> Use one environment for all. Let designers and developers speak the same language. </div> </div> </div> </div> <div class='bottom-features__container-enterprises-heading'> Loved by developers and technical designers. <b> Trusted by Enterprises. </b> </div> <div class='bottom-features__container-enterprises-logos'> <img src='https://cdn.buttercms.com/6cDIgg1xTAKK4xYjekcT'> <img src='https://cdn.buttercms.com/sPfBH2VQi6nysFqi5J2A'> <img src='https://cdn.buttercms.com/LvoXWhgQte8FHeiN7e9w'> <img src='https://cdn.buttercms.com/5DyZt3FCQaiQ085BzQ8t'> <img src='https://cdn.buttercms.com/1ZDGGaclTwWv8oOsCeIo'> <img src='https://cdn.buttercms.com/cSpna8TyRq9uRVakPD2A'> </div> <div class='bottom-features__container-media'> <lite-youtube params='controls=0' videoid='b_cFR5aGLG8'></lite-youtube> </div> <div class='bottom-features__container-cta'> <p><a href="https://www.uxpin.com/enterprise" target="_blank">Learn more</a> <img src="https://cdn.buttercms.com/Dqd0z4nCStipDantC9vd" alt="arrow"></p> </div> </div> </section> </div> <script> function updateActive(stepNumber) { document.querySelectorAll('.card').forEach(function(button) { button.classList.remove('active'); button.classList.add('not-active'); }); document.getElementById('card' + stepNumber).classList.add('active'); document.getElementById('card' + stepNumber).classList.remove('not-active'); document.querySelectorAll('.bottom-features__container-features-with-gif-gif, .bottom-features__container-features-with-gif-gif-steps').forEach(function(content) { content.style.display = 'none'; }); document.getElementById('gif' + stepNumber).style.display = 'block'; document.getElementById('stepid' + stepNumber).style.display = 'flex'; } let touchstartXb = 0 let touchendXb = 0 let activeStepBottom = 1; function checkDirectionBottomFeatures() { if (touchendXb < touchstartXb) nextStepBottom(); if (touchendXb > touchstartXb) previousStepBottom(); } document.querySelectorAll('.bottom-features__container-features-with-gif')[0].addEventListener('touchstart', e => { touchstartXb = e.changedTouches[0].screenX }) document.querySelectorAll('.bottom-features__container-features-with-gif')[0].addEventListener('touchend', e => { touchendXb = e.changedTouches[0].screenX checkDirectionBottomFeatures() }) function nextStepBottom() { activeStepBottom = (activeStepBottom % 4) + 1 updateActive(activeStepBottom); } function previousStepBottom() { if (activeStepBottom === 1) { activeStepBottom = 4; updateActive(4); return; } activeStepBottom = activeStepBottom - 1; updateActive(activeStepBottom); } </script> <div class='light-bg-wrapper homepage-bottom-cta-background'> <section class='wide-section'> <div class='homepage-bottom-cta__container'> <div class='homepage-bottom-cta__container-heading'> Enhance your team's efficiency with code-backed prototype </div> <div class='homepage-bottom-cta__container-description'> Design with code to remove product inconsistencies and simplify handoff to speed up the design-to-development process. </div> <div class='homepage-bottom-cta__container-button'> <a href='https://calendly.com/uxpin-demo/merge-walkthrough' target='_blank'> Book a demo </a> </div> <div class='homepage-bottom-cta__container-image'> <img alt='Enhance your team's efficiency with code-backed prototype' src='https://cdn.buttercms.com/i7RRpjyTP2DlxpHRWkJN'> </div> </div> </section> </div> <footer class='black-bg-wrapper'> <div class='basic-container' id='footer'> <a class="logo logo--light footer-logo" href="/">UXPin</a> <section id='sitemap'> <nav class='sitemap-column'> <h2 class='sitemap-column__heading'>UXPin</h2> <ul class='sitemap-column__list'> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/sketch-import' title='Import from Sketch'>Import from Sketch</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/testimonials' title='Customers'>Customers</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/enterprise' title='Enterprise'>Enterprise</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/pricing' title='Pricing'>Pricing</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://app.uxpin.com' title='Open UXPin'>Open UXPin</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link download-link' href='https://files.uxpin.com/desktop-app/latest/UXPin-mac.dmg' title='UXPin for Mac'>UXPin for Mac</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link download-link' href='https://files.uxpin.com/desktop-app/latest/UXPin-win.exe' title='UXPin for Windows'>UXPin for Windows</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://itunes.apple.com/us/app/uxpin-mirror/id1446596008' title='Mirror for iOS'>Mirror for iOS</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://play.google.com/store/apps/details?id=com.uxpin.mirror' title='Mirror for Android'>Mirror for Android</a> </li> </ul> </nav> <nav class='sitemap-column'> <h2 class='sitemap-column__heading'>Compare</h2> <ul class='sitemap-column__list'> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/uxpin-vs-figma' title='UXPin vs Figma'>UXPin vs Figma</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/uxpin-vs-invision' title='UXPin vs Invision'>UXPin vs Invision</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-adobe-xd/' title='UXPin vs Adobe XD'>UXPin vs Adobe XD</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-framer/' title='UXPin vs Framer'>UXPin vs Framer</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-sketch/' title='UXPin vs Sketch'>UXPin vs Sketch</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-axure/' title='UXPin vs Axure'>UXPin vs Axure</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-balsamiq/' title='UXPin vs Balsamiq'>UXPin vs Balsamiq</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-justinmind/' title='UXPin vs Justinmind'>UXPin vs Justinmind</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-zeplin/' title='UXPin vs Zeplin'>UXPin vs Zeplin</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-marvelapp/' title='UXPin vs Marvel App'>UXPin vs Marvel App</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://get.uxpin.com/uxpin-vs-protoio/' title='UXPin vs Proto.io'>UXPin vs Proto.io</a> </li> </ul> </nav> <nav class='sitemap-column'> <h2 class='sitemap-column__heading'>Resources</h2> <ul class='sitemap-column__list'> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/docs' target='_blank' title='Docs'>Docs</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://www.youtube.com/watch?v=IrAzCoU39SQ&list=PLTQ1nMZTXSUUOSMKm_icOjaVosG17wbe4' target='_blank' title='Video Tutorials'>Video Tutorials</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/studio/blog/' target='_blank' title='Blog'>Blog</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/studio/ebooks/' target='_blank' title='E-books'>E-books</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/studio/webinars/' target='_blank' title='Webinars'>Webinars</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://showcase.uxpin.com' target='_blank' title='Prototype Showcase'>Prototype Showcase</a> </li> </ul> </nav> <nav class='sitemap-column'> <h2 class='sitemap-column__heading'>About</h2> <ul class='sitemap-column__list'> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/about-us' title='Company'>Company</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='/jobs' title='Jobs'> Jobs <span class='badge badge--highlighted badge-position badge-mobile-removal'>New</span> </a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='https://s3.amazonaws.com/uxpin/uxpin_press_kit.zip' title='Press Kit'>Press Kit</a> </li> <li class='sitemap-column__item'> <a class='sitemap-column__link' href='mailto:hello@uxpin.com' title='Contact us'>Contact us</a> </li> </ul> </nav> </section> <section id='general-footer'> <p class='copyrights'>© UXPin Inc. All rights reserved.</p> <nav class='footer-nav'> <ul class='footer-nav__list'> <li class='footer-nav__item'> <a class='link-neutral' href='/privacy' title='Privacy'>Privacy</a> </li> <li class='footer-nav__item'> <a class='link-neutral' href='/tos' title='Terms of Service'>Terms of Service</a> </li> <li class='footer-nav__item'> <a class='link-neutral' href='/security' title='Security'>Security</a> </li> </ul> <ul class='footer-nav__list'> <li class='footer-nav__item'> <a class='footer-nav__social icon--social-facebook' href='https://www.facebook.com/uxpin' rel='nofollow' target='_blank' title='UXPin on Facebook'></a> </li> <li class='footer-nav__item'> <a class='footer-nav__social icon--social-twitter' href='https://twitter.com/uxpin' rel='nofollow' target='_blank' title='UXPin on Twitter'></a> </li> <li class='footer-nav__item'> <a class='footer-nav__social icon--social-dribbble' href='https://dribbble.com/uxpin' rel='nofollow' target='_blank' title='UXPin on Dribbble'></a> </li> <li class='footer-nav__item'> <a class='footer-nav__social icon--social-medium' href='https://medium.com/@uxpin' rel='nofollow' target='_blank' title='UXPin on Medium'></a> </li> <li class='footer-nav__item'> <a class='footer-nav__social icon--social-youtube' href='https://www.youtube.com/user/uxpin' rel='nofollow' target='_blank' title='UXPin on Youtube'></a> </li> </ul> </nav> <nav class='footer-language-selector'> <ul class='footer-language-selector__list'> <li class='footer-language-selector__item selected-lang'> <a class="footer-language-selector__link" href="/?switcher=en">English</a> </li> <li class='footer-language-selector__item'> <a class="footer-language-selector__link" href="/jp?switcher=jp">日本語</a> </li> <li class='footer-language-selector__item'> <a class="footer-language-selector__link" href="/kr?switcher=kr">한국어</a> </li> </ul> </nav> </section> </div> </footer> <script> const sitemapElement = document.getElementById('sitemap'); if (sitemapElement) { sitemapElement.addEventListener("click", (event) => { if (event.target.classList.contains('download-link')) { mixpanel.track('desktop_app_downloaded'); } }) } </script> <script> function getPageLanguage() { // match rewview / staging / prod urls that contains /kr /jp or /kr/ /jp/ const matches = window.location.href.match(/\/(jp|kr)\/?|\/(jp|kr)\b/); switch (matches?.[1]) { case 'kr': return 'ko-KR'; case 'jp': return 'ja-JP'; default: return 'en-US'; } } </script> <script> const MIXPANEL_PROJECT_TOKEN = 'ca0b6e5e3c5be82d7133a9145c2d1b73'; // Set this to true to enable Mixpanel logging const debug = false; window.addEventListener('load', () => { setTimeout(() => { (function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" "); for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL? MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]); mixpanel.init(MIXPANEL_PROJECT_TOKEN, { debug, loaded: trackPageView }); const trackFirstUrl = (mixpanel) => { const parts = window.location.hostname.split('.'); const subdomain = parts.shift(); // Don't add first_visit_url under app. subdomain if( subdomain !== 'app' ){ mixpanel.people.set_once({ first_visit_url: window.location.href, }); } } function trackPageView(mixpanel) { trackFirstUrl(mixpanel); mixpanel.track('page_viewed', { page_title: document.title, app_part: 'uxpin-rails', page_language: getPageLanguage(), }); } }, 3500); }); </script> <script> document.addEventListener("click", (event) => { // track GA4 enterprise_meeting_clicked, when users click on the button "Book a meeting" const isBookEnterpriseAnchor = event.target.getAttribute("data-action-calendly") === "uxpin-demo-enterprise"; if (isBookEnterpriseAnchor) { gtmTrack({ event: 'enterprise_meeting_clicked' }); } const isChatWithSalesButton = event.target.classList.contains("launch-chat-btn") if (isChatWithSalesButton) { gtmTrack({ event: 'sales_contacted' }) } }); </script> <script src="https://app.uxpin.com/packs/js/page-with-sections-57182b287bf60c92ebc0.js" defer="defer"></script> </body> </html>