UX guidelines for editing extensions

Some of Canva's most popular features are editing extensions. This page contains guidelines for creating editing extensions that help Canva's users level-up their creativity.

Generate an unsurprising output image

An editing extension should never compress, resize, or transform the user's image in an unsurprising way.
Specifically, the output image must:
  • Be the same file format as the input image.
  • Have at least the same resolution as the input image.
  • Have the same aspect ratio as the input image.

Provide users with presets

Presets allow users to apply predefined effects to their images in a single click. It's not always practical for editing extensions to offer presets, but if it is, then it's a great way to help users create amazing designs in less time.
Specifically, presets:
  • Provide users with instant gratification.
  • Hide the initial complexity of rich controls.
  • Give apps more real estate in the Edit image panel.
If an extension has presets, it must meet the following guidelines:
  • The extension provides at least four presets.
  • Preset thumbnails help the user identify the outcome of selecting the preset.
  • Preset thumbnails are at least 256px × 256px.
  • Generating preset thumbnails doesn't cause excessive CPU or memory usage.
  • If a user doesn't tweak a preset's settings, they still end up with a great design.
To learn how to add presets to an editing extension, refer to Presets.

Use rich controls (with some restraint)

Rich controls make editing extensions more powerful, but if an extension has too many controls, or if it's not obvious how to use them, users may feel overwhelmed and confused.
To make the most of rich controls:
  • Use as few controls as possible.
  • Provide clear, accurate labels for the controls.
  • Update the preview of the user's image when the user interacts with a control.
  • Focus the extension's experience on its essential functions.
To learn more about rich controls, refer to Rich controls

Handle errors gracefully

An extension that crashes frequently is the opposite of delightful. To learn how to gracefully handle errors (and report errors to Canva), refer to Error handling.

Improve the performance

The faster an editing extension runs, the better. You can also use loading spinners to improve the perceived performance of the extension.