Axure allows you to create and use variables in a pretty advanced way. I recently used the Math.random() function a lot, and thought it could be useful (at least for me) to write the good random formulas somewhere, for later reference. It is probably very easy for programmers, but this is not my case, and I don’t want to lose time trying to figure out which is the right way of writing the formulas each time. So here it is!

Why do we need a random on Axure?

I have bee working on a lot of projects requiring data visualization lately. The simplest way to illustrate wireframes with data is to copy and paste. But then you have the same data and graphs repeated all over the pages, and at some point you lose the relevancy. Another solution is to manually change each occurrence, at least a bit to give the right feeling and not lose attention on repetition. Even if repeaters are a great tool for this, you still need to input the data manually at some point. As having the exact data is not what matters at this stage, I now use random as often as possible. It creates differences which give the right rythm to the page, without even having to bother about entering the data. This way I have only one master, set to randomly change on page load, and only one place to make updates if needed.

The different random formulas I use

First of all, where is the random accessible in Axure? Every time you use an interaction like Move or Change size, you can by default enter a value. But on the right of the value field is a little « fx » icon. When you click on it, it opens a new window where you can program a custom value. From there, if you click on Insert variable or function, you can either use the variables you have previously created (but this is another topic) or use pre-defined functions, including the x and y positions, scroll, date, etc. In the Maths category is where you will find our Math-random().

1. When used as is, [[Math.random()]] returns a number (with a lot of decimals) between 0 and 1 (like 0.18444888074058946.) As-is, I didn’t find a useful application of the function, I must say.
2. You can easily change this number to get, for example, a percentage, with the following formula: [[Math.random() * 100]]. But in order to get rid of the decimals, you can use another function simulateously: [[Math.floor(Math.random() * 100)]]. This will return a plain number between 1 and 100.
3. If you need a number between precise boundaries (for example to set the size of a widget within a minimum and a maximum), you can add variables: [[Math.floor(Math.random() * (80 – 1))]] will return an integer between 0 and 80. If you need to exclude 0, [[Math.floor(Math.random() * (80 – 1) +1)]] will return an integer between 1 and 80.
4. To set a panel to a random state, I use numbers as states names (my panel has states 1, 2, 3, etc.), and use the function: [[Math.floor(Math.random() * (3 – 1) +1)]].