Getting Started

Formulas and variables make it possible for designers to make prototypes with interactions that are more dynamic. You are able to define your own variables and create your own formulas where you can use arithmetic operations, variables and functions, and even access layer properties. These all unlock the potential of interactions that are far more dynamic than what you are used to.

Formula Input

The formula input field is where you can create formulas. You can include layer properties, variables and functions simultaneously in the formula input field. Clicking on the plus icon will help you select the variables and layer properties to autocomplete formulas.

Formula Input

Basic Tutorials

Formula

The basics of formulas are explained in this video showing how useful they can be. For example, you can use coordinates of a layer directly in an interaction making it dynamic, instead of using fixed values.

Variable

The basics of variables are explained in this video showing how easy it is to use them. You have various types of variables that can hold different kinds of values. Subsequently, you can use variables in various ways.

Examples

Tab Menu

Besides fixed values, it is possible to use formulas for responses. Layer properties can be utilized when it comes to formulas. The x-coordinate of each “menu” layer is utilized in the formulas for the Move responses, in order to achieve an interaction where the blue layer moves left and right, as seen below.

Spinner

You can use variables to create a simple spinner that increases by one or decreases by one.

Ripple Effect

Coordinates of a point where a touch is registered can be used through predefined variables. In order to create a ripple effect at the exact position where a touch is registered, “$touchX” and “$touchY” are used in the Move response of the ripple layer.

Text Input

The text property of the input layer refers to the text that was entered through the input layer. With functions, you are able to combine texts and manipulate texts to your liking.

Variable

As mentioned earlier, as of version 3.9, ProtoPie supports variables. These variables can hold text, number or color values. The value of a variable can be modified using the Assign response, while the Detect trigger would be activated based on any changes that a layer or variable undergoes. You can use variables instead of using fixed values for responses, e.g. Move, Scale, Rotate and others.

Variable for all scenes
A variable for all scenes is a variable that is usable in all scenes in ProtoPie, and it can also be used for interactions between scenes. It is possible for the value of a variable for all scenes to be changed in Scene A, and after jumping from Scene A to Scene B, the changes in the variable would be visible in the new scene.
Variable for this scene only
A variable for this scene only is a variable that is usable only in the scene where the variable is created. This means that a variable created in Scene A cannot be used in Scene B.

Variable Type

Variables can be one of the three types: a number, text or color type. These variables hold different values based on their type.

Text
A text variable can only hold text as a value. Any number used as a value for a text variable will be treated as text.
Number
A number variable can only hold numbers as a value. Any non-number used as a value for a number variable will result in an error.
Color
A color variable can only hold values in the #FFFFFF format (Hex color code). Any non-color value used as a value for a color variable will result in an error.

Variable Display

Values of variables can be displayed in the canvas and in Preview. This way, you can make sure that your variables are storing the correct values.

Predefined Variable

These are variables that have been predefined within ProtoPie.

  • $touchX The x-coordinate of a point where a touch is registered.
  • $touchY The y-coordinate of a point where a touch is registered.
  • $touchVelocity The velocity of a touch using a finger or mouse that is in movement.
  • $touchVelocityX The x-component of the velocity of a touch using a finger or mouse that is in movement.
  • $touchVelocityY The y-component of the velocity of a touch using a finger or mouse that is in movement.
  • $touchPointerCount The number of fingers that are touching the screen.
  • $keyboardHeight The height of a native keyboard on a smart device when it is visible.
  • $deviceOS The operating system of the device on which the prototype is running

Formula Syntax

Literal Values

Refer to the following syntaxes for using layer names, text, numbers, color values and variables in the formula input field.

Layer name

Use backticks around the layer name.

Layer name

Text

Use single or double quotation marks around the text.

Text

Text with multiple lines

Add a \n to add a line break between characters or words.

Text with multiple lines

Number

Use Arabic numbers only; other symbols are not allowed.

Number

Color

