UX guidelines for content extensions
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.
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.
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 (for example, videos displaying their title and publish date).
- The content's thumbnail is not an exact match for how it appears in the design (for example, videos, maps, forms, etc).
You can configure an extension to support one or more content types. This determines the type of content the extension can import into Canva. You must only enable the content types that your extension demonstrably supports at submission time.
There's additional guidelines for each content type.
- 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.
- The containers are organized the way they’re shown on the source platform (structure, hierarchy).
- The containers are shown in the search results.
- 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.
- 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.
Thumbnails in the side panel provide users a glimpse of what the app can offer.
- Be clear and not pixelated.
- Match the aspect ratio of the full-resolution media.
- Accurately represent the content.
- Be under 200 KB in size.
- Be sorted in a logical order (newest first, alphabetically, etc).
- Show a meaningful, human-readable label (no timestamps or special characters).
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
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.
The content the app returns reflects not only on the app’s quality but also on Canva’s credibility. Review the content and make sure it meets Canva’s standards.
- Show only child-safe content (no explicit, offensive, and violent content).
- Avoid watermarked content.
- Follow a logical order (newest to oldest, oldest to newest, etc)
- Show human-readable labels.
- Upload the content with a new ID when it’s edited.
- Match the content as shown in the source platform.