Define the responsive behaviour of your objects (position, stretched, adjusted, ...) with the Size & Dynamic Positions parameters.

Enable responsive

To activate the responsive design, click the Size & Position Scale icon on the toolbar and click the Enable button.

enable_responsive.png

 

By activating this option, all your objects adapt automatically. If you want to change the behavior of an object, you can act on its Size & Position Scale parameters. Select the object and click on the icon in the toolbar.

size_position_scale.gif

 

Size & Position Scale

Position

With the pin, you allow an object to move as the edge also moves. The object moves according to the difference between the original (creation) size and the size of the device. Choose one or more directions.

If you pin an object to an unopposed edge, the distance between the object and the edge remains fixed. For example, if your object is placed 100 pixels from the right edge and you activate the pin on that edge, your object will always remain 100 pixels from that edge.

If you pin an object to an opposite edge, the position of the object changes to keep the same proportion between the distance from the center of the object and the opposite edge. The best example is an object centered between the right and left edge and pinned at these edges will keep its central position regardless of the size change.

Another example is if, in a 1000px wide project, an object is located 200px from the left edge and 800px from the right edge. By being pinned to these two edges, it will remain 20% of the left edge and 80% of the right edge in all layouts.

 

Size

Each object adapts its behaviour according to the size of the screen when it goes into responsive mode. You can change two parameters: position and size.

Position: the object moves according to the difference between the original size and the size of the device. Choose one or more directions.

Size: the object is resized horizontally and/or vertically. If the resizing involves both axes (horizontal and vertical), you can choose between 3 options:

  • Stretch: the object stretches according to the new size of the project: it can be distorted.
  • Aspect Fit: this option keeps the ratio of the object and its proportionality: it keeps the object in a limited area.
  • Aspect Fill: this option keeps the ratio of the object and makes sure that the object fills the limited area and does not exceed the area.

Was this article helpful?
1 out of 2 found this helpful

Create apps and interactive experiences without any coding

Easy-to-use ∗ Free ∗ No installation

Sign up free