Annotating images

Open and frame the image#

Open a supported image in the IDE. The source image defines the initial frame; pan and zoom around the infinite workspace to arrange additional content. Decide whether the final image should show the source frame or a larger composition before placing annotations outside it.

Add annotations#

Select arrows, curved arrows, lines, rectangles, ellipses, or text from the toolbar. Adjust color and stroke properties, then place the object. Use the step counter for sequential instructions and the highlighter or freehand tool when a simple shape does not fit.

Keep labels short and place arrowheads at the exact UI element being explained. Use the eyedropper to sample a color when matching a product palette.

Organize layers#

Rename important layers and use grouping or multi-selection to move related annotations together. Lock a background or completed object to avoid moving it by accident. Align and distribute related labels and use snapping guides for consistent placement.

Finish the composition#

Crop, resize, rotate, or flip as needed, and add a backdrop or shadow when appropriate. Save the editable project before exporting so later text or layout changes remain possible without starting again.