How do I move and resize elements with drag-and-drop?

Drag-and-drop lets you move and resize elements directly on the canvas.

This is the fastest way to adjust a design screen visually. You can drag elements into position, resize them on the canvas, and use alignment guides to line things up with other elements and screens.

Use drag-and-drop when you want to quickly adjust elements such as text, devices, images, shapes, badges, icons, doodles or other design details.

Open the design screen you want to edit

To start:

Open your project in the AppScreens designer.
Click the design screen you want to edit.
The edit panel opens for that design screen.
Select the element you want to move or resize.

You can select an element by clicking it directly on the design screen, or by finding it in Layouts & Elements.

Enter drag-and-drop mode

You can enter drag-and-drop mode in several ways.

Use whichever is easiest for the element you are editing:

hover over an element on the canvas and click the move icon
open Layouts & Elements and click the move icon next to the heading
click Drag and drop inside Layouts & Elements
click the right-angle ruler icon for an element, then click Drag & drop
on Mac, use ⌘ + K

Once drag-and-drop mode is active, the selected element can be moved or resized on the canvas.

Move an element

To move an element:

Enter drag-and-drop mode.
Click and drag the selected element on the canvas.
Move it into the position you want.
Use the alignment guides to help line it up.
Click Save positions when you are finished.

Alignment guides help you line elements up with the centre of the design screen and with elements on other design screens.

Resize an element

To resize an element:

Enter drag-and-drop mode.
Select the element.
Drag the resize handles on the element.
Adjust the size until it looks right.
Click Save positions when you are finished.

This is useful for quickly resizing devices, images, shapes, text blocks and decorative elements.

Use alignment guides

While you drag elements, AppScreens shows alignment guides.

These help you:

centre an element on a design screen
line up elements with each other
match positions across multiple design screens
keep spacing visually consistent

Alignment guides are especially useful when you want titles, devices, badges or decorative elements to line up across a whole screenshot set.

Use keyboard nudging for small adjustments

After selecting an element, you can use keyboard shortcuts for smaller movements.

On Mac, the shortcut panel shows:

Action	Shortcut
Enter drag-and-drop mode	⌘ + K
Save positions	Enter
Nudge selected element	Arrow keys
Nudge faster	⇧ + Arrow keys

Use arrow keys when dragging is close, but you want to make a small final adjustment.

When should I use Exact Dimensions instead?

Use drag-and-drop when you want to move or resize elements visually.

Use Exact Dimensions when you need precise control over:

X position
Y position
width
height
spacing
padding
layer structure

You can open Exact Dimensions by clicking the right-angle ruler icon beside an individual element, or by clicking Exact Dimensions inside Layouts & Elements.

A good workflow is to use drag-and-drop first, then use Exact Dimensions only if you need to fine-tune the final values.

What if I can’t select the element on the canvas?

If an element is hard to click, hidden behind another element, or partly off the edge of the design screen, open Layouts & Elements.

From there, you can select the element from the list and then enter drag-and-drop mode.

This is often easier when working with overlapping images, shapes, doodles or decorative assets.