Colors must be expressed in the #FFFFFF format (Hex color code).

Color

Variable

Use variable names that do not have any symbols in the name.

Variable

Arithmetic operations

The four basic arithmetic operations (+, -, *, /) and remainder calculations are supported.

Remainder calculations (%)

Remainder calculations are done to derive the remainder of a division operation by using the % operative. For example, 5%2 would result in 1 as the remainder in that operation is 1.

Text functions

While arithmetic operations apply to numbers only in most cases, addition can be done with texts. When a text is “added” to another text, the end result is a new text with the two texts combined together. For example, adding “2” to “1” would result in the new text “12”.

Text + Text

"helloworld"

"12"

Text + Number

"hello1234"

Layer Property

A layer’s property, like coordinates or size, can be used for variables.

  • `layerName`.x The x-coordinate of a layer.
  • `layerName`.y The y-coordinate of a layer.
  • `layerName`.width The width of a layer.
  • `layerName`.height The height of a layer.
  • `layerName`.scaleX The scale factor X of a layer.
  • `layerName`.scaleY The scale factor Y of a layer.
  • `layerName`.rotate The rotate value of a layer.
  • `layerName`.opacity The opacity value of a layer.
  • `layerName`.radius The radius value of a layer.
  • `containerName`.scroll The current scroll value.
  • `layerName`.color The Hex color code of a layer.
  • `layerName`.fillOpacity The fill opacity value of a layer.
  • `layerName`.text The text in a text layer.

Function

Text Manipulation

  • length(source: TEXT)NUMBER
    • Calculates the number of characters in a text.
    • e.g. length("hello")5
  • left(source: TEXT, count: NUMBER)TEXT
    • Extracts a number of letters from a text, starting on the left side.
    • e.g. left(“hello”, 3)“hel”
  • right(source: TEXT, count: NUMBER)TEXT
    • Extracts a number of letters from a text, starting on the right side.
    • e.g. right(“hello”, 3)"llo”
  • concat(source1: TEXT, source2: TEXT)TEXT
    • Joins two separate texts into one text.
    • e.g. concat("hello", "world")"helloworld"
  • replace(source: TEXT,from: TEXT, to: TEXT)TEXT
    • Replaces a part of a text with another text.
    • e.g. replace("helloworld","world", "protopie")"helloprotopie"
  • trim(source: TEXT)TEXT
    • Removes whitespace on either side of a text.
    • e.g. trim(" helloworld ")"helloworld"
  • ltrim(source: TEXT)TEXT
    • Removes whitespace from the left side of a text.
    • e.g. ltrim(" helloworld ")"helloworld "
  • rtrim(source: TEXT)TEXT
    • Removes whitespace from the right side of a text.
    • e.g. rtrim(" helloworld ")" helloworld"
  • indexOf(source: TEXT, searchValue: TEXT)NUMBER
    • Returns the position of the occurrence of the searchValue in a text. This method returns -1 if searchValue never occurs.
    • e.g. indexOf("hello world", "world")6
  • lowerCase(source: TEXT)TEXT
    • Converts a text to lowercase.
    • e.g. lowerCase("Hello")"hello"
  • upperCase(source: TEXT)TEXT
    • Converts a text to uppercase.
    • e.g. upperCase("Hello")"HELLO"

