All layers have several properties in common—name, placement, and fill. Text, gesture, buttons, and image elements also have additional specific properties.

To see this panel, either click a bounding box on the canvas or select an element in the Layers panel. The type of the element you select appears at the top and gets highlighted in the respective panels on the side.


Enter a descriptive name that clearly identifies the element.


Tip: To be able to distinguish between multiple transitions, include the From and To scene names in gesture names, for example, “Loop 2 to Action 2.”


Click and drag the element bounding box to its desired position on the screen and use the side and corner handles to resize it as needed.

Use these controls to fine-tune the size (Width and Height) and/or its position (X and Y coordinates) on the screen either using relative percentages or pixels.

  • Use decimals from 0 to 1 for relative percentages, with 1 being equal to 100%.
    For example, to cover exactly one half of the screen at the top, select Relative % and enter 0 for X and Y, 1 for W, and .5 for H. To cover the entire screen,  enter 0 for X and Y, 1 for W and H.
  • To see the values in pixels, select Pixel and update the values accordingly.

Tip: Allow generous space for tapping gestures on the screen. Use the full screen for swiping.

Initially Visible

Select this checkbox to make this element immediately visible in the demo, before any assets are displayed. This checkbox is typically used for layers nested inside containers and allows you show and hide containers and their contents without going through the tedious process of make each nested element visible or invisible. 


Click to select a background fill color of the element bounding box.

Tip: Fill color comes in handy for testing of invisible elements like gestures and containers.

Updated May 04, 2019