How do I add and customise shapes?
Use a Shape element when you want to add simple editable design shapes to a screenshot.
Shapes are useful for highlights, overlays, dividers, labels, background blocks, decorative elements and callout areas.
Shape elements are different from Scribbles & Doodles. Shapes are editable elements such as rectangles, circles and lines. Scribbles & Doodles are graphic assets that sit inside an Image element.
Add a Shape element
To add a shape:
Click the screenshot you want to edit.
Open Layouts & Elements in the edit panel.
Click Add element.
Choose Shape.
Select the shape type you want to use.
You can also click the + icon beside the Layouts & Elements heading to add a new element.
Open the Shape tab
To edit an existing Shape element, click the shape directly on the screenshot.
This opens the Shape tab in the edit panel.
You can also click the Shape tab in the edit panel manually. If the shape is hard to select because it is behind another element or partly off the screenshot, use Layouts & Elements to find and manage it.
Choose a shape type
In the Shape tab, choose the type of shape you want.
Available shape types can include:
Rectangle
Square
Circle
Ellipse
Triangle
Line
Choose the shape type that best fits the design detail you want to create.
Adjust sizing
Use the shape sizing settings to control how the shape fills its available element area.
For example, you may want the shape to fill the full bounds of the element, or behave differently depending on the shape type.
If the shape does not look the right size, resize the Shape element on the canvas or use Exact Dimensions for more precise control.
Change fill
Use Fill to control the inside colour or style of the shape.
Depending on the selected shape, you can choose options such as no fill, a colour fill, or other available fill styles.
Use fill when you want to create blocks, highlights, overlays, background panels or decorative colour areas.
Change stroke
Use Stroke to control the outline of the shape.
You can use stroke settings to add or remove an outline and adjust the stroke colour.
This is useful for outlined circles, boxes, dividers, callouts or decorative borders.
Adjust stroke width
Use Stroke width to control how thick the shape outline is.
A small stroke width works well for subtle outlines. A larger stroke width can make the shape more prominent.
Adjust corner rounding
For shapes that support it, use Corner rounding to soften the corners.
This is useful for rounded rectangles, cards, labels, badges or background blocks.
Move, resize or rotate a Shape element
The quickest way to move or resize a shape is directly on the canvas:
Hover over the shape on the screenshot.
Click the move icon in the small toolbar that appears.
Move, resize or rotate the shape on the canvas.
Click Save positions or the green tick when finished.
You can rotate a Shape element by using the rotate handle in drag-and-drop mode, or by clicking the rotate icon next to the Shape heading in the edit panel.
If the shape is hard to select, use Layouts & Elements to find it and enter drag-and-drop mode from there.
Use Exact Dimensions for precise placement
Use Exact Dimensions when you want precise control over a Shape elementβs position, size or spacing.
You can open Exact Dimensions by clicking the right-angle ruler icon beside the Shape element, or by clicking Exact Dimensions inside Layouts & Elements.
For an individual Shape element, you can adjust values such as:
X position
Y position
width
height
spacing above or below the element
You can use Percent or Absolute values for an individual element.
Shape elements vs Scribbles & Doodles
Use a Shape element when you want an editable geometric shape, such as a rectangle, circle, triangle or line.
Use Scribbles & Doodles when you want hand-drawn style graphics such as arrows, callouts, blobs, waves, sparkles or doodle-style marks. Scribbles & Doodles are added through an Image element.