Math and logic made easy in Atomic

We’ve just shipped some big improvements to the power of variables and actions in Atomic. If you’re creating advanced prototypes and want to incorporate math and conditional logic, you’re in for a treat!

More choices for variable triggers and actions

You can now trigger actions in your prototype when numeric variables reach or pass a certain number. You can also set actions to perform simple numeric operations on variables in just a few clicks.


See this prototype in action

Go further using Script Expressions

When designing for complex data or math intensive applications you’re going to love the power of coded script expressions.

The all-new script expressions make it simple to push your prototypes beyond basic numeric operations. Script expressions can be used to make powerful calculators and write conditional logic to control component states or adapt to user behaviour.

Use script expressions for math

This savings calculator uses math written in a script expression to predict future savings.


Here’s how the script expression in the above example works:

Using a syntax based on the popular math.js library (which will be very familiar to those of you with JavaScript experience) we simply reference the names of each variable the inputs are connected to, calculate interest earnings and put the result in a variable totalSavings which is displayed via a text element on the page.


See this prototype in action

Here’s the main script expression that performs the savings calculation:

totalPayments = (amount * (frequency * duration))
totalSavings = totalPayments + (totalPayments * (rate / 100))

Finally, to easily format totalSavings as currency, we run:

totalSavings = totalSavings.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2})

If you’re doing a currency conversion like this in many places in your prototype, you can also now write it as a function and store it in an advanced variable. You can then use the variables and interact with it from other script expressions. The example below uses this approach:


In this example script expressions are reading and modifying variables to create a tax calculator. The script expressions are running calculations, handling the delete and clear interactions and currency-formatting the result via a simple function.

Use script expressions for conditional logic

Working with user input is just one of the many use cases for script expressions. You can also write logic that sets component states or triggers transitions.


In this example increasing the total value of an order causes a shipping component to change state while also updating the total order price.

See this prototype in action

Here’s another example:


In this example, entering both a high savings amount and a long savings duration causes a new button and pathway to be revealed.

See this prototype in action

Getting started with script expressions

You can learn more about script expressions in this article or learn more about using variables and script expressions in your prototypes.

All the examples in this page can also be copied into your Atomic account, where you can open them in the editor and see how they’re made.

If you’ve got examples or expression code snippets you’d like to share please do get in touch or share them in our Facebook Group.

Posted 7 June 2017

Advanced interactive design & prototyping.