Templates

In Ditto, you can create template components as a starting point for text and to help provide guidelines and structure for how text should be written in different scenarios. For example, you could create a template for the standardized format of an error message (”Sorry, we couldn’t [what the user was trying to do]. Please try again in a few minutes.”).

Templates can help you and your team get up and running in Ditto faster and write with more consistency and cohesion.

‍

Note

A template in Ditto is considered a type of Ditto component. Just like any Ditto component, you can reuse template components in your projects. However, unlike regular components, once you begin editing a text item attached to a template component, it will get detached.

You can identify a template component by its blue badge:

‍

Creating a template

To create a template component, head to the Component Library in the web app, then click New Component > Draft Component.

Fill out the details of the template component, then turn on the Template toggle at the bottom. The resulting template component will have a badge that indicates it’s a template. Just like a regular draft component, it’ll be yellow to indicate it’s not being used in any projects yet.

You can use square brackets [ ] to indicate placeholder text that should be filled in with a teammate uses the template.

Note: you can’t currently create a template component from within a project in the web app, or within the Figma plugin.

‍

Using a template

You can attach a template component the same way you can use a regular Ditto components. In the web app or Figma plugin, select a piece of text, then Create or attach Ditto component. In the dropdown, you’ll be able to identify a template component via the badge.

Here’s where the behavior changes from a regular component: once you attach a template component to a text item, it’ll stay attached until it’s edited to replace placeholders. If you edit any metadata (text, status, tags, notes), the text item will automatically get detached from the template component. It will get turned into a regular, non-component text item.

Notes:

• You can search just within templates by typing this "template:" and then your search query after it.
• Template components will not show up in the Component Suggestions or Setup Suggestions.

‍

Managing a template

To manage a template component (edit, delete, rename, etc.), head to the Component Library in the web app. Any changes you make here will apply to all text items across all projects that are currently still attached the template component.