Prototyping and Usability Testing with Indigo Design | Design to Code

<!DOCTYPE html>      <html class="no-js" lang="en">  <head>  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon/favicon.ico" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="application-name" content="Infragistics" /> <meta name="apple-mobile-web-app-title" content="Infragistics" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="theme-color" content="#0099ff" /> <meta name="msapplication-navbutton-color" content="#0099ff" /> <meta name="msapplication-TileColor" content="#0099ff" /> <meta name="msapplication-square70x70logo" content="/assets/favicon/mstile-70x70.png" /> <meta name="msapplication-square150x150logo" content="/assets/favicon/mstile-150x150.png" /> <meta name="msapplication-square310x310logo" content="/assets/favicon/mstile-310x310.png" /> <meta name="msapplication-wide310x150logo" content="/assets/favicon/mstile-310x150.png" /> <meta name="msapplication-config" content="none" /> <meta name="msapplication-starturl" content="/" /> <link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon/apple-touch-icon-76x76.png" /> <link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon/apple-touch-icon-120x120.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon/apple-touch-icon-152x152.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon-180x180.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/icon-192x192.png" /> <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/icon-512x512.png" /> <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#0099ff" /> <link rel="manifest" href="/assets/favicon/manifest.en.json" /> <link rel="preconnect dns-prefetch" href="https://static.infragistics.com" crossorigin /> <link rel="preconnect dns-prefetch" href="https://www.googletagmanager.com" crossorigin /> <link rel="preconnect dns-prefetch" href="https://www.google-analytics.com" crossorigin /> <link rel="preconnect dns-prefetch" href="https://storage.googleapis.com" crossorigin /> <link rel="preconnect dns-prefetch" href="https://www.snapengage.com" crossorigin /> <link rel="preconnect dns-prefetch" href="https://cl.qualaroo.com" crossorigin /> <link rel="preconnect dns-prefetch" href="https://s3.amazonaws.com" crossorigin /> <link rel="preconnect dns-prefetch" href="https://use.typekit.net" crossorigin> <script src="https://use.typekit.net/wxj2jjp.js"></script> <script>try { Typekit.load({ async: true }); } catch (e) { }</script> <link href="/DependencyHandler.axd?s=L2Fzc2V0cy9tb2Rlcm4vY3NzL3N0eWxlLmNzczsvYXNzZXRzL21vZGVybi9jc3Mvc2V0dGluZ3MuY3NzOy9hc3NldHMvbW9kZXJuL2Nzcy9sYXlvdXQuY3NzOy9hc3NldHMvbW9kZXJuL2Nzcy9zaG9ydGNvZGVzLmNzczsvYXNzZXRzL21vZGVybi9jc3MvYWRtaW4tYWpheC5jc3M7L2Fzc2V0cy9tb2Rlcm4vY3NzL2ZvbnRlbGxvLmNzczsvYXNzZXRzL21vZGVybi9jc3MvbWFnbmlmaWMtcG9wdXAuY3NzOy9hc3NldHMvbW9kZXJuL2Nzcy9mbGV4c2xpZGVyLmNzczsvYXNzZXRzL21vZGVybi9jc3Mvc3dpcGVyLWJ1bmRsZS5taW4uY3NzOy9hc3NldHMvbW9kZXJuL2Nzcy9hbmltYXRlLWN1c3RvbS5jc3M7L2Fzc2V0cy9tb2Rlcm4vY3NzL2JlLXNsaWRlci5jc3M7L2Fzc2V0cy9tb2Rlcm4vY3NzL2Nob3Nlbi5jc3M7L2Fzc2V0cy9tb2Rlcm4vY3NzL2lnbml0ZXVpLWN1c3RvbS5jc3M7L2Nzcy9iYXNlLmNzczsvY3NzL25hdmlnYXRpb24uY3NzOy9jc3MvZm9vdGVyLmNzczsvY3NzL2NvbXBvbmVudHMuY3NzOy9jc3MvY29tcG9uZW50c19wcmljaW5nLWJsb2Nrcy5jc3M7L2Nzcy9jb21wb25lbnRzX2V2ZW50cy5jc3M7L2Nzcy9jb21wYXJpc29uLWdyaWQuY3NzOy9jc3MvY29uc3VsdGluZy5jc3M7L2Nzcy9zbGluZ3Nob3QuY3NzOy9jc3MvaW5kaWdvX3VpX2tpdHMuY3NzOw&t=Css&cdv=20250228" type="text/css" rel="stylesheet"/> <script src="/DependencyHandler.axd?s=L2Fzc2V0cy9tb2Rlcm4vc2NyaXB0cy9qcXVlcnkubWluLmpzOy9hc3NldHMvbW9kZXJuL3NjcmlwdHMvanF1ZXJ5LW1pZ3JhdGUtMS40LjEubWluLmpzOy9hc3NldHMvbW9kZXJuL3NjcmlwdHMvanF1ZXJ5LnRoZW1lcHVuY2gucGx1Z2lucy5taW4uanM7L2Fzc2V0cy9tb2Rlcm4vc2NyaXB0cy9qcXVlcnkudGhlbWVwdW5jaC5yZXZvbHV0aW9uLm1pbi5qczsvYXNzZXRzL21vZGVybi9zY3JpcHRzL21vZGVybml6ci0yLjYuMi5taW4uanM7L2Fzc2V0cy9tb2Rlcm4vc2NyaXB0cy9wbHVnaW5zLmpzOy9hc3NldHMvbW9kZXJuL3NjcmlwdHMvcGx1Z2lucy5uYXYuanM7L2Fzc2V0cy9tb2Rlcm4vc2NyaXB0cy9iZS1zbGlkZXIuanM7L2Fzc2V0cy9tb2Rlcm4vc2NyaXB0cy9qcXVlcnktdWkubWluLmpzOy9hc3NldHMvbW9kZXJuL3NjcmlwdHMvc2NyaXB0LmpzOy9hc3NldHMvbW9kZXJuL3NjcmlwdHMvQ3VzdG9tU2NyaXB0LmpzOy9hc3NldHMvbW9kZXJuL3NjcmlwdHMvbmF2aWdhdGlvbi5qczsvYXNzZXRzL3NjcmlwdHMvZG93bmxvYWRVdGlsaXR5LmpzOy9hc3NldHMvc2NyaXB0cy9zZi5jb21tb24uanM7L2Fzc2V0cy9zY3JpcHRzL2xlYWRUcmFja2VyLmpzOw&t=Javascript&cdv=20250228" async="async" type="text/javascript"></script> <title>Prototyping and Usability Testing with Indigo Design | Design to Code | UI & UX Designs Infragistics</title> <meta name="description" content="Indigo.Design – a complete design-to-code system for designers and developers – integrating prototyping, design systems, user testing, and code generation."/> <meta name="keywords" content="prototyping tool, usability testing, indigo design, design to code, ui design, ux design"/> <link rel="canonical" href="https://www.infragistics.com/products/indigo-design" /> </head> <body class="sticky-header" data-auth="False"> <script type="text/javascript">window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('consent', 'default', { 'functionality_storage': 'denied', 'analytics_storage': 'denied', 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'security_storage': 'denied', 'personalization_storage': 'denied', 'wait_for_update': 500, }); if (localStorage.getItem('userId') != null) { window.dataLayer.push({ 'user_id': localStorage.getItem('userId') }); }</script> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-T65CF7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script type="text/javascript">(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.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-T65CF7');</script> <div id="main"> <div data-nav-theme="indigo-studio"> <header id="header" class="globalnav" data-nav-auto-init="true" data-mega-menu="true"> <div id="header-wrap" class="globalnav__container" data-default-height="175" data-sticky-height="175"> <div class="globalnav__search"> <div class="globalnav__search-container globalnav__wrapper"> <div class="search search__container search--support" data-cse-resultsurl="/search">  <input id="q" class="search__input" type="text" name="q" value="" placeholder="Search Infragistics.com" aria-labelledby="search__button-navigation" /> <button id="search__button-navigation" type="submit" value="search" aria-label="Search Infragistics.com"> <svg enable-background="new 0 0 512 512" id="search" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M497.913,497.913c-18.782,18.782-49.225,18.782-68.008,0l-84.862-84.863c-34.889,22.382-76.13,35.717-120.659,35.717 C100.469,448.767,0,348.312,0,224.383S100.469,0,224.384,0c123.931,0,224.384,100.452,224.384,224.383 c0,44.514-13.352,85.771-35.718,120.676l84.863,84.863C516.695,448.704,516.695,479.131,497.913,497.913z M224.384,64.109 c-88.511,0-160.274,71.747-160.274,160.273c0,88.526,71.764,160.274,160.274,160.274c88.525,0,160.273-71.748,160.273-160.274 C384.657,135.856,312.909,64.109,224.384,64.109z"></path></svg> </button> </div> </div> </div>  <div class="globalnav__primary clearfix"> <div class="globalnav__wrapper"> <div class="globalnav__section clearfix"><nav class="globalnav__menu-container"> <ul class="navigation navigation--xs navigation--hpad-0"> <li class="navigation__text deemphasize" style="width: auto;">North American Sales: 1-800-231-8588</li> <li><a title="Contact Us" data-id="9668" href="/about-us/contact-us">Global Contacts</a></li> <li class="navigation__account"> <a class="signInLink" href="https://www.infragistics.com/my-account/keys-and-downloads">My Account</a> </li> </ul> </nav></div>   <div class="globalnav__brand"><a aria-label="Infragistics.com" href="/"><img class="globalnav__logo" src="https://static.infragistics.com/marketing/Website/General/Infragistics-horizontal.svg" alt="Infragistics logo"> <img class="globalnav__logo_abbr" src="https://static.infragistics.com/marketing/Website/General/IG-icon.svg" alt="Infragistics logo"> </a></div>  <div class="globalnav__mobile-menu"><a class="globalnav__menu-toggle" href="#"> <span>Menu</span> </a></div>  <div class="globalnav__search-toggle"> <div class="globalnav__search-close"><i> </i></div> </div> <nav class="globalnav__menu-container"> <ul class="navigation navigation--navbar navigation--hpad-0 sf-menu"> <li class="navigation__mobile-link"> <div class="globalnav__callout-text">North American Sales: 1-800-231-8588</div> </li> <li class="navigation__mobile-link"><a class="navigation__sub-menu" href="#">My Account</a> <ul class="sub-menu clearfix"><li><a class="signInLink" href="https://www.infragistics.com/my-account/keys-and-downloads">Sign In/Register</a></li></ul> </li> <li class="menu-full-width"><a class="navigation__sub-menu" title="Design and Development" href="/products/ultimate"><span class="hidden-md">Design & Development</span><span class="visible-md hidden-lg hidden-sm hidden-xs hidden-xxs">Design & Develop</span></a> <ul> <li> <div class="navigation__sub-menu--left"> <div class="navigation__sub-menu--left-item"> <div class="navigation__sub-menu-header">Best Value Bundles</div> <div class="emphasize"><a href="/products/ultimate"><span class="navigation__sub-menu-title">Infragistics Ultimate</span> <span class="navigation__sub-menu-price bgColor--ultimate">$2,355</span> <span class="deemphasize">The only complete UX/UI toolkit for building high performance, modern web, mobile and desktop applications.</span> </a></div> </div> <div class="navigation__sub-menu--left-item"> <div class="emphasize"><a href="/products/pro"><span class="navigation__sub-menu-title">Infragistics Professional</span> <span class="navigation__sub-menu-price bgColor--pro">$1,575</span> <span class="deemphasize">The comprehensive UI components library for web, mobile and desktop developers.</span> </a></div> </div> <div class="navigation__sub-menu--left-item hidden-sm hidden-xs hidden-xxs"> <div class="emphasize"><a href="/products/ignite-ui"><span class="navigation__sub-menu-title">Ignite UI</span> <span class="navigation__sub-menu-price bgColor--ignite">$1,355</span> <span class="deemphasize">A complete library of UI components for building modern, data-rich and responsive web apps.</span> </a></div> </div> </div> </li> <li> <div class="navigation__sub-menu-header">Web</div> <a class="deemphasize" title="App Builder" href="/products/appbuilder">App Builder <strong>(New)</strong></a> <a class="deemphasize" href="/products/ignite-ui">Ignite UI</a> <a class="deemphasize small-pad-left" href="/products/ignite-ui-angular">Angular</a> <a class="deemphasize small-pad-left" href="/products/ignite-ui-aspnet-core">ASP.NET Core</a> <a class="deemphasize small-pad-left" href="/products/ignite-ui-aspnet-mvc">ASP.NET MVC</a> <a class="deemphasize small-pad-left" href="/products/ignite-ui-blazor">Blazor</a> <a class="deemphasize small-pad-left" href="/products/ignite-ui-jquery">jQuery</a> <a class="deemphasize small-pad-left" href="/products/ignite-ui-react">React</a> <a class="deemphasize small-pad-left" href="/products/ignite-ui-web-components">Web Components</a> <a class="deemphasize" href="/products/aspnet">Ultimate UI for ASP.NET Web Forms</a> </li> <li> <div class="navigation__sub-menu-header">Desktop</div> <a href="/products/windows-forms">Ultimate UI for Windows Forms</a> <a href="/products/wpf">Ultimate UI for WPF</a> <div class="navigation__sub-menu-header">Cross Platform</div> <a class="hidden" href="/products/uno-platform">Ultimate UI for Uno</a> <a href="/products/uwp">Ultimate UI for UWP</a> <a class="hidden" href="/products/winui">Ultimate UI for WinUI</a> <a href="/products/xamarin">Ultimate UI for Xamarin</a></li> <li> <div class="navigation__sub-menu-header">Design to Code</div> <a class=" hidden-sm hidden-xs hidden-xxs" href="/products/indigo-design">Indigo.Design</a> <a class="hidden-sm hidden-xs hidden-xxs" href="/products/appbuilder">App Builder <strong>(New)</strong></a> <a class="hidden-sm hidden-xs hidden-xxs" href="/products/appbuilder/ui-toolkit">Design System & UI Kits</a> <div class="navigation__sub-menu-header">Automated Testing Tools</div> <a href="/products/test-automation-micro-focus-uft">Test automation for Micro Focus UFT: Windows Forms</a> <a href="/products/test-automation-micro-focus-uft">Test automation for Micro Focus UFT: WPF</a> <a href="/products/test-automation-ibm-rft">Test automation for IBM RFT: Windows Forms</a></li> </ul> </li> <li><a class="navigation__sub-menu" title="UX" href="/products/indigo-design">UX</a> <ul> <li><a title="Indigo.Design" href="/products/indigo-design">Indigo.Design <span class="deemphasize">A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development</span></a></li> <li><a title="App Builder" href="/products/appbuilder">App Builder <span class="deemphasize">Cloud-based WYSIWYG Drag & Drop Tool, Endless Theming options and Standards-Based Code Output</span></a></li> </ul> </li> <li><a class="navigation__sub-menu" title="Business Intelligence" href="https://www.revealbi.io">Business Intelligence</a> <ul> <li><a title="Reveal" href="https://www.revealbi.io">Reveal <span class="deemphasize">Easily embed beautiful data visualizations into your apps</span></a></li> <li><a title="Slingshot" href="https://www.slingshotapp.io">Slingshot <span class="deemphasize">Empower everyone in your organization to use data to make smarter business decisions</span></a></li> </ul> </li> <li><a class="navigation__sub-menu" title="Team Productivity" href="https://www.slingshotapp.io">Team Productivity</a> <ul> <li><a title="Slingshot" href="https://www.slingshotapp.io">Slingshot <span class="deemphasize">Connect everyone you work with to data, project management, content and chats for better results.</span></a></li> <li><a title="SharePlus" href="/products/shareplus-enterprise">SharePlus <span class="deemphasize">Secure, instant access to content and data on the go – with or without connectivity.</span></a></li> </ul> </li> <li><a class="navigation__sub-menu" title="Learn and Support" href="/support"><span class="hidden-md">Learn & Support</span><span class="visible-md hidden-lg hidden-sm hidden-xs hidden-xxs">Support</span></a> <ul> <li><a title="Help and Support Documents" href="/support">Help & Support Documents</a></li> <li><a title="Blogs" href="/blogs">Blogs</a></li> <li><a title="Forums" href="/community/forums">Forums</a></li> <li><a title="Product Ideas" href="/community/ideas">Product Ideas</a></li> <li><a title="Reference Applications" href="/resources/sample-applications">Reference Applications</a></li> <li><a title="Customer Stories" href="/resources/case-studies">Customer Stories</a></li> <li><a title="Webinars" href="/webinars">Webinars</a></li> <li><a title="eBooks and Whitepapers" href="/resources/whitepapers">eBook & Whitepapers</a></li> <li><a title="Events" href="/events">Events</a></li> </ul> </li> <li><a title="Free Trials" href="/free-downloads">Free Trials</a></li> <li><a class="navigation__sub-menu" title="Pricing" href="/how-to-buy/product-pricing">Pricing</a> <ul> <li><a title="Pricing" href="/how-to-buy/product-pricing">Product Pricing / Buy Online</a></li> <li><a title="Contact Us" href="/about-us/contact-us">Contact Us</a></li> </ul> </li> </ul> </nav> <div class="globalnav__overlay"></div> </div> </div>  <section class="globalnav__secondary clearfix"> <div class="globalnav__wrapper"> <div class="globalnav__breadcrumb"> <a href="#top">Indigo.Design</a> </div> <nav class="globalnav__menu-container"> <ul class="navigation navigation--dark navigation--xs navigation--hpad-0" data-nav-theme="indigo-studio"> <li><a href="/products/indigo-design/user-testing">User Testing</a></li> <li><a href="/products/indigo-design#learning-library"><span class="hidden-md">Learning</span> Library</a></li>  <li><a href="#pricing">Pricing</a></li>  <li><a class="navigation__cta navigation__cta--secondary trackCTA" style="text-transform: initial;" rel="noopener" href="https://cloud.indigo.design/login?resources=true" target="_blank" data-xd-ga-action="Login" data-xd-ga-label="Indigo.Design Enterprise | Cloud">Sign In</a></li> <li><a class="navigation__cta gaEventTracker trackCTA" style="text-transform: initial;" rel="noopener" href="https://cloud.indigo.design/register?resources=true" target="_blank" data-ga-category="Download Button" data-ga-action="Click" data-ga-label="Indigo.Design Ent - Subnav" data-xd-ga-action="Sign up" data-xd-ga-label="Indigo.Design Enterprise | Cloud">Try It Now</a></li> </ul> </nav> </div> </section> </div> </header> </div> <div id="gdpr" class="gdpr-block p-fixed pad--lg bg--dark bgColor--cello shadow border--rounded"> <div id="consent-summary" class="gdpr-block-summary"> <div class="text--h5 mar-bottom--xs"><a href="/legal/privacy" target="_blank"> <span class="color--white">Your Privacy Matters</span> </a></div> <div class="mar-bottom--sm font-size--sm color--white">We use our own and third-party cookies to improve your experience on our website. They also allow us to analyze user behavior in order to constantly improve the website for you. Please review our <a href="/legal/cookie-policy" target="_blank">Cookie Policy</a> and cookie settings below.</div> <div><a id="gdpr_settings" href="#"> <span class="color--white" style="font-size: 15px;">Manage settings</span> </a> <a id="gdpr_accept_all_ok" class="ui-btn ui-btn--default ui-btn--xs" style="width: 90px; margin-left: 1rem;" href="#">OK</a></div> </div> <div id="consent-options" class="gdpr-block-options features-block features-block--list features-block--align-center" style="display: none;"> <div> <div class="text--h5 mar-bottom--xs"><a href="/legal/privacy" target="_blank"> <span class="color--white">Privacy Preferences</span> </a></div> <div class="mar-bottom--lg color--white font-size--sm">When you visit any website, it may store or retrieve information on your browser, mostly in the form ot cookies. This information might be about you, your preferences, or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but can give you a more personalized web experience. Because we respect your right to privacy. you can choose not to allow some types of cookies. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.</div> <a id="gdpr_accept_all" class="ui-btn ui-btn--default ui-btn--xs" style="width: 123px;" href="#">Accept All</a> <div class="mar-bottom--sm"> <div class="consent-option"> <label id="LblacceptNecessaryCookies" for="acceptNecessaryCookies" class="ui-form__checkbox-container ui-form__label" style="height: 24px;line-height: 25px;padding-left: 23px;"> <span id="LblacceptNecessaryCookies" class="label__text"> NECESSARY </span> <input name="acceptNecessaryCookies" id="acceptNecessaryCookies" type="checkbox" value="yes" aria-required="true" aria-labelledby="LblacceptNecessaryCookies" class="" data-gtm-form-interact-field-id="0" disabled checked> <div class="ui-form__checkbox" style="top: 5px; border-radius: 5px;"> </div> </label> <span class="ig-tooltip" style="margin: 0 5px 0 0;"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" style="fill: #FFF; width:10px;height:10px;"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.033 16.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.828 1.819-.211.153.25.203.331.356.619-2.498 2.378-5.271 2.588-4.408-.146zm4.742-8.169c-.532.453-1.32.443-1.761-.022-.441-.465-.367-1.208.164-1.661.532-.453 1.32-.442 1.761.022.439.466.367 1.209-.164 1.661z"></path></svg> <span class="line-height--normal ig-tooltiptext ig-tooltip-top">Essential cookies for login data and good site performance.</span> </span> </div> <div class="consent-option"> <label id="LblacceptFunctionalCookies" for="acceptFunctionalCookies" class="ui-form__checkbox-container ui-form__label" style="height: 24px;line-height: 25px;padding-left: 23px;margin-left: 1rem;"> <span id="LblacceptFunctionalCookies" class="label__text"> FUNCTIONAL </span> <input name="acceptFunctionalCookies" id="acceptFunctionalCookies" type="checkbox" value="yes" aria-required="true" aria-labelledby="LblacceptFunctionalCookies" class="" data-gtm-form-interact-field-id="0" checked> <div class="ui-form__checkbox" style="top: 5px; border-radius: 5px;"> </div> </label> <span class="ig-tooltip" style="margin: 0 5px 0 0;"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" style="fill: #FFF; width:10px;height:10px;"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.033 16.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.828 1.819-.211.153.25.203.331.356.619-2.498 2.378-5.271 2.588-4.408-.146zm4.742-8.169c-.532.453-1.32.443-1.761-.022-.441-.465-.367-1.208.164-1.661.532-.453 1.32-.442 1.761.022.439.466.367 1.209-.164 1.661z"></path></svg> <span class="line-height--normal ig-tooltiptext ig-tooltip-top">Cookies that support website functionality and features.</span> </span> </div> <div class="consent-option"> <label id="LblacceptAnalyticsCookies" for="acceptAnalyticsCookies" class="ui-form__checkbox-container ui-form__label" style="height: 24px;line-height: 25px;padding-left: 23px;margin-left: 1rem;"> <span id="LblacceptAnalyticsCookies" class="label__text"> ANALYTICS </span> <input name="acceptAnalyticsCookies" id="acceptAnalyticsCookies" type="checkbox" value="yes" aria-required="true" aria-labelledby="LblacceptAnalyticsCookies" class="" data-gtm-form-interact-field-id="0" checked> <div class="ui-form__checkbox" style="top: 5px; border-radius: 5px;"> </div> </label> <span class="ig-tooltip" style="margin: 0 5px 0 0;"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" style="fill: #FFF; width:10px;height:10px;"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.033 16.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.828 1.819-.211.153.25.203.331.356.619-2.498 2.378-5.271 2.588-4.408-.146zm4.742-8.169c-.532.453-1.32.443-1.761-.022-.441-.465-.367-1.208.164-1.661.532-.453 1.32-.442 1.761.022.439.466.367 1.209-.164 1.661z"></path></svg> <span class="line-height--normal ig-tooltiptext ig-tooltip-top">Cookies, provided by our third-party advertising partners, collect information about your browsing habits.</span> </span> </div> <div class="consent-option"> <label id="LblacceptAdvertisingCookies" for="acceptAdvertisingCookies" class="ui-form__checkbox-container ui-form__label" style="height: 24px;line-height: 25px;padding-left: 23px;margin-left: 1rem;"> <span id="LblacceptAdvertisingCookies" class="label__text"> ADVERTISING </span> <input name="acceptAdvertisingCookies" id="acceptAdvertisingCookies" type="checkbox" value="yes" aria-required="true" aria-labelledby="LblacceptAdvertisingCookies" class="" data-gtm-form-interact-field-id="0" checked> <div class="ui-form__checkbox" style="top: 5px; border-radius: 5px;"></div></label> <span class="ig-tooltip" style="margin: 0 5px 0 0;"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" style="fill: #FFF; width:10px;height:10px;"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.033 16.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.828 1.819-.211.153.25.203.331.356.619-2.498 2.378-5.271 2.588-4.408-.146zm4.742-8.169c-.532.453-1.32.443-1.761-.022-.441-.465-.367-1.208.164-1.661.532-.453 1.32-.442 1.761.022.439.466.367 1.209-.164 1.661z"></path></svg> <span class="line-height--normal ig-tooltiptext ig-tooltip-top">Cookies used to make advertising messages more relevant to you and your interests.</span> </span> </div> </div> </div> <div class="" style="margin: 0;"><a id="gdpr_reject_all" class="ui-btn ui-btn--default ui-btn--xs gdpr-btn zero-margin-right-lg zero-margin-right-md" style="width: 123px;" href="#">Decline All</a> <a id="gdpr_accept_selection" class="ui-btn ui-btn--default ui-btn--xs gdpr-btn zero-margin-right-lg zero-margin-right-md" style="width: 155px; margin-left: 1.5em; text-wrap: nowrap;" href="#">Confirm My Choices</a></div> </div> </div> <style> .ig-tooltip { position: relative; display: inline-block; cursor: pointer; } .ig-tooltip .ig-tooltiptext { visibility: hidden; position: absolute; width: 160px; background-color: #FFF; color: #0099ff; border-color: #0099ff; font-size: 0.675rem; text-align: center; padding: 5px; border-radius: 6px; z-index: 1; opacity: 0; transition: opacity .6s; } .ig-tooltip-top { bottom: 125%; left: 50%; margin-left: -80px; } .ig-tooltip:hover .ig-tooltiptext { visibility: visible; opacity: 1; } .ig-tooltip-top::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #FFF transparent transparent transparent; } .gdpr-block {display: none;top: auto;width: auto;box-sizing: border-box;z-index: 2147483640;bottom: 30px;left: 8vw; overflow: visible;} .gdpr-block-summary {max-width: 300px;} .gdpr-block .features-block {margin: 0 auto; box-sizing: border-box;padding:0;width: auto; max-width: 560px;} .gdpr-block .consent-option {display: inline-block;} .gdpr-block .label__text {color:#FFF !important;} .gdpr-block .ui-form__checkbox-container .ui-form__checkbox {background: transparent; border: 2px solid #FFF;} .ui-form__checkbox-container:hover .ui-form__checkbox {border-color: #e6e6e6;} .gdpr-block .ui-form__checkbox-container input:checked ~ .ui-form__checkbox {background: #1F5D79;border-color: #1F5D79;} .gdpr-block .ui-form__checkbox-container input:checked ~ .ui-form__checkbox::after {border: solid #000;border-width: 0 2px 2px 0;left: 3px;top: -1px;width: 5px;height: 10px;} .ui-form__checkbox-container:hover .ui-form__checkbox::after {border-color: #101010 !important;} @media only screen and (max-width: 960px) { .gdpr-block {top: auto;bottom: 30px;left: 15px;width: calc(100% - 30px);max-width: 380px;} .gdpr-block .consent-option:nth-child(3) label {margin-left: 0 !important;} .gdpr-block .features-block > div {box-sizing:border-box;width:100%;max-width:100%;padding:15px 0 0 0;text-align:left;} } @media only screen and (max-width: 375px) { #gdpr_accept_selection {margin: 15px 0 0 0 !important;} } </style> <div class="header-hero-section"></div> <main id="content" role="main"> <article> <div data-theme="indigo-studio"> <section class="features-hero features-hero--secondary-nav bg--dark bgColor--port-gore zero-padding-bottom bgImage--tiles-topright mar-bottom--lg"> <div class="be-wrap be-row clearfix text--align-center"> <div class="one-col column-block clearfix"><header class="h-group h-group--mar-bottom-xs"><img class="width--full" title="Logo for Indigo.Design" style="max-width: 175px;" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-logo.svg" alt="Logo for Indigo.Design application for prototyping"> <h1 class="text--h2 emphasize" style="font-weight: bold;">Create Better User Experiences</h1> </header> <p>Speed up innovation and time to market with a complete design-to-code system. Indigo.Design is a digital product design platform that integrates UI prototyping, design systems, user testing to eliminate design hand offs and reduce costly iterations — enabling true UX design-development collaboration.</p> <div class="ui-btn-group ui-btn-group-mar--md"><a class="ui-btn ui-btn--secondary ui-btn--sm ui-btn--invert trackCTA" href="#request-demo" data-xd-ga-action="Request Demo" data-xd-ga-label="Indigo.Design Enterprise | Cloud">Request Demo</a> <a class="ui-btn ui-btn--default ui-btn--sm gaEventTracker trackCTA" rel="noopener" href="https://cloud.indigo.design/register?resources=true" target="_blank" data-ga-category="Download Button" data-ga-action="Click" data-ga-label="Indigo.Design Ent - Header" data-xd-ga-action="Sign up" data-xd-ga-label="Indigo.Design Enterprise | Cloud">Try It Now</a></div> <div class="video-container p-relative"> </div> </div> </div> <div class="ie-hide indigo-border--top"> <svg class="display--block p-absolute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 343" style="bottom: 0; stroke: #fff; stroke-width: 6px; width: 101%;"><path d="M1700 126.5L259.3 287.6C159.6 298.8 65.6 262.3 0 196.3V343h1920V-1.1c-50.4 68.9-128.4 117.4-220 127.6z" fill="#fff"/></svg> </div> </section>  <section class="be-section clearfix padding-top-bottom-50 zero-padding-top"> <div class="be-row be-wrap clearfix"><header class="h-group h-group--mar-bottom-none text--align-center"> <h2 class="hidden--visual">Indigo.Design Benefits and Features</h2> </header> <div class="features-block features-block--vpad-60">    <div id="indigo-system" class="features-block__item features-block--align-center"> <div class="features-block__image features-block__image--right"><img class="b-lazy" title="Indigo.Design System showing a prototype with usable components" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-system-768-lazy-load.jpg" alt="Indigo.Design System showing a prototype with usable components." sizes="(max-width: 1160px) 50vw, (max-width: 767px) 100vw, 768px" data-srcset="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-system-480.jpg 480w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-system-768.jpg 768w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-system-960.jpg 960w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-system-1100.jpg 1100w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-system-1600.jpg 1600w" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-system-768.jpg"></div> <div class="features-block__content features-block__item--third"> <h3>One, Flexible Design System</h3> <p>Create best-in-class UX and UI designs using the <a title="UI Toolkit" data-id="33146" href="/products/appbuilder/ui-toolkit">Indigo Design System</a> on a single working environment for managers, designers and developers. Easily collaborate with stakeholders and test prototypes in an iterative design process.</p> <ul class="ui-list ui-list__ul--check ui-list__ul--check--indigo ui-list--zero-padding" data-use-css="true"> <li>Import designs from <a href="/products/indigo-design/prototyping-sketch">Sketch</a></li> <li>Build interactive prototypes with useable components</li> <li>Pre-built design patterns</li> </ul> <a class="ui-btn ui-btn--default ui-btn--sm gaEventTracker trackCTA" aria-label="Get Started with Indigo.Design System" rel="noopener" href="https://cloud.indigo.design/resources" target="_blank" data-animation="fadeInUp" data-ga-category="Download Button" data-ga-action="Click" data-ga-label="Indigo.Design Ent - Get Started with Design System" data-xd-ga-action="Login" data-xd-ga-label="Indigo.Design Enterprise | Cloud">Get Started</a></div> </div> <div id="prototyping" class="features-block__item features-block--align-center"> <div class="features-block__image features-block__image--left"><img class="b-lazy" title="Indigo.Design showing user testing" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-prototyping-travel-mobile.jpg" alt="Indigo.Design showing user testing" sizes="(max-width: 1160px) 50vw, (max-width: 767px) 100vw, 768px" data-srcset="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-prototyping-travel-mobile-480.jpg 480w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-prototyping-travel-mobile-768.jpg 768w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-prototyping-travel-mobile-960.jpg 960w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-prototyping-travel-mobile-1100.jpg 1100w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-prototyping-travel-mobile-1600.jpg 1600w" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-prototyping-travel-mobile-768.jpg"></div> <div class="features-block__content features-block__item--third"> <h3>Powerful Rapid Prototyping</h3> <p>Ensure you are deliver beautiful app designs by sharing your projects and getting user feedback fast. This empowers you to identify and resolve issues early in the development cycle, saving time and resources in the long run.</p> <ul class="ui-list ui-list__ul--check ui-list__ul--check--indigo ui-list--zero-padding" data-use-css="true"> <li>Drag and drop designs or browse files on your computer</li> <li>Collaborate with team members with real time commenting</li> <li>Set navigation and create user flows</li> </ul> <a class="ui-btn ui-btn--default ui-btn--sm mfp-video--no-rel gaEventTracker" aria-label="Powerful Rapid Prototyping" rel="noopener" href="https://www.youtube.com/watch?v=7cgCLyEo-zI&show_list=1&rel=0&autoplay=1&list=PLZ4rRHIJepBsRHw8oSj6oj00_FyBZHsmW" target="_blank" data-animation="fadeInUp">Learn More</a></div> </div>  <div id="prototyping" class="features-block__item features-block--align-center"> <div class="features-block__image features-block__image--right"><img class="b-lazy" title="Indigo.Design showing user testing" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-user-testing-768-lazy-load.jpg" alt="Indigo.Design showing user testing" sizes="(max-width: 1160px) 50vw, (max-width: 767px) 100vw, 768px" data-srcset="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-user-testing-480.jpg 480w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-user-testing-768.jpg 768w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-user-testing-960.jpg 960w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-user-testing-1100.jpg 1100w, https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-user-testing-1600.jpg 1600w" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2021/indigo-design-user-testing-768.jpg"></div> <div class="features-block__content features-block__item--third"> <h3>User-test Early and Often</h3> <p>Conduct user testing and get stakeholder feedback early, before coding, to avoid costly iterations with your development team. Get detailed analytics to ensure your design is right before handing it off to developers.</p> <ul class="ui-list ui-list__ul--check ui-list__ul--check--indigo ui-list--zero-padding" data-use-css="true"> <li>Test quickly with unmoderated user testing</li> <li>View analytics screen-by-screen or via video</li> <li>Unlimited number of testers</li> </ul> <a class="ui-btn ui-btn--default ui-btn--sm gaEventTracker" aria-label="Get Started with Design Testing" rel="noopener" href="/products/indigo-design/user-testing" target="_blank" data-animation="fadeInUp">Learn More</a></div> </div> </div> </div> </section>  <section class="be-section ui-callout--indigo"> <div class="be-row be-wrap clearfix padding-top-bottom-50 zero-padding-top"> <div class="ui-callout__content one-col column-block clearfix text--align-center"> <h3>Try Indigo.Design for Free</h3> <a class="ui-btn ui-btn--default ui-btn--sm mchNoDecorate gaEventTracker trackCTA" rel="noopener" href="https://cloud.indigo.design/register?resources=true" target="_blank" data-ga-category="Download Button" data-ga-action="Click" data-ga-label="Indigo.Design Ent - Experience" data-xd-ga-action="Sign up" data-xd-ga-label="Indigo.Design Enterprise | Cloud">Try It Now</a></div> <img class="ui-callout__img" role="presentation" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-reviews-illustration-without-bar.svg?v=201912171352" alt="UX designer using his tablet."></div> </section>  <section class="be-section clearfix padding-top-bottom-50 overflow--hidden bgColor--san-marino bg--darker"> <div class="be-row be-wrap clearfix"> <div class="one-col clearfix text--align-center"><header class="h-group h-group--mar-bottom-none"> <h2>Reviews</h2> </header> <div class="features-block features-block--list text--align-left" style="margin: auto; max-width: 900px;"> <article class="features-block__item features-block__item--third"> <blockquote class="features-block__content"><img style="width: 60px;" role="presentation" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-4-star.svg" alt="Star Rating: 4 out of 5 stars"> <p>There isn't any prototyping tool with this kind of animation capabilities. The best for the money. There is a lot of intuitive features for interactive prototyping, usability testing, and collaboration. You can copy/paste your designs from Sketch and animate your interactions in any possible way.</p> <footer class="font-size--sm line-height--normal font-weight--bold color--alto"><span class="display--block">Pavol D.</span><span class="display--block">UX Designer</span></footer></blockquote> </article> <article class="features-block__item features-block__item--third"> <blockquote class="features-block__content"><img style="width: 75px;" role="presentation" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-5-star.svg" alt="Star Rating: 5 out of 5 stars"> <p>Indigo is a great replacement to wireframing and prototyping tools like Axure and Balsamiq. Ability to create interactive prototypes with animations quickly and also to sync with Sketch to reuse artifacts. We are also starting to include usability testing in our workflows.</p> <footer class="font-size--sm line-height--normal font-weight--bold color--alto"><span class="display--block">Anonymous - Capterra</span><span class="display--block">Computer Networking</span></footer></blockquote> </article> <article class="features-block__item features-block__item--third"> <blockquote class="features-block__content"><img style="width: 75px;" role="presentation" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-5-star.svg" alt="Star Rating: 5 out of 5 stars"> <p>Best tool on the market. We looked at all the wireframing tools on the market, and none have the features that Indigo has. The ability to be able to deploy wireframes as a site is invaluable to our proposal process.</p> <footer class="font-size--sm line-height--normal font-weight--bold color--alto"><span class="display--block">Michael S.</span><span class="display--block">Software architect </span></footer></blockquote> </article> <article class="features-block__item features-block__item--third"> <blockquote class="features-block__content"><img style="width: 60px;" role="presentation" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-4-star.svg" alt="Star Rating: 4 out of 5 stars"> <p>Great program for non-technical managers. Display a fully functioning software w/ no coding necessary.<br>Lets me focus on creative and UI more than anything else. This is extremely important as recruiting mentors and team members relied heavily on demonstrating this UI even though none of our co-founders have any coding experience.</p> <footer class="font-size--sm line-height--normal font-weight--bold color--alto"><span class="display--block">Luke P.</span><span class="display--block">Co-Founder</span></footer></blockquote> </article> <article class="features-block__item features-block__item--third"> <blockquote class="features-block__content"><img style="width: 75px;" role="presentation" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-5-star.svg" alt="Star Rating: 5 out of 5 stars"> <p>I have worked in Balsamiq and made the switch to Indigo and LOVE the enhanced features.<br> Extremely easy to design and setup interactions. Testing is a breeze! The training videos are GREAT!</p> <footer class="font-size--sm line-height--normal font-weight--bold color--alto"><span class="display--block">Brenda A.</span><span class="display--block">Business Implementation Consultant</span></footer></blockquote> </article> <article class="features-block__item features-block__item--third"> <blockquote class="features-block__content"><img style="width: 75px;" role="presentation" src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-5-star.svg" alt="Star Rating: 5 out of 5 stars"> <p>The biggest benefit is that we were able to produce what the end product would look like before we had developed it, and we could demo it to get user feedback. Controls used in the screens matched bootstrap, etc. making it easier for developers to deliver as the prototype matches what can be produced.</p> <footer class="font-size--sm line-height--normal font-weight--bold color--alto"><span class="display--block">Frederick N.</span><span class="display--block">Development Team Lead</span></footer></blockquote> </article> </div> </div> </div> <div class="text--align-center padding-top-bottom-50 zero-padding-bottom"> <div class="display--inline-block hpad--sm"><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/placeholder1x1.png" alt="humana" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/humana.png?v=201807190600"></div> <div class="display--inline-block hpad--sm"><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/placeholder1x1.png" alt="intel" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/intel.png?v=201807190600"></div> <div class="display--inline-block hpad--sm"><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/placeholder1x1.png" alt="mellon" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/mellon.png?v=201807190600"></div> <div class="display--inline-block hpad--sm"><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/placeholder1x1.png" alt="pearson" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/pearson.png?v=201807190600"></div> <div class="display--inline-block hpad--sm"><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/placeholder1x1.png" alt="thomson reuters" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/thomson_reuters.png?v=201807190600"></div> </div> </section>  <section id="pricing" class="be-section clearfix padding-top-bottom-50 zero-padding-bottom"> <div class="be-row be-wrap text--align-center"> <div class=""><header class="h-group h-group--mar-bottom-none"> <h2>Indigo.Design Pricing</h2>  </header> <div class="features-block features-block--list text--align-left pricing-blocks--container-xs"> <div class="features-block__item features-block__item--fourth"> <div class="features-block__content ui-card ui-card--cta bgColor--white-smoke"> <div class="pricing-blocks__item text--align-left" style="padding: 0; border: 0;"><header> <h3 class="pricing-blocks__product">Indigo.Design Essential</h3> <span class="pricing-blocks__price">$55<span class="font-size--xs">/mo</span> </span> <span class="pricing-blocks__subtitle" style="margin-top: -10px; font-size: 12px;">per user or $525 /yr</span></header> <div class="pricing-blocks__content line-height--normal" style="font-size: 14px;"> <ul> <li>Powerful, rapid prototyping for unlimited web, mobile, and desktop prototypes in the cloud</li> <li>Remote User Testing with Analytics</li> <li>Video Replays for User Tests</li> <li>Group and Team Collaboration</li> </ul> </div> </div> <div><a class="ui-btn ui-btn--default ui-btn--sm ui-btn--invert" style="width: 60%;" rel="noopener" href="https://account.infragistics.com/billing/buy/indigo-design-pro-monthly" target="_blank">Buy Now</a></div> </div> </div>   </div> </div> </div> </section>  <section id="sample-apps" class="be-section clearfix padding-top-bottom-50 zero-padding-bottom overflow--hidden"> <div class="be-row be-wrap clearfix"> <div class="one-col clearfix text--align-center"></div> </div> </section>  <section id="learning-library" class="be-section clearfix padding-top-bottom-50 zero-padding-bottom overflow--hidden"> <div class="be-row be-wrap clearfix"> <div class="one-col column-block clearfix text--align-center"><header class="h-group h-group--mar-bottom-none"> <h2>Learning Resources</h2> <p>Get started with the resources you need to create amazing user experiences.</p> <a class="ui-link ui-link--arrow-right" href="/products/indigo-design/help/video-tutorials.html">Learn More</a></header> <div class="features-block features-block--list text--align-center"> <div class="features-block__item features-block__item--third"> <div class="features-block__content"><a class="mfp-video--no-rel ui-thumb__container" aria-label="Watch the Indigo.Design Tour" href="https://www.youtube.com/watch?v=KKu2wSU2emM&show_list=1&rel=0&autoplay=1&list=PLZ4rRHIJepBsRHw8oSj6oj00_FyBZHsmW"><span class="ui-thumb__icon ui-thumb__icon--play"> </span><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/indigo-design/indigo-design-learning-library-new-480.jpg" alt="General Overview of Indigo.Design System" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-learning-library-indigo-design-tour.jpg?v=202007231000"> </a> <p>Indigo.Design Tour</p> </div> </div> <div class="features-block__item features-block__item--third"> <div class="features-block__content"><a class="mfp-video--no-rel ui-thumb__container" aria-label="Watch Installing the Sketch UI Kits" href="https://www.youtube.com/watch?v=4KCptCeNVFg&show_list=1&rel=0&autoplay=1&list=PLZ4rRHIJepBsRHw8oSj6oj00_FyBZHsmW"><span class="ui-thumb__icon ui-thumb__icon--play"> </span><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/indigo-design/indigo-design-learning-library-new-480.jpg" alt="Install Sketch UI Kits" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-learning-library-installing-sketch-ui-kits.jpg"> </a> <p>Installing the Sketch UI Kits</p> </div> </div> <div class="features-block__item features-block__item--third"> <div class="features-block__content"><a class="mfp-video--no-rel ui-thumb__container" aria-label="Watch Building Your First Artboard in Sketch" href="https://www.youtube.com/watch?v=zVIH5_xy3rE&show_list=1&rel=0&autoplay=1&list=PLZ4rRHIJepBsRHw8oSj6oj00_FyBZHsmW"><span class="ui-thumb__icon ui-thumb__icon--play"> </span><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/indigo-design/indigo-design-learning-library-new-480.jpg" alt="Using Sketch to build your first artboard" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-learning-library-building-first-artboard-sketch.jpg"> </a> <p>Building Your First Artboard in Sketch</p> </div> </div> <div class="features-block__item features-block__item--third"> <div class="features-block__content"><a class="mfp-video--no-rel ui-thumb__container" aria-label="Watch User Testing Overview" href="https://www.youtube.com/watch?v=4GnF4hD_4cM&show_list=1&rel=0&autoplay=1&list=PLZ4rRHIJepBsRHw8oSj6oj00_FyBZHsmW"><span class="ui-thumb__icon ui-thumb__icon--play"> </span><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/indigo-design/indigo-design-learning-library-new-480.jpg" alt="User Testing Overview" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-learning-library-user-testing-overview.jpg"> </a> <p>User Testing Overview</p> </div> </div> <div class="features-block__item features-block__item--third"> <div class="features-block__content"><a class="mfp-video--no-rel ui-thumb__container" aria-label="Watch Getting Started with Prototyping" href="https://www.youtube.com/watch?v=7cgCLyEo-zI&show_list=1&rel=0&autoplay=1&list=PLZ4rRHIJepBsRHw8oSj6oj00_FyBZHsmW"><span class="ui-thumb__icon ui-thumb__icon--play"> </span><img class="b-lazy" src="https://static.infragistics.com/marketing/Website/products/indigo-design/indigo-design-learning-library-new-480.jpg" alt="How to get started with Prototyping in Indigo.Design" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-learning-library-getting-started-protoyping.jpg"> </a> <p>Getting Started with Prototyping</p> </div> </div> <div class="features-block__item features-block__item--third"></div> </div> </div> </div> </section>   <section id="request-demo" class="be-section padding-top-bottom-50"> <div class="be-row be-wrap"> <div class="one-col column-block clearfix text--align-center"> <div class="mkto-form__container mw--800 align--center"><header class="h-group h-group--mar-bottom-sm"> <h2>Contact Us About Indigo.Design</h2> <p class="mw--900 align--center">Indigo.Design is a complete digital product design platform, with the tools teams need to design, build, and test applications faster. To get more information, please complete the form below and a member of our team will follow-up to confirm and schedule at a date and time that will work with you.</p> </header> <div class="text--align-left"> <div class="loader__container" style="min-height: 200px;"> <div class="loader loader--bar"></div> </div> <form id="lead-form" class="lead-tracker-form ui-form " data-form-theme="" style="display: none;"> <div class="be-row be-wrap clearfix"> <span class="ui-form__required-note">required field</span> <div id="recaptchaError" class="field-validation-error-msg" style="display: none;">Unfortunately, Google has considered you a bot. If you have an account, please <a href="/login?ReturnUrl=http://www.infragistics.com/products/indigo-design" title="sign in">sign in</a> to validate your status and fill form out again. Alternatively, please feel free to contact <a href="mailto:sales@infragistics.com" title="sales@infragistics.com">sales@infragistics.com</a> to obtain the asset you were looking for or choose to schedule a demo of our products.</div> <div id="formInvalidConditionForm" class="field-validation-error-msg" style="display: none;">Please accept the form terms to submit successfully</div> <div id="formInvalidEmail" class="field-validation-error-msg" style="display: none;">This email address doesn't appear valid. Please update and try again</div> <div id="formInvalidFreeEmail" class="field-validation-error-msg" style="display: none;">Please use a business email address</div> <div id="formInvalidDisposableEmail" class="field-validation-error-msg" style="display: none;">Please use a business email address</div> <div id="zoomRequiredFields" class="field-validation-error-msg" style="display: none;">Email and Name are required to register for the webinar.</div> <div id="zoomAlreadyRegisterLimit" class="field-validation-error-msg" style="display: none;" data-zoom-error="429">Provided email has already registered for this webinar and has exceeded the daily limit for registering</div> <div id="zoomHostNoRegister" class="field-validation-error-msg" style="display: none;" data-zoom-error="3027">Webinar host unable to register. Please use another email.</div> <div id="zoomWebinarOver" class="field-validation-error-msg" style="display: none;" data-zoom-error="3038">Unfortunately, this webinar is over and can no longer register.</div> <div id="zoomGeneralErrors" class="field-validation-error-msg" style="display: none;" data-zoom-error="400">Webinar registration failed due some internal errors. If you continue to experience issues, please contact <a href="mailto:support@infragistics.com" title="support@infragistics.com">support@infragistics.com</a> for help.</div> </div> <div class="be-row be-wrap clearfix"> <div class="one-col column-block clearfix ui-form__input-group"> <input id="Email" name="Email" class="sfInput required" aria-labelledby="lblEmail" type="email" data-val-length-max="60" data-val-length="Email cannot exceed 60 characters"> <label id="lblEmail" for="Email" class="ui-form__label ui-form__label--required">Business Email</label> </div> </div> <div class="be-row be-wrap clearfix"> <div class="one-half column-block ui-form__input-group"> <input id="FirstName" name="FirstName" class="sfInput required" aria-labelledby="lblFirstName" type="text" data-val-length-max="100" data-val-length="First Name cannot exceed 100 characters"> <label id="lblFirstName" for="FirstName" class="ui-form__label ui-form__label--required">First Name</label> </div> <div class="one-half column-block ui-form__input-group"> <input id="LastName" name="LastName" class="sfInput required" aria-labelledby="lblLastName" type="text" data-val-length-max="100" data-val-length="Last Name cannot exceed 100 characters"> <label id="lblLastName" for="LastName" class="ui-form__label ui-form__label--required">Last Name</label> </div> </div> <div class="be-row be-wrap clearfix"> <div class="one-half column-block ui-form__input-group"> <input id="Company" name="Company" class="sfInput required" aria-labelledby="lblCompany" type="text" data-val-length-min="2" data-val-length-max="50" data-val-length="Company name must be between 2 and 50 characters" value=""> <label id="lblCompany" for="Company" class="ui-form__label ui-form__label--required">Company Name</label> </div> <div class="one-half column-block ui-form__input-group"> <input id="Title" name="Title" class="sfInput" aria-labelledby="lblJobTitle" type="text" data-val-length-min="2" data-val-length-max="50" data-val-length="Job Title must be between 2 and 50 characters." value=""> <label id="lblJobTitle" for="Title" class="ui-form__label">Job Title</label> </div> </div><div class="be-row be-wrap clearfix"> <div class="one-half column-block ui-form__input-group"> <input id="Phone" name="Phone" class="sfInput " aria-labelledby="lblPhone" type="tel" data-val-length-max="25" data-val-length="Phone cannot exceed 25 characters" value=""> <label id="lblPhone" for="Phone" class="ui-form__label ">Phone</label> </div> </div>  <div class="be-row be-wrap clearfix"> <div class="one-col column-block"> <label for="Message" id="lblMessage_Checkbox" class="ui-form__label">What are you interested in:</label> <div class="ui-form__checkbox-group"> <label id="lblMessage_Checbox_0" for="checkbox_choice_0" class="ui-form__checkbox-container" style="display: inline-block;"> <span>Prototyping</span> <input name="Message" id="checkbox_choice_0" type="checkbox" value="Prototyping" aria-required="true" aria-labelledby="lblMessage_Checkbox lblMessage_Checbox_0" class=""> <div class="ui-form__checkbox"> </div> </label> <label id="lblMessage_Checbox_1" for="checkbox_choice_1" class="ui-form__checkbox-container" style="display: inline-block;"> <span>User Testing</span> <input name="Message" id="checkbox_choice_1" type="checkbox" value="User Testing" aria-required="true" aria-labelledby="lblMessage_Checkbox lblMessage_Checbox_1" class=""> <div class="ui-form__checkbox"> </div> </label> <label id="lblMessage_Checbox_2" for="checkbox_choice_2" class="ui-form__checkbox-container" style="display: inline-block;"> <span>Code Generation</span> <input name="Message" id="checkbox_choice_2" type="checkbox" value="Code Generation" aria-required="true" aria-labelledby="lblMessage_Checkbox lblMessage_Checbox_2" class=""> <div class="ui-form__checkbox"> </div> </label> <label id="lblMessage_Checbox_3" for="checkbox_choice_3" class="ui-form__checkbox-container" style="display: inline-block;"> <span>Embed</span> <input name="Message" id="checkbox_choice_3" type="checkbox" value="Embed" aria-required="true" aria-labelledby="lblMessage_Checkbox lblMessage_Checbox_3" class=""> <div class="ui-form__checkbox"> </div> </label> <label id="lblMessage_Checbox_4" for="checkbox_choice_4" class="ui-form__checkbox-container" style="display: inline-block;"> <span>Other</span> <input name="Message" id="checkbox_choice_4" type="checkbox" value="Other" aria-required="true" aria-labelledby="lblMessage_Checkbox lblMessage_Checbox_4" class=""> <div class="ui-form__checkbox"> </div> </label> </div> </div> </div> <div class="clearfix"></div> <div class="clear"></div> <div class="be-row be-wrap clearfix"> <div class="one-col column-block"> <label id="LblacceptGDPRFormSubmission" for="acceptGDPRFormSubmission" class="ui-form__checkbox-container ui-form__label" style="display: inline-block;"> <span id="LblacceptGDPRFormSubmission" class="label__text"> I understand and agree to the terms of Infragisitcs' <a href="/legal/terms-of-use" title="Terms of Use" target="_blank">Terms of Use</a> and <a href="/legal/privacy" title="Privacy Policy" target="_blank">Privacy Policy</a> </span> <input name="acceptGDPRFormSubmission" id="acceptGDPRFormSubmission" type="checkbox" value="yes" aria-required="true" aria-labelledby="LblacceptGDPRFormSubmission" class=""> <div class="ui-form__checkbox"> </div> </label> </div> </div> <div class="be-row be-wrap clearfix"> <button id="submit" type="submit" class="ui-btn ui-btn--default ui-btn--sm" disabled>Submit</button> </div> </form> <div class="thankyou__container" style="display: none;"> <div><header class="text--align-center h-group h-group--mar-bottom-sm"><svg enable-background="new 0 0 24 24" height="24px" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill: #19AD87;width: 45px;height: 45px;"><g><g><path d="M12,0C5.373,0,0,5.373,0,12c0,6.628,5.373,12,12,12c6.627,0,12-5.372,12-12C24,5.373,18.627,0,12,0z M19.754,9.561 l-8.607,8.607c-0.176,0.177-0.462,0.177-0.637,0l-1.272-1.285c-0.175-0.176-0.462-0.464-0.636-0.642l-2.96-3.112 c-0.087-0.087-0.133-0.21-0.133-0.327c0-0.115,0.046-0.227,0.133-0.314l1.297-1.169c0.088-0.09,0.205-0.134,0.321-0.134 c0.114,0.001,0.228,0.046,0.315,0.134l2.936,2.995c0.175,0.178,0.461,0.178,0.637,0l6.699-6.681c0.176-0.177,0.461-0.177,0.636,0 l1.272,1.285C19.93,9.094,19.93,9.384,19.754,9.561z"></path></g></g></svg><h2>Thank you!</h2><p class="mw--900 align--center">Thank you for requesting a demonstration of Indigo.Design - a complete design-to-code system – integrating prototyping, usability testing, and code generation. Your information has been submitted. Our team will be contacting you shortly via email.</p></header></div> </div> <script src="https://www.google.com/recaptcha/api.js?render=6Lc-MFAaAAAAAIWi7UOrSUfUZnVmDUSsXjzS4BgY"></script> <script> if ('') { document.getElementById('Email').setAttribute('readonly', true); } if ('') { document.getElementById('FirstName').setAttribute('readonly', true); } if ('') { document.getElementById('LastName').setAttribute('readonly', true); } window.addEventListener("load", function () { // leadTracker Settings var settings = { macro: 'LeadTracker', lang: 'en', reaptchaKey: '6Lc-MFAaAAAAAIWi7UOrSUfUZnVmDUSsXjzS4BgY', redirectUrl: '', formContainerId: '', productCode: 'A6', leadProductCode: '', packageName: '', productResourceType: '', osSupport: '', installerType: '', eventTypeParam: 'demo request', eventDetailParam: 'form submitted', prohibitFreeMail: false, prohibitDisposableMail: false, // Could possibly be removed when we setup conditional POST of values showRequestDemo: false, zoomWebinarId: '', googleEventType: 'Form Submit', googleEventLabel: 'Indigo.Design - Request Demo', googleEventTypeDownload: '', googleEventLabelDownload: '', downloadUrl: '', honeypot: '' }; leadTracker.execute(settings); }); </script> </div> </div> </div> </div> </section> </div>  <section id="conversation" class="be-section clearfix padding-top-bottom-50 zero-padding-bottom"> <div class="be-row be-wrap clearfix text--align-center"><header class="h-group"> <section id="conversation" class="be-section clearfix padding-top-bottom-50 zero-padding-bottom"> <div class="be-row be-wrap clearfix text--align-center"><header class="h-group"> <h2>Join the Conversation</h2> </header></div> <div class="be-row be-wrap clearfix text--align-left"> <section class="bt__posts bt__posts--tags-d-none bt__posts--content-mb-0" data-blog-type="blog-card" data-blog-columns="3"> <div id="api-content"></div> </section> </div> </section> </header></div> </section> <div data-theme="indigo-studio"> <section id="faqs" class="be-section clearfix padding-top-bottom-50 zero-padding-bottom"> <div class="be-row be-wrap clearfix text--align-center"><header class="h-group"> <h2><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Frequently Asked Questions</span></span></h2> </header></div> <div class="be-row be-wrap clearfix"> <div class="one-col column-block"> <section class="ui-accordion" data-accordion-style="clean" data-accordion-type="" data-accordion-icon="arrows"> <h3 class="hidden--visual">Questions and Answers for Indigo Design</h3> <div id="indigo-faqs" class="ui-accordion align--center" style="max-width: 850px;"> <h4 class="ui-accordion__header">What is design to code?</h4> <div class="ui-accordion__content"> <p>Design to code is a process where a product team (including design and development) use a design system, which includes user interface (UI) components, UI patterns and styling options that are represented and back by real-world components. For a team, this means that anything ‘designed’ and be turned into ‘code’. The important distinction between design to code and a ‘code-generator’ is that the code output in a design to code process is clean, usable, and customizable code. Meaning that even the top developers in your company will accept this code output and equal of better to what they would have written by hand.</p> <p>When a design and development team is in sync, they can use design to code solutions to accelerate product delivery. The real benefit of design to code with Indigo.Design is the enormous time savings - everything the design team creates in Sketch using the Indigo.Design design system, matches our Ignite UI for Angular UI. With the click of a button, the development team can generate high-quality HTML, CSS, and Angular code, from any design from your UX team.</p> </div>  <h4 class="ui-accordion__header">What is a design to code system?</h4> <div class="ui-accordion__content"> <p>A design to code system helps teams and organizations streamline app creation with a set of tools and best practices that accelerate the process of taking a design and turning it into usable code. Historically, product development and design teams will work in solos, there is a collaboration gap between design and development which slows down innovation. With a deign to code system, a team can have seamless collaboration and eliminate design hand offs, reduce costly iterations, and enable true UX Design-Development collaboration.</p> <p>The foundation of a reliable and usable design to code system is ensuing there is one design system for UX designers and developers. With an agreed upon corporate design system, back by reusable UI kits with are based on real component libraries, anything that is designed in a design to code system can get turned into usable code output.</p> </div>  <h4 class="ui-accordion__header">Why design to code is a good solution for your business?</h4> <div class="ui-accordion__content"> <p>And today’s competitive market it is critical that every potential advantage you have in reducing time to market and saving costs is considered. A design to code system offers both cost savings and time savings. If your design team can follow a best-practice iterative design using their favorite design tool like Sketch, the Indigo.Design cloud digital product design platform can get markup, styling, do user testing and usability studies (remote and unmoderated) at scale and ultimately get pixel-perfect code output from a design. With tooling like this to support your teams, you have a leg up on your competition.</p> <p>Historically, the handoff of designs between a design team and a development team is one of the largest hidden costs of software development. Research shows that 60% of development time is on the user interface, but the tooling to get from an approved design to the right, bug-free code is limited. With Indigo.Design as your design to code solution, you eliminate any slow-down or mistakes in the form of UX bugs that drive this cost up (in terms of time and real money).</p> <p>Any UX bug fixed during an iterative design phase costs one dollar to fix / change, while that same bug released into the market can cost up to $100 to fix. And these are just examples - you can add 2 to 3 zeros to any one of those numbers – to understand the real cost of letting low-quality design and UX bugs get out the door.</p> <p>Using a design to code system eliminates these costly errors, and even better, the handoff from design to development in a design to code system generates pixel-perfect HTML and CSS and TypeScript that your development team can then use to build out the remainder of their high-quality application with no UI/UX bugs.</p> </div>  <h4 class="ui-accordion__header">What is Indigo.Design?</h4> <div class="ui-accordion__content"> <p>Indigo design is a digital product design platform that helps teams accelerate design to code. Indigo.Design has four key pillars:</p> <ol> <li>Indigo.Design is a prototyping tool</li> <li>Indigo.Design is a user testing tool</li> <li>Indigo.Design is a design to code tool</li> <li>Indigo.Design is a WYSIWYG app builder</li> </ol> <p>We created Indigo.Design to helps team’s delivery higher quality software faster than ever before. Indigo.Design reduces the high cost and time-consuming handoffs from design teams to development teams. Once a design is uploaded to the Indigo.Design cloud, teams can iterate on their prototype, collaborate with stakeholders, get markup and styling, perform unlimited remote user testing studies, and ultimately generate pixel-perfect code from designs.</p> <p>With indigo design you can use any piece of the application - any one of the four pillars - as features are designed to work seamlessly together or independently from each other.</p> <ul> <li>If you are a design team and you would like to use the prototyping and user testing feature, you can.</li> <li>If you are development team and you want to get pixel-perfect code from Sketch designs, you can choose to use the Visual Studio Code plug-in to get HTML, TypeScript, and CSS directly in your Angular app.</li> </ul> <p>Indigo design is a complete solution as a digital product design platform that enables huge cost savings faster time to market – but best of all - certainty in outcomes if all capabilities are use in your software development process.</p> </div>  <h4 class="ui-accordion__header">What is the latest version of Indigo.Design?</h4> <div class="ui-accordion__content"> <p>Indigo.Design is a SaaS-based product that is always up to date. When you log into the Indigo.Design cloud at <a href="https://cloud.indigo.design">https://cloud.indigo.design</a>, you are always using the latest version of the product. With Indigo.Design, the latest version includes the latest versions of our <a href="/products/ignite-ui-angular">Angular components</a> in the Ignite UI for Angular toolset and the most up to date Sketch UI kits in the Indigo.Design design system.</p> </div>  <h4 class="ui-accordion__header">What is a Sketch UI kit?</h4> <div class="ui-accordion__content"> <p>A Sketch UI kit is a collection of libraries (like sticker sheets) that include UI components, UI patterns and even complete screens. The Indigo.Design UI Kits for Sketch takes an “Atomic Design” approach by providing three libraries.</p> <ul> <li>The <strong>Styling</strong> library has sub-atomic pieces such as colors, shadows, typography styles, and icon glyphs that define the looks of the Atoms and Molecules found in the Components library.</li> <li>The <strong>Component</strong> library are collections of atoms that represent full-featured components, like charts, grids, etc.</li> <li>The <strong>Patterns</strong> library is a collection of higher-level collections of components like login forms, user profiles, and detail pages.</li> </ul> <p>With Sketch UI kits, a design team can build a consistent, branded digital experiences for any app in the enterprise. With Indigo.Design, the Sketch UI kits are partnered with Angular UI components, enabling a design to code system that can significantly accelerate product delivery.</p> </div>  <h4 class="ui-accordion__header">What is Sketch to code?</h4> <div class="ui-accordion__content"> <p>With Indigo.Design, the worlds leading digital product design platform, you can upload a complete sketch prototype with unlimited screens and unlimited interactions and turn that into real, running Angular code.</p> <p>Sketch to code allows you to do your complete iterative design process using your favorite design tool, like Sketch, and then hand that design off to a development team who can then generate code from your Sketch design. The benefit with going from Sketch to code is the enormous time savings and cost savings from having your development teams do the same repetitive work in screen design that can be done with tooling. With Indigo.Design as the intermediary cloud platform between your Sketch design and Visual Studio Code you have the additional benefits of doing additional interactive prototyping, or even creation of user tests and usability studies on the prototype and then share those with an unlimited number of users for instant feedback.</p> </div>  <h4 class="ui-accordion__header">Can I turn Sketch designs to code with Indigo.Design?</h4> <div class="ui-accordion__content"> <p>Indigo.Design fully supports turning Sketch files to code. This is done by uploading or synchronizing your Sketch prototype to the Indigo.Design cloud. Once your Sketch files are uploaded to the Indigo.Design cloud your development team can use the Visual Studio Code that code plug-in that lets them select individual components, full screens or the entire application and generate real HTML code, TypeScript, and CSS. You can literally go from Sketch to code in 3 easy steps.</p> <p>With Sketch to code, the time and money savings are enormous. Better yet, your time to market is faster than your competition with pixel-perfect app screens directly from Sketch designs.</p> </div>  <h4 class="ui-accordion__header">Is Indigo.Design a user testing tool?</h4> <div class="ui-accordion__content"> <p>Indigo Design is a comprehensive <a href="/products/indigo-design/user-testing">user testing tool</a>. With indigo design you can upload any image-based prototype or Sketch design to the Indigo.Design cloud and then create user tests and usability studies. With Indigo.Design, user testing is achieved with a simple point and click tool that records your actions and turns those actions into the user test that you will then share with your users, or any group of users that you’d like to get feedback from.</p> <p>With Indigo.Design user testing, you do not need to write any code, any scripting, or have any advanced knowledge to perform a user test. User testing with Indigo.Design is as easy as creating a PowerPoint slide. If you are a product manager or developer and you just want to do a quick user test on a handful of screenshots, you can upload the screenshots to the Indigo.Design cloud and create a prototype with the hotspot prototyping tool then turn that into a user test with one click.</p> <p>Our goal was to make it simple for any person with any skill to do user testing. You do not need to be a UX researcher with an advanced degree to create a sophisticated, detailed user test and then get real-time analytics on your user test results report with Indigo.Design.</p> </div>  <h4 class="ui-accordion__header">Can I do remote user testing with Indigo.Design?</h4> <div class="ui-accordion__content"> <p>Indigo.Design is a comprehensive cloud platform that includes user testing and unmoderated, remote user testing for any type of application or design. You can upload complete Sketch prototypes or images (screenshots of your app) and use the Indigo.Design hotspot prototyping tool to create an interactive prototype, which would be the foundation for your user test and usability study. That user test can contain any number of questions that you were trying to get UX feedback on. Once you’ve created your user test, which you can easily do with the point-and-click recorder in Indigo.Design, you can share that with any number of testers by simply entering their emails or sending them a hyperlink via email.</p> <p>The benefit of unmoderated, remote user testing - especially with COVID-19 - is that you’re not required to be face-to-face with users. You can get very fast results and make very rapid iterative changes in your design with real time data coming back in the analytics of your user testing report. You are not limited to the number of testers and you’re not limited by the number of questions per prototype. You can send your user test to an unlimited number of users and they can choose to go through an unlimited number of questions to get you the results you need to improve your prototype before you start to write code.</p> </div> </div> </section> </div> </div> </section>  <section class="be-section overflow--hidden bg--dark bgColor--port-gore p-relative"> <div class="ie-hide indigo-border--bottom"> <svg class="display--block p-absolute" style="top: 0;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 343"><path d="M220 215.4L1660.7 54.3c99.7-11.2 193.7 25.3 259.3 91.3V-1.1H0V343c50.4-69 128.4-117.4 220-127.6z" fill="#fff"/></svg> </div> <div class="be-row be-wrap clearfix"> <div class="one-col column-block clearfix padding-top-bottom-50"> <div class="features-block"> <div class="features-block__item features-block--align-top" style="padding: 0;"> <div class="features-block__image features-block__image--left"><img class="b-lazy" title="Cartoon of a team depicting collaboration efforts" alt="Cartoon of a team depicting collaboration efforts through prototyping and user testing" data-src="https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo.design-working-together.svg"></div> <div class="features-block__content"><header class="h-group h-group--mar-bottom-sm"> <h2>Experience a Complete Design-to-Code System – Try Indigo.Design for Free</h2> </header> <div class="ui-btn-group text--align-center-xxs"><a class="ui-btn ui-btn--default ui-btn--sm mchNoDecorate gaEventTracker trackCTA" rel="noopener" href="https://cloud.indigo.design/register?resources=true" target="_blank" data-ga-category="Download Button" data-ga-action="Click" data-ga-label="Indigo.Design Ent - Experience" data-xd-ga-action="Sign up" data-xd-ga-label="Indigo.Design Enterprise | Cloud">Try It Now</a></div> </div> </div> </div> </div> </div> </section> </div> <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Product", "name": "Indigo.Design", "image": [ "https://static.infragistics.com/marketing/Website/products/indigo-design/2019/indigo-design-static-shot-header-1600.png" ], "description": "Be a hero using the tools you love. Design in Sketch, Develop in Visual Studio Code and as a team deliver great user experiences with no compromise! Save hours, days and even weeks with Indigo.Design—a complete design-to-code system including prototyping, usability studies, inspect tool, and code generation.", "sku": "0446310786", "mpn": "925872", "brand": { "@type": "Organization", "name": "Infragistics" }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.3", "reviewCount": "53", "sameAs":"https://www.capterra.com/p/171094/Indigo-Studio/" }, "review": [ { "@type": "Review", "reviewBody":"There isn't any prototyping tool with this kind of animation capabilities. The best for the money. There is a lot of intuitive features for interactive prototyping, usability testing, and collaboration. You can copy/paste your designs from Sketch and animate your interactions in any possible way.", "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" }, "author": { "@type": "Person", "name": "Pavol D." } }, { "@type": "Review", "reviewBody":"Indigo is a great replacement to wireframing and prototyping tools like Axure and Balsamiq. Ability to create interactive prototypes with animations quickly and also to sync with Sketch to reuse artifacts. We are also starting to include usability testing in our workflows.", "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" }, "author": { "@type": "Person", "name": "Anonymous" } }, { "@type": "Review", "reviewBody":"Best tool on the market. We looked at all the wireframing tools on the market, and none have the features that Indigo has. The ability to be able to deploy wireframes as a site is invaluable to our proposal process.", "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" }, "author": { "@type": "Person", "name": "Michael S." } }, { "@type": "Review", "reviewBody":"Great program for non-technical managers. Display a fully functioning software w/ no coding necessary. Lets me focus on creative and UI more than anything else. This is extremely important as recruiting mentors and team members relied heavily on demonstrating this UI even though none of our co-founders have any coding experience.", "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" }, "author": { "@type": "Person", "name": "Luke P." } }, { "@type": "Review", "reviewBody":"I have worked in Balsamiq and made the switch to Indigo and LOVE the enhanced features. Extremely easy to design and setup interactions. Testing is a breeze! The training videos are GREAT!", "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" }, "author": { "@type": "Person", "name": "Brenda A." } }, { "@type": "Review", "reviewBody":"The biggest benefit is that we were able to produce what the end product would look like before we had developed it, and we could demo it to get user feedback. Controls used in the screens matched bootstrap, etc. making it easier for developers to deliver as the prototype matches what can be produced.", "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" }, "author": { "@type": "Person", "name": "Frederick N." } } ], "offers": { "@type": "Offer", "url": "https://www.infragistics.com/products/indigo-design/pricing", "priceCurrency": "USD", "price": "0", "availability": "https://schema.org/InStock" } } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{ "@type": "Question", "name": "What is design to code?", "acceptedAnswer": { "@type": "Answer", "text": "<p>Design to code is a process where a product team (including design and development) use a design system, which includes user interface (UI) components, UI patterns and styling options that are represented and back by real-world components. For a team, this means that anything ‘designed’ and be turned into ‘code’. The important distinction between design to code and a ‘code-generator’ is that the code output in a design to code process is clean, usable, and customizable code. Meaning that even the top developers in your company will accept this code output and equal of better to what they would have written by hand.</p> <p>When a design and development team is in sync, they can use design to code solutions to accelerate product delivery. The real benefit of design to code with Indigo.Design is the enormous time savings - everything the design team creates in Sketch using the Indigo.Design design system, matches our Ignite UI for Angular UI. With the click of a button, the development team can generate high-quality HTML, CSS, and Angular code, from any design from your UX team.</p>" } },{ "@type": "Question", "name": "What is a design to code system?", "acceptedAnswer": { "@type": "Answer", "text": "<p>A design to code system helps teams and organizations streamline app creation with a set of tools and best practices that accelerate the process of taking a design and turning it into usable code. Historically, product development and design teams will work in solos, there is a collaboration gap between design and development which slows down innovation. With a deign to code system, a team can have seamless collaboration and eliminate design hand offs, reduce costly iterations, and enable true UX Design-Development collaboration.</p> <p>The foundation of a reliable and usable design to code system is ensuing there is one design system for UX designers and developers. With an agreed upon corporate design system, back by reusable UI kits with are based on real component libraries, anything that is designed in a design to code system can get turned into usable code output.</p>" } },{ "@type": "Question", "name": "Why design to code is a good solution for your business?", "acceptedAnswer": { "@type": "Answer", "text": "<p>And today’s competitive market it is critical that every potential advantage you have in reducing time to market and saving costs is considered. A design to code system offers both cost savings and time savings. If your design team can follow a best-practice iterative design using their favorite design tool like Sketch, the Indigo.Design cloud digital product design platform can get markup, styling, do user testing and usability studies (remote and unmoderated) at scale and ultimately get pixel-perfect code output from a design. With tooling like this to support your teams, you have a leg up on your competition.</p> <p>Historically, the handoff of designs between a design team and a development team is one of the largest hidden costs of software development. Research shows that 60% of development time is on the user interface, but the tooling to get from an approved design to the right, bug-free code is limited. With Indigo.Design as your design to code solution, you eliminate any slow-down or mistakes in the form of UX bugs that drive this cost up (in terms of time and real money).</p> <p>Any UX bug fixed during an iterative design phase costs one dollar to fix / change, while that same bug released into the market can cost up to $100 to fix. And these are just examples - you can add 2 to 3 zeros to any one of those numbers – to understand the real cost of letting low-quality design and UX bugs get out the door.</p> <p>Using a design to code system eliminates these costly errors, and even better, the handoff from design to development in a design to code system generates pixel-perfect HTML and CSS and TypeScript that your development team can then use to build out the remainder of their high-quality application with no UI/UX bugs.</p>" } },{ "@type": "Question", "name": "What is Indigo.Design?", "acceptedAnswer": { "@type": "Answer", "text": "<p>Indigo design is a digital product design platform that helps teams accelerate design to code. Indigo.Design has four key pillars:</p> <ol> <li>Indigo.Design is a prototyping tool</li> <li>Indigo.Design is a user testing tool</li> <li>Indigo.Design is a design to code tool</li> <li>Indigo.Design is a WYSIWYG app builder</li> </ol> <p>We created Indigo.Design to helps team’s delivery higher quality software faster than ever before. Indigo.Design reduces the high cost and time-consuming handoffs from design teams to development teams. Once a design is uploaded to the Indigo.Design cloud, teams can iterate on their prototype, collaborate with stakeholders, get markup and styling, perform unlimited remote user testing studies, and ultimately generate pixel-perfect code from designs.</p> <p>With indigo design you can use any piece of the application - any one of the four pillars - as features are designed to work seamlessly together or independently from each other.</p> <ul> <li>If you are a design team and you would like to use the prototyping and user testing feature, you can.</li> <li>If you are development team and you want to get pixel-perfect code from Sketch designs, you can choose to use the Visual Studio Code plug-in to get HTML, TypeScript, and CSS directly in your Angular app.</li> </ul> <p>Indigo design is a complete solution as a digital product design platform that enables huge cost savings faster time to market – but best of all - certainty in outcomes if all capabilities are use in your software development process.</p>" } },{ "@type": "Question", "name": "What is the latest version of Indigo.Design?", "acceptedAnswer": { "@type": "Answer", "text": "<p>Indigo.Design is a SaaS-based product that is always up to date. When you log into the Indigo.Design cloud at <a href=\"https://cloud.indigo.design\">https://cloud.indigo.design</a>, you are always using the latest version of the product. With Indigo.Design, the latest version includes the latest versions of our <a href=\"/products/ignite-ui-angular\">Angular components</a> in the Ignite UI for Angular toolset and the most up to date Sketch UI kits in the Indigo.Design design system.</p>." } },{ "@type": "Question", "name": "What is a Sketch UI kit?", "acceptedAnswer": { "@type": "Answer", "text": "<p>A Sketch UI kit is a collection of libraries (like sticker sheets) that include UI components, UI patterns and even complete screens. The Indigo.Design UI Kits for Sketch takes an “Atomic Design” approach by providing three libraries.</p> <ul> <li>The <strong>Styling</strong> library has sub-atomic pieces such as colors, shadows, typography styles, and icon glyphs that define the looks of the Atoms and Molecules found in the Components library.</li> <li>The <strong>Component</strong> library are collections of atoms that represent full-featured components, like charts, grids, etc.</li> <li>The <strong>Patterns</strong> library is a collection of higher-level collections of components like login forms, user profiles, and detail pages.</li> </ul> <p>With Sketch UI kits, a design team can build a consistent, branded digital experiences for any app in the enterprise. With Indigo.Design, the Sketch UI kits are partnered with Angular UI components, enabling a design to code system that can significantly accelerate product delivery.</p>" } },{ "@type": "Question", "name": "What is Sketch to code?", "acceptedAnswer": { "@type": "Answer", "text": "<p>With Indigo.Design, the worlds leading digital product design platform, you can upload a complete sketch prototype with unlimited screens and unlimited interactions and turn that into real, running Angular code.</p> <p>Sketch to code allows you to do your complete iterative design process using your favorite design tool, like Sketch, and then hand that design off to a development team who can then generate code from your Sketch design. The benefit with going from Sketch to code is the enormous time savings and cost savings from having your development teams do the same repetitive work in screen design that can be done with tooling. With Indigo.Design as the intermediary cloud platform between your Sketch design and Visual Studio Code you have the additional benefits of doing additional interactive prototyping, or even creation of user tests and usability studies on the prototype and then share those with an unlimited number of users for instant feedback.</p>." } },{ "@type": "Question", "name": "Can I turn Sketch designs to code with Indigo.Design?", "acceptedAnswer": { "@type": "Answer", "text": "<p>Indigo.Design fully supports turning Sketch files to code. This is done by uploading or synchronizing your Sketch prototype to the Indigo.Design cloud. Once your Sketch files are uploaded to the Indigo.Design cloud your development team can use the Visual Studio Code that code plug-in that lets them select individual components, full screens or the entire application and generate real HTML code, TypeScript, and CSS. You can literally go from Sketch to code in 3 easy steps.</p> <p>With Sketch to code, the time and money savings are enormous. Better yet, your time to market is faster than your competition with pixel-perfect app screens directly from Sketch designs.</p>" } },{ "@type": "Question", "name": "Is Indigo.Design a user testing tool?", "acceptedAnswer": { "@type": "Answer", "text": "<p>Indigo Design is a comprehensive <a href=\"/products/indigo-design/user-testing\">user testing tool</a>. With indigo design you can upload any image-based prototype or Sketch design to the Indigo.Design cloud and then create user tests and usability studies. With Indigo.Design, user testing is achieved with a simple point and click tool that records your actions and turns those actions into the user test that you will then share with your users, or any group of users that you’d like to get feedback from.</p> <p>With Indigo.Design user testing, you do not need to write any code, any scripting, or have any advanced knowledge to perform a user test. User testing with Indigo.Design is as easy as creating a PowerPoint slide. If you are a product manager or developer and you just want to do a quick user test on a handful of screenshots, you can upload the screenshots to the Indigo.Design cloud and create a prototype with the hotspot prototyping tool then turn that into a user test with one click.</p> <p>Our goal was to make it simple for any person with any skill to do user testing. You do not need to be a UX researcher with an advanced degree to create a sophisticated, detailed user test and then get real-time analytics on your user test results report with Indigo.Design.</p>" } },{ "@type": "Question", "name": "Can I do remote user testing with Indigo.Design?", "acceptedAnswer": { "@type": "Answer", "text": "<p>Indigo.Design is a comprehensive cloud platform that includes user testing and unmoderated, remote user testing for any type of application or design. You can upload complete Sketch prototypes or images (screenshots of your app) and use the Indigo.Design hotspot prototyping tool to create an interactive prototype, which would be the foundation for your user test and usability study. That user test can contain any number of questions that you were trying to get UX feedback on. Once you’ve created your user test, which you can easily do with the point-and-click recorder in Indigo.Design, you can share that with any number of testers by simply entering their emails or sending them a hyperlink via email.</p> <p>The benefit of unmoderated, remote user testing - especially with COVID-19 - is that you’re not required to be face-to-face with users. You can get very fast results and make very rapid iterative changes in your design with real time data coming back in the analytics of your user testing report. You are not limited to the number of testers and you’re not limited by the number of questions per prototype. You can send your user test to an unlimited number of users and they can choose to go through an unlimited number of questions to get you the results you need to improve your prototype before you start to write code.</p>" } }] } </script> </article> </main> <footer class="ui-footer ui-footer--clearfix"> <div class="ui-footer__wrap ui-footer--clearfix ui-footer__icons"> <a href="/community/blogs/" target="blank”" class="ui-footer__icon-link" aria-label="RSS"> <svg viewBox="0 0 512 512"> <path d="M201.8 347.2c0 20.3-16.5 36.8-36.8 36.8 -20.3 0-36.8-16.5-36.8-36.8s16.5-36.8 36.8-36.8C185.3 310.4 201.8 326.8 201.8 347.2zM128.2 204.7v54.5c68.5 0.7 124 56.3 124.7 124.7h54.5C306.7 285.3 226.9 205.4 128.2 204.7zM128.2 166.6c57.9 0.3 112.3 22.9 153.2 63.9 41 41 63.7 95.5 63.9 153.5h54.5c-0.3-149.9-121.7-271.4-271.6-271.9V166.6L128.2 166.6z" /> </svg>  </a> <a href="https://twitter.com/infragistics" target="blank" class="ui-footer__icon-link" aria-label="Twitter"> <svg viewBox="0 0 512 512"> <path d="M288.7,231.2l138.7,201.9h-102l-93.4-136l-117,136H84.7l133.8-155.5L84.7,82.9h102l88.5,128.7L386,82.9h30.2 L288.7,231.2L288.7,231.2z M247.3,279.3l92.3,132.1H386L272.9,249.5l-13.6-19.4l-87-124.5h-46.5L233.7,260L247.3,279.3L247.3,279.3z" /> </svg>  </a> <a href="https://www.facebook.com/infragistics" target="blank”" class="ui-footer__icon-link" aria-label="Facebook"> <svg viewBox="0 0 512 512"> <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z" /> </svg>  </a> <a href="http://www.linkedin.com/company/infragistics" target="blank”" class="ui-footer__icon-link" aria-label="LinkedIn"> <svg viewBox="0 0 512 512"> <path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z" /> </svg>  </a> <a href="https://www.youtube.com/user/Infragistics?annotation_id=annotation_3135485231&feature=iv&src_vid=c8dSiyWIfEo&sub_confirmation=1" target="blank”" class="ui-footer__icon-link" aria-label="YouTube"> <svg viewBox="0 0 512 512"> <path d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z" /> </svg>  </a> <a href="https://discord.com/invite/c6e9Xdg3ty" target="blank”" class="ui-footer__icon-link" aria-label="Discord"> <svg viewBox="0 0 512 512"> <path d="m424.6 343.6c-29.4 22-57.9 35.2-85.8 44-7-9.5-13.1-19.7-18.4-30.3 10.1-3.8 19.8-8.5 28.9-14.1-2.3-1.8-4.7-3.6-7-5.6-55.1 26.1-115.7 26.1-171.5 0-2.3 1.9-4.7 3.8-7.1 5.6 9.1 5.5 18.8 10.3 28.9 14.1-5.3 10.6-11.5 20.8-18.4 30.3-28-8.8-56.4-22.1-85.8-44-5.9-64.3 6-129.6 50.3-196.5 21.9-10.3 45.4-17.8 70-22 3 5.5 6.7 12.8 9 18.6q38.5-5.8 77.6 0c2.4-5.8 5.9-13.1 8.9-18.6 24.6 4.2 48 11.7 70 22 38.4 57.3 57.4 121.9 50.4 196.5zm-194-74.2c0.3-19-13.4-34.7-30.4-34.7-17.1 0-30.5 15.7-30.5 34.7 0 19 13.7 34.7 30.5 34.7 17 0 30.5-15.7 30.4-34.7zm112.7 0c0.3-19-13.4-34.7-30.4-34.7-17.1 0-30.5 15.7-30.5 34.7 0 19 13.7 34.7 30.5 34.7 17 0 30.4-15.7 30.4-34.7z" /> </svg>  </a> </div> <div class="ui-footer__wrap ui-footer__wrap--newsletter ui-footer--clearfix"> <div class="ui-footer__menu-block"> <div class="ui-footer__col-one-fourth ui-footer__col-block"> <div class="ui-footer__menu"> <ul class="ui-footer__menu-list"> <li class="ui-footer__menu-list-item"> <div class="ui-footer__category">Products</div> <ul> <li><a class="menu__link" href="/products/ultimate">Design & Development</a></li> <li><a class="menu__link" href="/products/indigo-design/desktop">UX Pros</a></li> <li><a class="menu__link" href="https://www.revealbi.io/embedded-analytics" target="_blank">Embedded Analytics</a></li> <li><a class="menu__link" href="https://www.slingshotapp.io/" target="_blank">Work Management</a></li> <li><a class="menu__link" title="Product Pricing" data-id="13745" href="/products/all">View All</a></li> <li><a class="menu__link" href="/free-downloads">Free Trials</a></li> </ul> </li> </ul> </div> </div>  <div class="ui-footer__col-one-fourth ui-footer__col-block"> <div class="ui-footer__menu"> <ul class="ui-footer__menu-list"> <li class="ui-footer__menu-list-item"> <div class="ui-footer__category">Learn & Support</div> <ul> <li><a class="menu__link" href="/support">Help & API Docs</a></li> <li><a class="menu__link" href="/blogs">Blogs</a></li> <li><a class="menu__link" href="/support/chat">Technical Support Chat</a></li> <li><a class="menu__link" href="/community/forums">Forums</a></li> <li><a class="menu__link" href="/community/ideas">Product Ideas</a></li> <li><a class="menu__link" href="https://account.infragistics.com/support-cases/submit">Submit a Request</a></li> <li><a class="menu__link" href="/status">Service Health</a></li> </ul> </li> </ul> </div> </div>  <div class="ui-footer__col-one-fourth ui-footer__col-block"> <div class="ui-footer__menu"> <ul class="ui-footer__menu-list"> <li class="ui-footer__menu-list-item"> <div class="ui-footer__category">My Account</div> <ul> <li><a class="menu__link" href="https://account.infragistics.com/subscriptions">Manage My Subscriptions</a></li> <li><a class="menu__link" href="https://account.infragistics.com/support-cases">Support Requests</a></li> </ul> </li> </ul> <ul class="ui-footer__menu-list"> <li class="ui-footer__menu-list-item"> <div class="ui-footer__category">Compare</div> <ul> <li><a class="menu__link" href="/angular-compare">Angular Compare</a></li> <li><a class="menu__link" href="/blazor-compare">Blazor Compare</a></li> </ul> </li> </ul> </div> </div>  <div class="ui-footer__col-one-fourth ui-footer__col-block"> <div class="ui-footer__menu"> <ul class="ui-footer__menu-list"> <li class="ui-footer__menu-list-item"> <div class="ui-footer__category">Corporate</div> <ul> <li><a class="menu__link" href="/about-us">About Us</a></li> <li><a class="menu__link" href="/about-us/careers">Careers</a></li> <li><a class="menu__link" href="/legal/license">Legal</a></li> <li><a class="menu__link" href="/about-us/in-the-news">News & Events</a></li> <li><a class="menu__link" href="/about-us/alliances-partners">Partners</a></li> </ul> </li> </ul> </div> </div> </div>  <div class="ui-footer__newsletter-block ui-footer__newsletter-updated-block"> <div class="newsletter__form-alt bg--dark"> <div class="ui-footer-newsletter__header"> <div class="emphasize"><span class="display--block-lg display--block-md display--block-xs display--inline-block-xxs">The best blogs, whitepapers, and other </span><span class="newsletter-txt-rotate color--azure-radiance" data-period="2000" data-rotate="[ "development", "user experience", "low code", "team productivity" ]">development</span> resources</div> </div> <div class="newsletter__Form bg--dark text--align-left"> <div class="loader__container" style="min-height: 200px;"> <div class="loader loader--bar"></div> </div> <form id="lead-nl-form" class="lead-tracker-form ui-form ui-form--single-col" data-form-theme="" style="display: none;"> <div class="be-row be-wrap clearfix"> <div id="recaptchaError" class="field-validation-error-msg" style="display: none;">Unfortunately, Google has considered you a bot. If you have an account, please <a href="https://www.infragistics.com/login?ReturnUrl=http://www.infragistics.com/products/newsletter-signup" title="sign in" class="mchNoDecorate">sign in</a> to validate your status and fill form out again. Alternatively, please feel free to contact <a href="mailto:sales@infragistics.com" title="sales@infragistics.com" class="mchNoDecorate">sales@infragistics.com</a> to obtain the asset you were looking for or choose to schedule a demo of our products.</div> </div> <div class="be-row be-wrap clearfix"> <div class="one-col column-block clearfix ui-form__input-group"> <input placeholder="Your email address" id="Email" name="Email" class="sfInput required" aria-labelledby="lblEmail" type="email" data-val-length-max="60" data-val-length="Email cannot exceed 60 characters" style="cursor: auto; padding: 20px 15px; background: #FFF; border-radius: 5px; color: #555;"> <label id="lblEmail" for="Email" class="ui-form__label ui-form__label--required hidden">Email</label> </div> </div> <div class="be-row be-wrap clearfix" style="display:none;"> <div class="one-col column-block ui-form__input-group"> <input id="Country" name="Country" class="sfInput" aria-labelledby="lblCountry" type="text" value="" tabindex="-1" autocomplete="false"> <label id="lblCountry" for="Country" class="ui-form__label">Country</label> </div> </div> <div class="clearfix"></div> <div class="clear"></div> <div class="be-row be-wrap clearfix"> <div class="one-col column-block"> <label id="LblacceptGDPRFormSubmissionNL" for="acceptGDPRFormSubmissionNL" class="ui-form__checkbox-container ui-form__label"> <span id="LblacceptGDPRFormSubmissionNL" class="label__text"> I understand and agree to the terms of Infragisitcs' <a href="https://www.infragistics.com/legal/terms-of-use" title="Terms of Use" target="_blank" class="deemphasize">Terms of Use</a> and <a href="https://www.infragistics.com/legal/privacy" title="Privacy Policy" target="_blank" class="deemphasize">Privacy Policy</a> <br /><br /> This site is protected by reCATPTCHA and the Google <a href="https://policies.google.com/privacy?hl=en-US" title="Google Privacy Policy" target="_blank" rel="nofollow" class="deemphasize">Privacy Policy</a> and <a href="https://policies.google.com/terms?hl=en-US" title="Google Terms of Use" target="_blank" rel="nofollow" class="deemphasize">Terms of Use</a> apply </span> <input name="acceptGDPRFormSubmissionNL" id="acceptGDPRFormSubmissionNL" type="checkbox" value="yes" aria-required="true" aria-labelledby="LblacceptGDPRFormSubmissionNL" class=""> <div class="ui-form__checkbox" style="top: 5px; border-radius: 5px;"> </div> </label> </div> </div> <div class="be-row be-wrap clearfix newsletter__submit-btn-wrap"> <button id="submit" type="submit" class="ui-btn ui-btn--default ui-btn--sm" disabled="">SIGN ME UP!</button> </div> </form> <div class="thankyou__containerNL" style="display: none;"><strong class="emphasize" style="color:#fff;display:block;margin-bottom:5px;">Thank you for subscribing.</strong> Look for an email from <a href="mailto:team@Infragistics.com?subject=Questions about Newsletter">team@Infragistics.com</a> for the latest news for Developers, UX, and Business Teams.</div> </div> <script src="https://www.google.com/recaptcha/api.js?render=6Lc-MFAaAAAAAIWi7UOrSUfUZnVmDUSsXjzS4BgY"></script> <script defer src="/assets/scripts/sf.common.js"></script>  </div> </div> <script> // // LEAD TRACKER SCRIPT // var leadTrackerNL = {}; leadTrackerNL.ungate = function (displayGatedContentType) { var URI = document.baseURI.substring(document.baseURI.lastIndexOf('/') + 1), currentWhitepaperRaw = URI.indexOf('?') > 0 ? URI.substring(0, URI.indexOf('?')) : URI, currentWhitepaper = URI.lastIndexOf('#') > 0 ? currentWhitepaperRaw.replace('#', '') : currentWhitepaperRaw, fwp = (window.location.href.indexOf('fwp=') > -1) ? ((window.location.href.indexOf('fwp=0') > -1) ? 0 //fwp=0 : (window.location.href.indexOf('fwp=1') > -1) ? 1 //fwp=1 : false) : false, //fwp=false storedWhitepapers = JSON.parse(localStorage.getItem('IG-whitepapers')) || [], inStorage = (storedWhitepapers.indexOf(currentWhitepaper) !== -1) ? true : false; var gatedSection = document.getElementById('gated-content'), gatingArea = document.getElementById('gating-area'); // Show Gated Area and remove Form gatedSection.classList.remove('hidden'); gatedSection.classList.remove('d-none'); gatingArea.parentNode.removeChild(gatingArea); // bypass gate if (displayGatedContentType === 'bypass') return; // Set localStorage to remember if user filled whitepaper if (!inStorage) { storedWhitepapers.push(currentWhitepaper); localStorage.setItem('IG-whitepapers', JSON.stringify(storedWhitepapers)); } // Smooth Scroll behavior if (displayGatedContentType === 'smooth') { var offset = gatedSection.previousElementSibling.offsetTop, topOfElement = gatedSection.offsetTop - offset; window.scroll({ top: topOfElement, behavior: 'smooth' }); } //load b-lazy images - start var bLazy = new Blazy({ offset: 250, success: function (ele) { if ($(ele).hasClass('b-lazy-gifs')) { var gifSrc = $(ele).data('gif-src'), gifSrcSet = $(ele).data('gif-srcset'); $(ele).attr({ 'src': gifSrc, 'srcset': gifSrcSet }).removeAttr('data-gif-src data-gif-srcset'); } } }); //load b-lazy images - end }; leadTrackerNL.execute = function (settings) { // Shared Properties var productCode = settings.productCode, leadProductCode = settings.leadProductCode || productCode, // If leadProductCode exists, use value otherwise use main productCode redirectUrl = settings.redirectUrl, reaptchaKey = settings.reaptchaKey, zoomWebinarId = settings.zoomWebinarId || "", goalType = settings.googleEventType || "", goalLabel = settings.googleEventLabel || "", goalDownloadType = settings.googleEventTypeDownload || "", goalDownloadLabel = settings.googleEventLabelDownload || "", macroLang = settings.lang, // KO currently uses EN backend... we need to accomodate this formContainerId = settings.formContainerId, validationLang, recaptchaToken; // Language done in order... // Determine the language used for validation... en is the default if otherwise undefined if (igSfForms.errMsgs[macroLang]) { validationLang = macroLang; } else { validationLang = 'en'; } // Override macroLang if Korean, Portuguese, or Spanish if (macroLang.toLowerCase() === 'ko' || macroLang.toLowerCase() === "pt" || macroLang.toLowerCase() === "es") { macroLang = 'en'; } // Events $('#lead-nl-form #submit').click(function (e) { e.preventDefault(); // Ensure button can't be clicked twice $(this).attr('disabled', true); // Loop Through Required Inputs, Selects and TextAreas to validate var $form = $('#lead-nl-form'); var inputs = $form[0].querySelectorAll('input, select, textarea'); for (i = 0; i < inputs.length; i++) { if (inputs[i].type === 'email') { //igSfForms.sfUtils.validateEmail(inputs[i], validationLang, settings.prohibitFreeMail); igSfForms.sfUtils.validateEmail(inputs[i], validationLang); } else if (inputs[i].type === 'tel') { igSfForms.sfUtils.validatePhone(inputs[i], validationLang); } else if (inputs[i].type === 'url') { igSfForms.sfUtils.validateUrl(inputs[i], validationLang); } else if (inputs[i].type === 'text' || inputs[i].tagName.toLowerCase() === 'textarea' || inputs[i].tagName.toLowerCase() === 'select') { igSfForms.sfUtils.validateRequired(inputs[i], validationLang); } else if (inputs[i].type === 'checkbox') { igSfForms.sfUtils.validateCheckbox(inputs[i], validationLang, true); } else { igSfForms.sfUtils.validateLength(inputs[i], validationLang); } } var errors = $form[0].querySelectorAll('#lead-nl-form .fieldInvalid'); if (errors.length > 0) { // Errors Found errors[0].focus(); // Renable button after errors are found $(this).attr('disabled', false); } else { // No Errors Found // Determine which macro is being used to know what APIs to call if (leadTrackerFormUtility) { // Check reCaptcha grecaptcha.ready(function () { grecaptcha.execute(reaptchaKey, { action: 'leadEvent' }).then(function (token) { if (token) { // store recaptcha token recaptchaToken = token; submitLeadTrackingForm(); } else { // TODO: Render error message $('#lead-nl-form #recaptchaError').css({ 'display': 'block' }); } }); }); } if (leadTrackerDownloadFormUtility) { grecaptcha.ready(function () { grecaptcha.execute(reaptchaKey, { action: 'downloadEvent' }).then(function (token) { if (token) { // store recaptcha token recaptchaToken = token; submitDownloadLeadTrackingForm(); } else { // TODO: Render error message $('#lead-nl-form #recaptchaError').css({ 'display': 'block' }); } }); }); } } }); // Functions function renderForm() { //if (settings.prohibitFreeMail) { // igSfForms.sfUtils.initEmailDomainProhibitList(); //} var $form = $('#lead-nl-form'); $form.find('input, textarea').keyup(igSfForms.sfUtils._debounce(function (e) { if ([9, 13, 16, 17, 20, 27, 144].indexOf(e.keyCode) <= -1) { //igSfForms.sfUtils.validateEmail(this, validationLang, settings.prohibitFreeMail); igSfForms.sfUtils.validateEmail(this, validationLang); igSfForms.sfUtils.validatePhone(this, validationLang); igSfForms.sfUtils.validateUrl(this, validationLang); igSfForms.sfUtils.validateLength(this, validationLang); igSfForms.sfUtils.validateRequired(this, validationLang); } }, 500)); $form.find('input, textarea, select').blur(function () { //igSfForms.sfUtils.validateEmail(this, validationLang, settings.prohibitFreeMail); igSfForms.sfUtils.validateEmail(this, validationLang); igSfForms.sfUtils.validatePhone(this, validationLang); igSfForms.sfUtils.validateUrl(this, validationLang); igSfForms.sfUtils.validateLength(this, validationLang); igSfForms.sfUtils.validateRequired(this, validationLang); igSfForms.sfUtils.validateCheckbox(this, validationLang, true); }); $form.find('select').change(function () { igSfForms.sfUtils.validateRequired(this, validationLang); igSfForms.sfUtils.validateCheckbox(this, validationLang, true); }); $form.closest('.newsletter__Form').find('.loader__container').fadeOut(300, function () { $(this).remove(); $('#lead-nl-form').fadeIn(300); }); //Disable submit if required checkbox is present $form.find('input[id=acceptGDPRFormSubmissionNL]').change(function (e) { igSfForms.sfUtils.validateCheckbox(this, validationLang, true); //Enable-Disable submit button $form[0].querySelector('button[type="submit"]').disabled = this.checked ? 0 : 1; }); } if ($('#acceptGDPRFormSubmissionNL').prop('checked')) { $('#submit').attr('disabled', false); } function submitLeadTrackingForm() { var eventTypeParam, eventDetailParam; // Override some params with the macro value, if set if (settings.eventTypeParam) { eventTypeParam = settings.eventTypeParam; } if (settings.eventDetailParam) { eventDetailParam = settings.eventDetailParam; } submitLead(eventTypeParam, eventDetailParam, false); } function submitDownloadLeadTrackingForm() { // Set params default values var eventTypeParam = `${productResource?.type} Download`, eventDetailParam = productResource?.name; // Override some params with the macro value, if set if (settings.eventTypeParam) { eventTypeParam = settings.eventTypeParam; } if (settings.eventDetailParam) { eventDetailParam = settings.eventDetailParam; } submitLead(eventTypeParam, eventDetailParam, true); } function _readCookie(name) { name = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(name) === 0) return c.substring(name.length, c.length); } return null; }; // TODO: Add GCLID for Google Ads offline tracking function _populateUtmFields(leadInfo) { var utms = ['source', 'medium', 'campaign', 'term', 'gclid'], cookieKey = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'gclid'], i = 0, utmVal = ""; for (i; i < utms.length; i++) { utmVal = _readCookie(cookieKey[i]); if (!utmVal) { utmVal = ""; } // If utm value not found, reset to empty leadInfo["Tracking" + (utms[i].charAt(0).toUpperCase() + utms[i].slice(1))] = utmVal; } return leadInfo; } function _collectAdditionalFormData() { var leadFields = $("#lead-nl-form").serializeArray(), additionalFields = {}; for (var i = 0; i < leadFields.length; i++) { // Avoiding adding if value is empty and is either email or request demo if (leadFields[i].name !== "Email" && leadFields[i].name !== "RequestDemo" && leadFields[i].value !== "") { if (additionalFields.hasOwnProperty(leadFields[i].name)) { additionalFields[leadFields[i].name] += ", " + leadFields[i].value; } else { additionalFields[leadFields[i].name] = leadFields[i].value; } } } return additionalFields; } function submitLead(eventTypeParam, eventDetailParam, includeDownload = false) { // Get form data var trackingDataRequest = { recaptchaToken: recaptchaToken, zoomwebinarId: zoomWebinarId, email: $('#lead-nl-form #Email').val(), productCode: leadProductCode, eventType: eventTypeParam, eventDetail: eventDetailParam, productLanguage: macroLang, prohibitFreeMail: settings.prohibitFreeMail, acceptConditions: $('#acceptGDPRFormSubmissionNL').prop('checked'), additionalFields: _collectAdditionalFormData() }; if (settings.showRequestDemo) { trackingDataRequest.additionalFields.requestDemo = ($("#RequestDemo").is(':checked')) ? true : false; } // Get UTM params trackingDataRequest.additionalFields = _populateUtmFields(trackingDataRequest.additionalFields); // $.ajax is used here instead of $.post so we can set the contentType. API doesn't know how to bind additional Fields // when $.post defaults the contentType to encodedURI $.ajax({ type: "POST", url: `${window.location.protocol}//${window.location.hostname}/api/leadtrackingevents/track`, data: JSON.stringify(trackingDataRequest), success: function (trackingId) { var timeOut = 0; if (goalType !== "" && goalLabel !== "") { // X-Domain Conversion Tracking dataLayer.push({ 'event': 'trackGoal', 'goalType': goalType, 'goalLabel': goalLabel }); timeOut = (navigator.userAgent.indexOf('Firefox') !== -1) ? 200 : 0; } if (settings.macro === "SEOWhitepaperLeadTracker") { leadTrackerNL.ungate("smooth"); } // Initiate download only if needed else if (includeDownload) { // Redirect to thank you page only if available if (redirectUrl) { setTimeout(function () { redirectToThankYouPage(trackingId); }, timeOut); } else { // Otherwise we should render the thank you message and initiate the download on the currently page renderThankYouMessage(); initDownload(trackingId); } } else { // If general lead tracker if (redirectUrl) { setTimeout(function () { redirectToThankYouPage(); }, timeOut); } else { // Otherwise we should render the thank you message and initiate the download on the currently page renderThankYouMessage(); } } }, error: function (jqXHR, textStatus, errorThrown) { $('#lead-nl-form .field-validation-error-msg').css({ 'display': 'none' }); if (jqXHR.status === 400) { var sOffset = $('#hello-bar').outerHeight() + $('#header.globalnav').outerHeight(); if (jqXHR.responseJSON.message === "User didn't accept lead form conditions") { $('#lead-nl-form #formInvalidConditionForm').css({ 'display': 'block' }); } if (jqXHR.responseJSON.message === "Invalid email") { $('#lead-nl-form #formInvalidEmail').css({ 'display': 'block' }); $('#lead-nl-form #Email').addClass('fieldInvalid'); } if (jqXHR.responseJSON.message === "This form doesn't accept free emails") { $('#lead-nl-form #formInvalidFreeEmail').css({ 'display': 'block' }); $('#lead-nl-form #Email').addClass('fieldInvalid'); } if (jqXHR.responseJSON.message === "Recaptcha unsuccessful") { $('#lead-nl-form #recaptchaError').css({ 'display': 'block' }); } if (jqXHR.responseJSON.message === "Required registrant information not provided") { $('#lead-nl-form #zoomRequiredFields').css({ 'display': 'block' }); } // 429 if (jqXHR.responseJSON.message === "Daily Quota Reached") { $('#lead-nl-form #zoomAlreadyRegisterLimit').css({ 'display': 'block' }); } // 3027 if (jqXHR.responseJSON.message == "Host Cannot Register") { $('#lead-nl-form #zoomHostNoRegister').css({ 'display': 'block' }); } // 3030 if (jqXHR.responseJSON.message == "Webinar Over") { $('#lead-nl-form #zoomWebinarOver').css({ 'display': 'block' }); } // 300 || 3000 || 3001 || 3034 || 3075 if (jqXHR.responseJSON.message == "Zoom General Error") { $('#lead-nl-form #zoomGeneralErrors').attr("data-zoom-error", exceptionMsg.code).css({ 'display': 'block' }); } $('body, html').animate({ scrollTop: $('.lead-tracker-form').offset().top - sOffset }, 'slow'); $('#lead-nl-form.lead-tracker-form #submit').attr('disabled', false); } }, contentType: 'application/json', dataType: 'json' }); } function initDownload(trackingId) { // Create InitiateDownloadRequest payload var initiateDownloadRequest = { leadTrackingEventId: trackingId }; if (goalDownloadType !== "" && goalDownloadLabel !== "") { dataLayer.push({ 'event': 'trackGoal', 'goalType': goalDownloadType, 'goalLabel': goalDownloadLabel }); } // Post the request to initiate the download $.post(`${window.location.protocol}//${window.location.hostname}/api/productresources/${productResource.id}/initiatedownload`, initiateDownloadRequest, function (downloadUrl) { // Start download document.location = downloadUrl; }); } function renderThankYouMessage() { // Hide the form and render Thank You Message var selector = (formContainerId) ? formContainerId : 'lead-nl-form'; if (formContainerId && formContainerId !== 'lead-nl-form') { $('.thankyou__containerNL').insertBefore('#' + selector); $('#' + selector).attr({ 'style': 'display:none!important;' }); } else { $('#' + selector).hide(); } $('.thankyou__containerNL').show(); } function redirectToThankYouPage(trackingId) { if (trackingId) { // Stores necessary params to temp local storage var initDownloadParams = { productResourceId: productResource?.id, downloadUrl: settings.downloadUrl, leadTrackingEventId: trackingId, ga: { goalType: goalDownloadType, goalLabel: goalDownloadLabel } }; // Set local storage var initDownloadParamsJson = JSON.stringify(initDownloadParams); sessionStorage.setItem('initDownloadParams', initDownloadParamsJson); } // Redirect to thank you page document.location = redirectUrl; } // // FORM UTILITIES // Determine which macro is being used and define specific props and initialize utility if (settings.macro === 'LeadTracker' || settings.macro === 'SEOWhitepaperLeadTracker' || settings.macro === 'WebinarLeadTracker') { var leadTrackerFormUtility = {}; leadTrackerFormUtility.init = function () { renderForm(); }; leadTrackerFormUtility.init(); } if (settings.macro === 'DownloadLeadTracker') { var leadTrackerDownloadFormUtility = {}, productResource; leadTrackerDownloadFormUtility.init = function () { // Get the product resource object(s) via product code var packageName = settings.packageName, productResourceType = settings.productResourceType, productLanguage = macroLang, osSupport = settings.osSupport, installerType = settings.installerType, versionCode = new URLSearchParams(window.location.search).get('vc') ?? "", singleResult = true; // If we know the ProductResource is for a trial with the versionCode in the queryString, we don't need a packageName if (versionCode && productResourceType === 'trial') { packageName = ""; } // Construct the Url const params = { productCode, productLanguage, versionCode, packageName, productResourceType, osSupport, installerType, singleResult }; var queryParams = new URLSearchParams(params); const url = `${window.location.protocol}//${window.location.hostname}/api/productresources?${queryParams}`; $.getJSON(url, function (productResources) { //Ensure there's only one product resource, else return error if (productResources.length > 1) { window.location.href = '/error'; } productResource = productResources[0]; // Once all custom logic is complete, render the form renderForm(); }).fail(function (jqxhr, textStatus, error) { if (jqxhr.status === 404) { window.location.href = '/not-found'; } else { window.location.href = '/error'; } }); }; // If we already have the downloadURL from the Macro, let's bypass requesting it from the api if (!settings.downloadUrl) { leadTrackerDownloadFormUtility.init(); } else { renderForm(); } } }; /* typewriter script */ var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); //requestAnimationFrame(that.tick()); }; window.addEventListener("load", function () { var elements = document.getElementsByClassName('newsletter-txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } //leadTracker Settings var settings = { macro: 'LeadTracker', lang: 'en', reaptchaKey: '6Lc-MFAaAAAAAIWi7UOrSUfUZnVmDUSsXjzS4BgY', redirectUrl: '', thankYouMessage: '<strong class="emphasize" style="color:#fff;display:block;margin-bottom:5px;">Thank you for subscribing.</strong>Look for an email from <a href="mailto:team@Infragistics.com?subject=Questions about Newsletter">team@Infragistics.com</a> for the latest news for Developers,UX,and Business Teams.', productCode: '91', leadProductCode: '', packageName: '', productResourceType: '', osSupport: '', installerType: '', eventTypeParam: 'form submit', eventDetailParam: 'news letter signup', prohibitFreeMail: false, showRequestDemo: false, googleEventType: 'Form Submit', googleEventLabel: 'Newsletter Signup', googleEventTypeDownload: '', googleEventLabelDownload: '', honeypot: 'Country' }; leadTrackerNL.execute(settings); }); </script> </div> <div class="ui-footer__wrap ui-footer--clearfix ui-footer--legal" style="text-align: center;"> <div class="ui-footer__menu"> <ul class="ui-footer__menu-list"> <li class="ui-footer__menu-list-item display--inline-block" style="margin: 0 8px;"><a class="menu__link" style="display: inline-block;" href="/legal/privacy">Privacy Policy</a><span style="font-size: 10px; color: rgba(255,255,255,0.4); display: inline-block; margin-left: 4px;">(updated)</span></li> <li class="ui-footer__menu-list-item display--inline-block" style="margin: 0 8px;"><a class="menu__link" href="/legal/cookie-policy">Cookies</a></li> <li class="ui-footer__menu-list-item display--inline-block" style="margin: 0 8px;"><a class="menu__link" style="display: inline-block;" href="/legal/terms-of-use">Terms of Use</a><span style="font-size: 10px; color: rgba(255,255,255,0.4); display: inline-block; margin-left: 4px;">(updated)</span></li> </ul> <div style="margin-top: 15px;"><img title="I.S. Partners SOC2 SEAL" src="https://static.infragistics.com/marketing/Website/shared/Seal-SOC2.png" alt="I.S. Partners SOC2 SEAL" width="32" height="32"> <img title="GDPR SEAL" src="https://static.infragistics.com/marketing/slingshot/security/gdpr-badge.svg" alt="GDPR SEAL" width="35" height="35"><img title="IS Partners LLC" src="https://static.infragistics.com/marketing/Website/shared/SOC2-badge.svg" alt="IS Partners LLC" width="35" height="35"></div> </div> </div> </footer>  <footer id="footer"> <div id="footer-wrap" class="be-wrap clearfix"> <div id="copyright">© Copyright 2025 INFRAGISTICS. All Rights Reserved</div> </div> </footer> </div> <div class="bubblingG loader page-loader"> <span id="bubblingG_1"></span> <span id="bubblingG_2"></span> <span id="bubblingG_3"></span> </div> <a id="back-to-top" href="#"> <i class="font-icon icon-up-open-big"></i> <span class="hidden--visual">Back to top of page</span> </a> <script type='text/javascript'> (async () => { const catID = 13; const res = await fetch(`/blogs/wp-json/wp/v2/posts?categories=${catID}&_embed&per_page=3&&order=desc&orderby=date&status=publish&context=view`, { headers: { Accept: 'application/json' }, }); const json = await res.json(); var _container = document.getElementById('api-content').parentNode; var htmlOutput = ''; function formatDate(date){ var d = new Date(date); let year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d); let month = new Intl.DateTimeFormat('en', { month: 'short' }).format(d); let day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d); return `${month} ${day}, ${year}`; } Object.entries(json).forEach(([key, value]) => { htmlOutput += ` <article class="bt__post ui-card "> <figure class="bt__post-image"> <img class="b-lazy" src="https://static.infragistics.com/marketing/Website/blog/blog-lazy-load.png" data-src=${value._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url}"> </figure> <div class="bt__content-wrap"> <header> <h4> <a class="bt__post-link" href="${value.link}"> ${value.title.rendered} </a> </h4> <span class="bt__post-subheader"> <span> <a href="${value._embedded.author[0].link}"> ${value._embedded.author[0].name} </a> </span> <time datetime="2024-11-25">${formatDate(value.date)}</time> </span> </header> <div class="bt__content"> ${value.excerpt.rendered} </div> <footer> <ul class="bt__post--tags"> <li><a href="#">TAG</a></li> </ul> </footer> </div> </article> `; }); _container.innerHTML = htmlOutput; })(); </script> <script type='text/javascript'> window.addEventListener('load', function() { $( "#indigo-faqs" ).each(function () { var $indigoFAQ = jQuery(this); $indigoFAQ.accordion({ active: false, collapsible: true, heightStyle: "content", beforeActivate: function(event, ui) { // The accordion believes a panel is being opened if (ui.newHeader[0]) { var currHeader = ui.newHeader; var currContent = currHeader.next('.ui-accordion-content'); // The accordion believes a panel is being closed } else { var currHeader = ui.oldHeader; var currContent = currHeader.next('.ui-accordion-content'); } // Since we've changed the default behavior, this detects the actual status var isPanelSelected = currHeader.attr('aria-selected') == 'true'; // Toggle the panel's header currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('ui-accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString())); // Toggle the panel's icon currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected); // Toggle the panel's content currContent.toggleClass('accordion-content-active',!isPanelSelected) if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); } return false; // Cancel the default action } }).css('opacity', 1); }); }); </script> <script type='text/javascript'> window.addEventListener('load', function() { if($('#header-wrap').parents('.sticky-wrapper').length <= 0) { igNavigation.init(); //IG - Nav V3 - Indigo } }, {once: true}); </script> <script type='text/javascript'> /*window.addEventListener("load", function load(event){ igNavigation.init(); },false);*/ window.addEventListener('load', function() { if($('#header-wrap').parents('.sticky-wrapper').length <= 0) { igNavigation.init(); } }, {once: true}); </script> <script type='text/javascript'> (function(){ 'use strict'; var //cookieVal = '201806', $gdprMsg = document.getElementById('gdpr'), headerWrapHeight = (document.getElementById('header-wrap')) ? document.getElementById('header-wrap').offsetHeight : 0, //breakPoint = headerWrapHeight, docBody = document.documentElement || document.body.parentNode || document.body; // function readGDPR(name) { // var name = name + '='; // var ca = document.cookie.split(';'); // for(var i=0;i < ca.length;i++) { // var c = ca[i]; // while (c.charAt(0)==' ') c = c.substring(1,c.length); // if (c.indexOf(name) == 0) return c.substring(name.length,c.length); // } // return null; // } // function stickyGDPR(hello) { // if (scrollTop > breakPoint) { // $gdprMsg.style.position = 'fixed'; // } else if (scrollTop <= breakPoint) { // $gdprMsg.style.position = ''; // } // } function adjustGDPRMsg(event){ var hasOffset = window.pageYOffset !== undefined; //var scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop; // cross-browser compatible scrollTop // if ( (!readGDPR('IG_GDPRMessage')) && event.type === 'load' || (readGDPR('IG_GDPRMessage') !== cookieVal) && event.type === 'load' ) { // $gdprMsg.style.display = 'block'; // } // if (window.innerWidth <= 960) { // //$gdprMsg.classList.add('gdpr-block-sticky'); // //stickyGDPR('hello'); // $gdprMsg.style.position = 'fixed'; // if(scrollTop <= headerWrapHeight){ // $gdprMsg.style.top = (headerWrapHeight - scrollTop) + 'px'; // } else { // $gdprMsg.style.top = 0; // } // } else { // $gdprMsg.classList.add('p-fixed'); // $gdprMsg.style.removeProperty('top'); // } $gdprMsg.style.display = 'block'; //show consent container //Interrupt the script in case GDPR is not displayed or add listeners for position adjustment if(window.getComputedStyle($gdprMsg).display !== 'block'){ // window.removeEventListener('resize', adjustGDPRMsg); // window.removeEventListener('scroll', adjustGDPRMsg); return; } else { // window.addEventListener('resize', adjustGDPRMsg); // window.addEventListener('scroll', adjustGDPRMsg); } } // document.getElementById('gdpr_accept').addEventListener('click', function(e){ // //document.cookie = 'IG_GDPRMessage='+cookieVal+'; expires=Fri, 31 Dec 9999 23:59:59 GMT; path= /'; // //$gdprMsg.style.display = 'none'; // window.removeEventListener('resize', adjustGDPRMsg); // window.removeEventListener('scroll', adjustGDPRMsg); // $gdprMsg.parentNode.removeChild($gdprMsg); // window.dataLayer = window.dataLayer || []; // window.dataLayer.push({ // 'event': 'trackGoal', // 'goalType': 'GDPR', // 'goalLabel': 'Accept | GDPR Banner' // }); // }); function hideBanner() { $gdprMsg.style.display = 'none'; } function show_consent_settings() { document.getElementById('consent-summary').style.display = 'none'; document.getElementById('consent-options').style.display = 'block'; } if (localStorage.getItem('IGconsentMode') === null) { //trigger adjustGDPRMsg to show the consent container window.addEventListener('load', adjustGDPRMsg); //"More settings" click document.getElementById('gdpr_settings').addEventListener('click', function(e) { show_consent_settings(); }); document.getElementById('gdpr_accept_all_ok').addEventListener('click', function(e) { e.preventDefault(); setConsent({ necessary: true, functional: true, analytics: true, advertising: true }); hideBanner(); }); document.getElementById('gdpr_accept_all').addEventListener('click', function(e) { e.preventDefault(); setConsent({ necessary: true, functional: true, analytics: true, advertising: true }); hideBanner(); }); document.getElementById('gdpr_accept_selection').addEventListener('click', function(e) { e.preventDefault(); setConsent({ necessary: true, functional: document.getElementById('acceptFunctionalCookies').checked, analytics: document.getElementById('acceptAnalyticsCookies').checked, advertising: document.getElementById('acceptAdvertisingCookies').checked }); hideBanner(); }); document.getElementById('gdpr_reject_all').addEventListener('click', function(e) { e.preventDefault(); setConsent({ necessary: true, functional: false, analytics: false, advertising: false }); hideBanner(); }); //document.getElementById('cookie-consent-banner').style.display = 'block'; } else { //console.log('IGconsentMode is set'); gtag('consent', 'update', JSON.parse( localStorage.getItem('IGconsentMode') )); } function setConsent(consent) { const consentMode = { 'functionality_storage': consent.necessary ? 'granted' : 'denied', 'security_storage': consent.necessary ? 'granted' : 'denied', 'ad_storage': consent.advertising ? 'granted' : 'denied', 'ad_user_data': consent.advertising ? 'granted' : 'denied', 'ad_personalization': consent.advertising ? 'granted' : 'denied', 'analytics_storage': consent.analytics ? 'granted' : 'denied', 'personalization_storage': consent.functional ? 'granted' : 'denied', }; gtag('consent', 'update', consentMode); localStorage.setItem('IGconsentMode', JSON.stringify(consentMode)); } })(); </script> <script type='text/javascript'> //Disabling the Typewriter for other languages (function() { if (location.hostname !== 'www.infragistics.com' && location.hostname !== 'staging.infragistics.com') { var newEl = '<span class="color--azure-radiance">development</span>'; document.querySelector('.newsletter-txt-rotate').outerHTML = newEl; } })(); </script> <script type='text/javascript'> function handleCrazyEggBarAdjustments(){ setTimeout(function(){ //console.log('1'); var crazyEggBar = document.querySelector('crazyegg-cta'); var switchPoit; if (!!crazyEggBar) { //console.log('2'); var switchPoit = (window.innerWidth <= 767) ? false : true; var crazyEggAreaHeight = crazyEggBar.shadowRoot.querySelector('#main').offsetHeight; var navContainer = document.getElementById('header-wrap'); if ( (navContainer.classList.contains('stuck') && (switchPoit) ) ){ navContainer.style.top = crazyEggAreaHeight+'px'; } //console.log('3'); } else { //console.log('4'); return; } }, 2000); } window.addEventListener('load', handleCrazyEggBarAdjustments(), false); window.addEventListener('resize', handleCrazyEggBarAdjustments(), true); </script> </body> </html>

CINXE.COM

Prototyping and Usability Testing with Indigo Design | Design to Code | UI & UX Designs Infragistics