Adding responsive behavior

Introduction to responsive properties

Here is an example of responsive behavior:

In the video, the user is editing the text object via a connected input field. The white rectangle behind the text automatically adjusts its position, size and corner radius. This is because its properties are not static, but expressions. Here are the responsive properties of the rectangle:

Y =         SUB(text1.top, MULT(text1.height, 0.05))
Width =     ADD(text1.right, MULT(text1.height, 0.3))
Height =    MULT(text1.height, 1.1)
Radius =    MULT(text1.height, 0.55)

All four expressions above are using functions and subproperties.

Depending on how much you enjoy working with math, you will find it more or less intuitive to create expressions like the ones above. Understanding how the four expressions above shape the rectangle will help you create your own expressions. The following is a detailed explanation:

The frame of reference

Before we look at the individual expressions, it is helpful to first understand the frame of reference – i.e. the directions in which the properties grow or shrink. Take a close look at the markings on this screenshot:

The X and Y coordinates start in the upper left corner. X points to the right and Y points down. The width and height of the rectangle also grow from top left to bottom right, starting at the origin (X and Y position) of the rectangle.

Y

Y =         SUB(text1.top, MULT(text1.height, 0.05))

In simple terms, the Y-position of the rectangle is the Y-position of the top edge of the text minus 5% of the text height. Since the Y-direction increases downwards, the rectangle is moved upwards by the subtraction.

Why subtract 5% of the text height? -> To add padding above the text.

Width

Width =     ADD(text1.right, MULT(text1.height, 0.3))

Similar to the Y position, a percentage of the text height is added to (in this case) the right edge of the text. 30% of the text height is used for the padding on the right side.

Height

Height =    MULT(text1.height, 1.1)

The height of the rectangle is 110% of the text height. Since the rectangle has been moved upwards by 5% of the text height, its own height must be increased by twice this amount to add the same amount of padding to the top and bottom edges. Remember that the direction of the height (by default) is downward.

Corner radius

Radius =    MULT(text1.height, 0.55)

To achieve the pill-shaped side of the rectangle, the corner radius must be half its height (or, to be more precise, half of the shortest dimension – which in this case is the height). Since the height is 110% of the text height, half of that is 55%.

The Smart Expression Editor

The Smart Expression Editor is designed to simplify the creation of expressions. You can click on functions, sub-properties, variables or static values to insert them as building blocks for your expression. Each building block comes with a detailed description and examples of how it works.