Overlays

Guidelines for interactive image editing overlays.

The main UI elements of an overlay

An overlay is an interactive editing surface placed on top of a selected image. It lets users edit images and immediately preview their changes.

Common use cases for an overlay include (but aren’t limited to):

  • Adding filters
  • Blurring
  • Adjusting
  • Editing colours
  • Cropping
  • In-painting

Overlays work on selected raster images and/or vector images, so it's important to prompt users to choose the right image type.

The image selection UI for an overlay

  • Do show clear instructions that prompt users to select an image.
  • Do display a Critical Alert informing users if the chosen media type is not supported.
  • Don’t make users guess what they need to do to get started.

Learn more about Selection guidelines.

When an overlay is opened, remember the following important considerations:

  • Images can’t be moved or resized while the overlay is open.
  • A dark layer appears around the image, isolating it from the rest of the design.
  • Clicking outside the selected image closes the overlay and automatically saves any changes by rasterising the image.

Triggering an overlay in the UI

  • Do use a meaningful UI component to trigger the overlay’s opening.
  • Consider adding a label to the UI component to indicate its main function. For example: Edit image, Effect name, Add X effect, Draw on image.
  • Don’t open the overlay automatically when first opening the app.
  • Don’t automatically open the overlay when the user selects an image.
  • Don’t use labels like “Open overlay” or other technical jargon that users might not be familiar with.
  • Do use the object panel to house the main UI of your app.
  • Do add minimal UI components to the overlay, and only add more when it’s absolutely necessary to support the use case. For example: a light source UI control for a light effects app, or a brush for a painting app.
  • Do follow Canva’s design guidelines and tokens when building any custom UI components.
  • Don’t obscure the view of the selected image in the overlay.
  • Do show the LoadingIndicator on top of the overlay, while opening and saving the overlay.
  • Don’t use placeholder shapes as loading states in the overlay.

Learn more about Loading guidelines.

  • Do display edits to the overlay as they’re made.

How to save:

  • Do use a primary button to allow user to save any edits made in the overlay.
  • Do use a secondary button to cancel any edits made in the overlay.
  • Do ensure these buttons are visible at all times while the user is editing the image.
  • Aim for saving times under 5 seconds. If a process takes longer, the overlay will be terminated and changes will be discarded.

Undoing changes:

  • Consider adding a Reset changes button to enable users to restart their edits.
  • Consider adding Undo functionality to your app, letting users revert the last change made.
  • Avoid relying on the native Undo functionality, because this will undo the entire set of changes made in the app.