How do I use Exact Dimensions?
Exact Dimensions gives you precise control over the position, size, spacing and layout structure of elements in your design screens.
Most users should move and resize elements visually with drag-and-drop first. Use Exact Dimensions when you need more control, such as matching positions across design screens, setting exact sizes, adjusting spacing, or editing the layer structure.
When should I use Exact Dimensions?
Use Exact Dimensions when you want to:
set an exact X or Y position
set an exact width or height
match element sizes across design screens
align elements more precisely
adjust spacing above or below an element
edit padding and layer structure
move elements between layers
fine-tune a layout after using drag-and-drop
For quick visual changes, drag-and-drop is usually easier. For precision, use Exact Dimensions.
Two ways to open Exact Dimensions
There are two ways to use Exact Dimensions in AppScreens.
Option | Best for |
|---|---|
Element Exact Dimensions | Editing one selected element’s position, size or spacing. |
Full Exact Dimensions | Editing the selected design screen’s layers, padding and layout structure. |
Use Element Exact Dimensions
Use Element Exact Dimensions when you want to precisely adjust one element.
To open it:
Click the design screen you want to edit.
Select the element on the canvas, or find it in Layouts & Elements.
Click the right-angle ruler icon beside the element.
Choose Percent or Absolute.
Adjust the element’s values.
Element Exact Dimensions lets you edit values such as:
X position
Y position
W width
H height
spacing above the element
spacing below the element
This is useful when you want one element to sit in a specific place or match another element’s size.
Percent vs Absolute
When editing an individual element, you can switch between Percent and Absolute values.
Percent
Percent values position and size the element relative to the design screen.
For example, a width of 50% means the element takes up half of the available design screen width.
Percent values are useful for responsive layout control and for keeping designs consistent across different output sizes.
Absolute
Absolute values use pixel measurements for the selected output size.
For example, if the selected output size is 1320 × 2868 px, the Absolute tab shows the element’s position and size in pixels for that size.
Use Absolute values when you want to work with exact pixel measurements for the current output size.
What do X, Y, W and H mean?
In Element Exact Dimensions:
Field | Meaning |
|---|---|
X | The element’s horizontal position. |
Y | The element’s vertical position. |
W | The element’s width. |
H | The element’s height. |
You can use these fields to place an element exactly where you want it on the design screen.
Use spacing above and below
Some elements also show structured spacing values, such as Above and Below.
Use these when you want to control the spacing around an element as part of the layout structure.
This is useful when you want more consistent spacing between text, devices, images, shapes or other elements.
Use Full Exact Dimensions
Use Full Exact Dimensions when you want to edit the structure of the selected design screen.
To open it:
Click the design screen you want to edit.
Open Layouts & Elements in the edit panel.
Click Exact Dimensions.
The full Exact Dimensions view is percentage-based and shows the design screen’s layout structure, including layers, padding and elements.
Use Full Exact Dimensions when you want to:
see how the design screen is structured
adjust layer spacing
move elements between layers
edit element width, height and left inset
add or adjust padding
pick a different layout
save the updated layout
Click Save when you are finished.
Move elements between layers
In Full Exact Dimensions, elements are shown inside layers.
Layers control how elements are arranged and stacked in the design.
For example:
lower layers can sit behind other elements
higher layers can appear on top
padding controls structured spacing around elements
You can drag elements between layers to change the design structure.
This is useful when you want to move a title, image, shape or device into a different layout position.
Pick a different layout
From Full Exact Dimensions, you can also choose a different layout style.
Click Pick a layout to select another layout structure for the design screen.
This is useful when the current layout is close, but you want a different arrangement of elements or layers.
Exact Dimensions vs drag-and-drop
Use drag-and-drop when you want to move or resize elements visually on the canvas.
Use Exact Dimensions when you need exact values or more structured control.
A good workflow is:
Use drag-and-drop to roughly position the element.
Use alignment guides to line it up visually.
Open Exact Dimensions to fine-tune the position, size or spacing.
Save your changes.
What if I can’t select the element I want?
If an element is hard to click on the canvas, open Layouts & Elements.
From there, you can select the element from the list and then open Exact Dimensions using the right-angle ruler icon.
This is helpful when elements overlap, sit behind other elements, or are partly off the edge of the design screen.