UX guidelines for content extensions

Canva’s content library is a big part of its charm. This page contains some guidelines for creating a content extension that behaves in a way that's familiar to users.

Choose the best layout

The layout of a content extension affects the appearance of content within the Canva editor. Your extension should use the layout most appropriate to the type of content it provides.

Grid layout

You should use the Grid layout if:

  • There is variability in the dimensions of the content.

  • There is a mix of transparent and non-transparent content.

  • The title of the content (and other metadata) is not essential to the user experience.

  • The extension doesn't organize content into containers.

  • Thumbnails exactly match the content that's added to the design.

List layout

You should use the List layout if:

  • There is no variability in the dimensions of the content.

  • Thumbnails must be displayed at full-width for them to be meaningful.

  • The content's metadata helps users differentiate between content (e.g. videos displaying their title and publish date).

  • The content's thumbnail is not an exact match for how it appears in the design (e.g. videos, maps, forms, etc).

Choose the best content type

The content type of an extension determines the type of content the extension can deliver to users. The selected content type affects the guidelines an extension needs to follow.

Image only

When the content type of an extension is Image only, the following requirements apply:

  • Images meet Canva's Upload formats and requirements.

  • Images are added to the design with the correct aspect ratio.

  • Thumbnails accurately represent the full-sized image.

  • Full-sized images are of sufficient quality for their intended use.

Embed only

When the content type of an extension is Embed only, the following requirements apply:

  • The URLs of the embeds are supported by Iframely.

  • Embeds are compatible with Canva's supported browsers.

  • Embeds are added to the design with the correct aspect ratio.

  • Thumbnails allow the user to identify (and distinguish between) embeds.

Image and containers

When the content type of an extension is Image and containers, the extension must follow the Image only guidelines. In addition, the following requirements apply:

  • The use of containers improves the user's browsing experience.

  • Opening a container loads content that belongs to that container.

  • Users can paginate through containers.

Add a search field to the extension

If possible, content extensions should provide a search field that allows users to search for content.

If an extension has a search field, ensure that:

  • Search results match the user's expectations.

  • Search results are returned in a logical order.

  • Search results are paginated.

  • Users can search for partial words.

  • Thumbnails accurately represent the content.

  • Thumbnails are clear and not pixelated.

You can also (optionally) customize the placeholder text of the search field. As with all text, it should follow the copy guidelines. These are some good examples of placeholder text:

  • Search images

  • Enter a location

  • Enter a website URL

  • Search your folders

Handle empty states

When a user opens a content extension, they should be shown some initial content, rather than an empty screen. Sometimes though, this isn't possible, such as when an authenticated user doesn't have media uploaded to their account.

If it's not possible to provide initial content, an extension must provide Empty state text. Canva displays this text when there is no initial content.

If an extension provides Empty state text:

  • Keep the message concise, informative, and actionable.

  • Use 1-2 sentences.

  • Use fewer than 150 characters. This avoids overflow and allows the text to be translated into languages that may require more characters to convey the same meaning.

This is a good example of Empty state text:

Content from your Dropbox account will appear here. Check you have content in your account with Dropbox.