Math

  • min(source1: NUMBER, source2: NUMBER)NUMBER
    • Returns the smallest of two numbers.
    • e.g. min(0, 1)0
  • max(source1: NUMBER, source2: NUMBER)NUMBER
    • Returns the largest of two numbers.
    • e.g. max(0, 1)1
  • abs(source: NUMBER)NUMBER
    • Returns the absolute value of a number.
    • e.g. abs(-1)1
  • round(source: NUMBER)NUMBER
    • Returns the rounded value of a number.
    • e.g. round(1.5)2
  • floor(source: NUMBER)NUMBER
    • Returns the largest integer value smaller than or equal to a number.
    • e.g. floor(1.5)1
  • ceil(source: NUMBER)NUMBER
    • Returns the smallest integer value larger than or equal to a number.
    • e.g. ceil(1.5)2
  • sqrt(source: NUMBER)NUMBER
    • Returns the square root of a given number. If the number is negative, an error occurs.
    • e.g. sqrt(9)3
  • pow(source1: NUMBER, source2: NUMBER)NUMBER
    • Calculates the first number raised to the power of the second number.
    • e.g. pow(2, 3)8
  • sin(radian: NUMBER)NUMBER
    • Returns the sine of a number.
    • e.g. sin(90)-0.89
  • cos(radian: NUMBER)NUMBER
    • Returns the cosine of a number.
    • e.g. cos(90)-0.45
  • tan(radian: NUMBER)NUMBER
    • Returns the tangent of a number.
    • e.g. tan(45)1.62
  • asin(value: NUMBER)NUMBER
    • Returns the arcsine of x, in radians.
    • e.g. asin(0)0
    • e.g. asin(1)1.5707963267948966(PI / 2, 90°)
  • acos(value: NUMBER)NUMBER
    • Returns the arccosine of x, in radians.
    • e.g. acos(0)1.5707963267948966(PI / 2, 90°)
    • e.g. acos(1)0
  • atan(value: NUMBER)NUMBER
    • Returns the arctangent of a number.
    • e.g. atan(0)0
    • e.g. atan(1)0.7853981633974483(PI / 4, 45°)
  • random()NUMBER
    • Returns a random number between 0 and 1.
    • e.g. random() ➔ a random number between 0 and 1
  • random(min: NUMBER, max: NUMBER)NUMBER
    • Returns a random number between two given numbers.
    • e.g. random(1, 5) ➔ a random number between 1 and 5
  • randomInt(min: NUMBER, max: NUMBER)NUMBER
    • Returns a random integer value between two given numbers.
    • e.g. randomInt(1, 5) ➔ a random number between 1 and 5(integar)

Color

  • color(red: NUMBER, green: NUMBER, blue: NUMBER)COLOR
    • Returns a color value (Hex color code) based on the RGB value.
    • e.g. color(255, 255, 255)#FFFFFF
  • red(source: COLOR)NUMBER
    • Returns the red RGB value of a color code.
    • e.g. red(#FF0000)255
  • green(source: COLOR)NUMBER
    • Returns the green RGB value of a color value (Hex color code).
    • e.g. green(#FF0000)0
  • blue(source: COLOR)NUMBER
    • Returns the blue RGB value of a color value (Hex color code).
    • e.g. green(#FF0000)0

Type Conversion

  • text(source: NUMBER)TEXT
    • Converts a number to a text.
    • e.g. text(1234)"1234"
  • number(source: TEXT)NUMBER
    • Converts a text to a number. If the text is not a number, an error occurs.
    • e.g. number("1234")1234
  • color(source: TEXT)COLOR
    • Converts a text to a color value. The text must be in the form of a Hex color code (#FF0000), and if it isn’t, an error occurs.
    • e.g. color("#FFFFFF")#FFFFFF
  • format(value: NUMBER, format: TEXT)TEXT
    • Converts a number into a text. The number can be split into separate texts made up of any number of digits. Furthermore, numbers with decimals can be expressed, and the number of digits following a decimal point can be designated.
      number: the number that is to be converted into a text.
      formatText: the text that will be made up of the number. # is the placeholder for integers and 0 is a placeholder for fractional numbers. Additional numbers can be inserted into the text.
    • e.g. format(1234.567, "#,###.00")1,234.58
    • e.g. format(1234567, "#,###.00")1,234,567
    • e.g. format(1234.567, "#.###,00")1.234,57
    • e.g. format(1234.567, "#,##.00")12,34.57
    • e.g. format(1234.567, "#,###")1,235
    • e.g. format(1234.567, "#")1235
Language selector
TOP