Just when you thought your prototypes couldn’t 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 Expressions. It makes JavaScript directly applicable to your prototypes. This is the most powerful feature UXPin has released to date, and it nicely complements ournew Variables and Conditional Interactions features. 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.

Expressions is basically “code language”. 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— all right inside the prototype.

Think of Expressions as being similar to the functions in Google Sheets and Excel. They can also make a prototype “context aware”. Basically, a prototype can change based on its operating system, or size of the browser window.

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.

The number of things you can create with Expressions is infinite. But here are some specific examples:

Perform some math on a diagram’s data
Create a shopping cart for an e-commerce website
Build an ROI calculator for your business
Create a rap name generator (as our Account Manager, Natalie, suggested)
Make a scheduling tool to book clients
Show error or success messages
Validate email addresses

Not part of the UXPin family yet?

Your prototypes have officially gained superpowers. Now you can store or pass information using variables and add conditional interactions! Prototyping just got a whole lot more interactive. Get much closer to real, coded apps with these new features. They’ll be especially handy for user testing.

Fall 2018 has been a crazy time at UXPin for all the right reasons. We have many cool features on their way—stay tuned for Expressions, States and Data. But we digress… today, we’re excited to show you not one, but two new features closely tied together!

What are they?

Variables

Variables allow different elements to “communicate” with each other even if spread across pages. This data persists from page to page as you click through the prototype. Meaning you can set a variable’s value on one page and then take action based on that value on a completely different page.

With variables, you’ll be able to build the relationships between elements in a prototype. To do that, you can simply set the same variable for the elements you want to pair together. For example, to collect user data in an input and then use “username” in a message in a different part of the prototype.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2018/08/variables-video.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Conditional Interactions

Conditional interactions give your prototypes a layer of logic—this is a very powerful feature that is characteristic to only a handful of prototyping tools. We’re very excited to be added to that list. With conditional interactions, you can set rules that make the interaction happen only if those rules are met.

When to use these features

To collect some information, like a name, and pass it to another page to display it as part of a greeting message
Easily store user-entered data and then reuse it across elements and pages in your prototype
To tailor prototype content and behavior to different scenarios for user testing

Why you want them in your life right now

Make prototypes feel like the real deal, operating on data or actions by users (especially when user testing)
Your prototypes will be more dynamic and less generic
Make it much easier to showcase (to developers, for example) how the solution should work in real life
Create more flexible prototypes and save a lot of time on creation, because you don’t have to re-do components to fit different use cases

How can you start using them right away?

All this is already live in your account (both web and desktop app) if you use UXPin.
Don’t use UXPin yet but want to try your hand at variables and conditional interactions?

Tag: variables

Expressions: Harness The Power of JavaScript in your Prototypes

Join the world's best designers who use UXPin.

Introducing Variables and Conditional Interactions for More Interactive Prototyping