{"id":16687,"date":"2018-10-31T11:51:08","date_gmt":"2018-10-31T18:51:08","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16687"},"modified":"2021-09-29T20:32:23","modified_gmt":"2021-09-30T03:32:23","slug":"expressions-javascript-prototyping","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/","title":{"rendered":"Expressions: Harness The Power of JavaScript in your Prototypes"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-16690\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/ExpressionsBlogpost-h1-700x220.png\" alt=\"Expressions and Java script with UXPin\" width=\"700\" height=\"220\"><\/p>\n<p>Just when you thought your prototypes couldn\u2019t gain more superpowers, we added another to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.<\/p>\n<p>Now you can power up your prototype in a programmatic way. Gone are the days of design tools not having math functions! We just leveled up with Expressions. It makes JavaScript directly applicable to your prototypes. This is the most powerful feature UXPin has released to date, and it nicely complements our<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/variables-and-conditional-interactions-for-interactive-prototyping\/\">new Variables and Conditional Interactions features<\/a>. It also brings us one step closer to our mission to enable the best user experiences by merging design and engineering into one world of better, faster product development.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16688\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/expressions-BP-GIF.gif\" alt=\"Expressions\" width=\"670\" height=\"280\"><\/p>\n<p>Expressions is basically \u201ccode language\u201d. You can now use JavaScript functions to perform additional operations on variables such as math, dates, text, etc. to build even more. Want to prototype a design with a computational component? Now you can! Manipulate variables, perform math and regular expressions tests, and use the results to update variables or trigger state changes and transitions\u2014 all right inside the prototype.<\/p>\n<p>Think of Expressions as being similar to the functions in Google Sheets and Excel. They can also make a prototype &#8220;context aware&#8221;. Basically, a prototype can change based on its operating system, or size of the browser window.<\/p>\n<p>Expressions allow you to get even closer to real apps, especially when user testing. You can change things dynamically in an earlier stage of your prototype. Say goodbye to linking static artboards forever.<\/p>\n<p>The number of things you can create with Expressions is infinite. But here are some specific examples:<\/p>\n<ul>\n<li>Perform some math on a diagram\u2019s data<\/li>\n<li>Create a shopping cart for an e-commerce website<\/li>\n<li>Build an ROI calculator for your business<\/li>\n<li>Create a rap name generator (as our Account Manager, Natalie, suggested)<\/li>\n<li>Make a scheduling tool to book clients<\/li>\n<li>Show error or success messages<\/li>\n<li>Validate email addresses<\/li>\n<\/ul>\n<p>Not part of the UXPin family yet?<\/p>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>Just when you thought your prototypes couldn\u2019t gain more superpowers, we added another to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs. Now you can power up your prototype in a programmatic way. Gone are the days of design tools not having math functions! We just leveled up with<\/p>\n","protected":false},"author":142,"featured_media":16689,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,174,172,8,21,176,7],"tags":[225,236,232,233,235,234,224],"class_list":["post-16687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-enterprise-ux","category-product-design","category-prototyping","category-usability-2","category-user-research","category-web-design","tag-conditional-interactions","tag-context-aware","tag-expressions","tag-javascript","tag-regular-expressions-tests","tag-user-testing","tag-variables"],"yoast_title":"","yoast_metadesc":"We've added one more feature to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Expressions: Harness The Power of JavaScript in your Prototypes | UXPin<\/title>\n<meta name=\"description\" content=\"We&#039;ve added one more feature to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Expressions: Harness The Power of JavaScript in your Prototypes\" \/>\n<meta property=\"og:description\" content=\"We&#039;ve added one more feature to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-31T18:51:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-30T03:32:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/ExpressionsBlogpost_x2-featured.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Maaheem Akhtar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maaheem Akhtar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/\"},\"author\":{\"name\":\"Maaheem Akhtar\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f32c3ca9af382dca192474980e2e6b4a\"},\"headline\":\"Expressions: Harness The Power of JavaScript in your Prototypes\",\"datePublished\":\"2018-10-31T18:51:08+00:00\",\"dateModified\":\"2021-09-30T03:32:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/\"},\"wordCount\":335,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/ExpressionsBlogpost_x2-featured.png\",\"keywords\":[\"conditional interactions\",\"context aware\",\"expressions\",\"javascript\",\"regular expressions tests\",\"user testing\",\"variables\"],\"articleSection\":[\"Blog\",\"Enterprise UX\",\"Product Design\",\"Prototyping\",\"Usability\",\"User Research\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/\",\"name\":\"Expressions: Harness The Power of JavaScript in your Prototypes | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/ExpressionsBlogpost_x2-featured.png\",\"datePublished\":\"2018-10-31T18:51:08+00:00\",\"dateModified\":\"2021-09-30T03:32:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f32c3ca9af382dca192474980e2e6b4a\"},\"description\":\"We've added one more feature to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/ExpressionsBlogpost_x2-featured.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/ExpressionsBlogpost_x2-featured.png\",\"width\":1400,\"height\":440,\"caption\":\"ExpressionsBlogpost x2 featured\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/expressions-javascript-prototyping\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Expressions: Harness The Power of JavaScript in your Prototypes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f32c3ca9af382dca192474980e2e6b4a\",\"name\":\"Maaheem Akhtar\",\"description\":\"Mak manages all things words at UXPin as their Content Marketing Strategist. She is also on the eternal quest for the greatest piece of mind and peace of cake. Ice hockey, live music and learning about psychology, wellbeing and culture are some other things she likes.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/maaheem\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Expressions: Harness The Power of JavaScript in your Prototypes | UXPin","description":"We've added one more feature to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/","og_locale":"en_US","og_type":"article","og_title":"Expressions: Harness The Power of JavaScript in your Prototypes","og_description":"We've added one more feature to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/","og_site_name":"Studio by UXPin","article_published_time":"2018-10-31T18:51:08+00:00","article_modified_time":"2021-09-30T03:32:23+00:00","og_image":[{"width":1400,"height":440,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/ExpressionsBlogpost_x2-featured.png","type":"image\/png"}],"author":"Maaheem Akhtar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Maaheem Akhtar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/"},"author":{"name":"Maaheem Akhtar","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f32c3ca9af382dca192474980e2e6b4a"},"headline":"Expressions: Harness The Power of JavaScript in your Prototypes","datePublished":"2018-10-31T18:51:08+00:00","dateModified":"2021-09-30T03:32:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/"},"wordCount":335,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/ExpressionsBlogpost_x2-featured.png","keywords":["conditional interactions","context aware","expressions","javascript","regular expressions tests","user testing","variables"],"articleSection":["Blog","Enterprise UX","Product Design","Prototyping","Usability","User Research","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/","name":"Expressions: Harness The Power of JavaScript in your Prototypes | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/ExpressionsBlogpost_x2-featured.png","datePublished":"2018-10-31T18:51:08+00:00","dateModified":"2021-09-30T03:32:23+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f32c3ca9af382dca192474980e2e6b4a"},"description":"We've added one more feature to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/ExpressionsBlogpost_x2-featured.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/10\/ExpressionsBlogpost_x2-featured.png","width":1400,"height":440,"caption":"ExpressionsBlogpost x2 featured"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/expressions-javascript-prototyping\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Expressions: Harness The Power of JavaScript in your Prototypes"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f32c3ca9af382dca192474980e2e6b4a","name":"Maaheem Akhtar","description":"Mak manages all things words at UXPin as their Content Marketing Strategist. She is also on the eternal quest for the greatest piece of mind and peace of cake. Ice hockey, live music and learning about psychology, wellbeing and culture are some other things she likes.","url":"https:\/\/www.uxpin.com\/studio\/author\/maaheem\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/142"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=16687"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16687\/revisions"}],"predecessor-version":[{"id":31887,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16687\/revisions\/31887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/16689"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=16687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=16687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=16687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}