Build your app design on each page by choosing from the Elements drawer on the left, and use Properties on the right for styling.
If you don’t see the Element you need, you may be able to achieve what you’re looking for via a Plugin.
Each Element represents a native iOS or Android class, allowing you to display information and media, to capture user input, and to create the experience you need. Hover over an Element to see info on it together with a link to its class reference.
Drag Elements onto the Canvas, where you can resize and position by clicking and dragging an Element or its handles.
You can place certain Elements inside others, creating parent and child relationships. You will see a dotted line around a valid parent Element on the Canvas when dropping a child Element.
Use the smart guides that appear while dragging an Element to center or align its position.
You can also use the Element Tree on the right to manage the structures within your page.
With an Element selected on the Canvas (or in the Element Tree on the right), set its styling and layout constraints in the Properties tab on the right.
It’s best to rename your Elements to make them easier to identify while working on your project, and to make your source code more readable – use the Rename button next to the Element name.
Use the Styles controls to customize the available Properties for the selected Element, which include text values, fonts, colors, and more.
You can set certain Properties during user interaction states, to configure how an item will appear when selected or highlighted.
You can set Element properties while your app is running using the Set Value action.
Use the Constraints section to set the position of an Element relative to its parent Element. Use constant values for fixed positioning or proportional values to create layouts that will scale to different screen sizes.
Once an Element is dropped, its top left corner becomes a fixed point – if resized, it will resize to the upper left corner.
If the constraints for an Element are grayed out, it means that they are not editable values as they are predefined by the platform class.
When you’re ready to specify what will happen when the user interacts with an Element, you’ll use the Properties > Events section.