INDUSTRIES

Automotive

Aviation

Finance

Gaming

MedTech

IoT

Digital Products

USE CASES

For Enterprise

For Individuals

For Teams

For education

KEY FEATURES

Hardware & System Integration

Beta

ProtoPie MCP

Multi-Device Prototyping

Interaction Logic

Developer Handoff

ProtoPie AI

New

User Testing

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

Blog

eBooks

Clients Success Stories

Events & Webinars

ProtoPie Gallery

PRODUCT LEARNING & SUPPORT

ProtoPie School

Download ProtoPie

Product Documentation

Community

INDUSTRIES

Automotive

Aviation

Finance

Gaming

MedTech

IoT

Digital Products

USE CASES

For Enterprise

For Individuals

For Teams

For education

KEY FEATURES

Hardware & System Integration

Beta

ProtoPie MCP

Multi-Device Prototyping

Interaction Logic

Developer Handoff

ProtoPie AI

New

User Testing

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

Blog

eBooks

Clients Success Stories

Events & Webinars

ProtoPie Gallery

PRODUCT LEARNING & SUPPORT

ProtoPie School

Download ProtoPie

Product Documentation

Community

Menu

Syntax

Just like human languages, formulas in ProtoPie have their own set of rules and principles. These rules, known as syntax, govern how different elements such as text, numbers, layer properties, and variables are combined to create a formula.

Think of syntax as the framework that guides you in assembling these elements to achieve the desired outcome. By understanding and following the syntax rules in ProtoPie, you'll be able to create powerful and dynamic formulas that bring your prototypes to life.

Using Literal Values

You need to follow specific rules when using elements such as layer properties, text, and numbers in formulas.

Layer property

To refer to a layer, use backticks (`) around the layer name. To avoid confusion, we strongly recommend using unique names in layers.

To use a layer property, add a period (.) after the second backtick followed by the property.

Learn more about layer properties.

Text

Use double quotation marks (") around the text.

Text with multiple lines

To add a line break, add "\n" between words or characters.

Number

Use Arabic numerals (0-9) only.

Color

Use colors in the #FFFFFF format (hex color code).

Variable

To refer to a variable, use the variable name as it is. A variable name can only contain Latin alphabetical letters, numbers, and underscores.

Learn more about variables.

Doing Calculations

To do simple calculations, use the basic arithmetic (+, -, *, /) and modulo (%) operations.

Arithmetic Operations

The basic arithmetic operations for numbers are addition (+), subtraction (-), multiplication (*), and division (/).

Modulo Operation

To calculate the remainder of a division, use the modulo operation (%). For example, 5 % 2 results in 1, simply because 5 divided by 2 has a quotient of 2 and a remainder of 1.

Combining Text

Arithmetic operations usually apply to numbers. However, to combine text, it's possible to use addition (+). When a text is "added" to another text, the result is a new text with the two texts combined.

Text + Text

Use the addition (+) sign to combine two or more texts. As a reminder, always use double quotation marks (") around the text.

Text + Number

Use addition (+) sign to combine two or more texts and numbers. The result is always a new text.