Since Ditto’s launch, over 9,000 teams have used Ditto text components to systemize their copy and save time, establish more consistency, and speed up their teams’ workflows.

Over the years, we’ve seen teams use components in ways we didn’t expect. One of the most powerful? Using Ditto components to define templates. Teams would create fill-in-the-blank starter text and guidelines for common scenarios, like error messages, empty states, or confirmation messages.

For example, an error message might always need to include information on what went wrong and what action users need to take next — something like: “Sorry, we couldn’t [what the user was trying to do]. Please try again in a few minutes.” Anyone on a team could then take this template and fill it in for their specific use case (“Sorry, we couldn’t save your edits. Please try again in a few minutes.”), allowing them to write content faster and more consistently.

Today, we’re excited to be announcing formal support for content templates in Ditto!

With templates, teams can formalize common content patterns and speed up the writing of content and the design process as a whole. Templates also allow teams to scale up their text component libraries to be useful more quickly, by covering a wide range of scenarios. Even if the content for a specific scenario hasn’t yet been written before, designers can use a template in their mockups to avoid having to start from scratch, with the additional benefit of ensuring they’re following standards around style and tone.

How do templates in Ditto work?

In Ditto, you’ll be able to define a template that anyone on your team can use, in our web app or directly in Figma.

• Step 1: Head to your team’s Component Library in the web app.
• Step 2: Create a new draft component, and switch on the toggle to indicate it’s a template. Add square brackets [] around any placeholder text that should be filled:

In Ditto, templates are a special type of Ditto component, so you’ll have many of the same benefits — you’ll be able to reuse them in any project, as well as add additional guidelines or context on how or when they should be used via status, tags, and notes. They’ll also live in the component library, alongside all of your team’s existing components.

Why are templates useful?

Templates in Ditto allow teams to reduce workload and speed up the design process. With templates, you can:

• Write content faster. Designers won't have to start content from scratch, even when working on new features or product areas. They’ll be able to directly reuse a content template from the team library and customize it to their needs, saving time and brain power.
• Start systemizing your content more easily. You can benefit from systemization, even if you don’t have every single string componentized. Provide your teammates with templates so they have starter text and guidelines, and then turn text created from those templates into components later.
• Maintain flexibility and consistency as you scale. Templates allow teams to establish consistency, while also maintaining flexibility. Even as an organization and a product grows, standardized frameworks and guidelines established in content templates can continue to be reused and customized to cover new scenarios.
• Meet teammates where they're at. With templates, you can integrate content patterns directly into teammates' existing tools and workflows, instead of asking them to refer to external static websites or PDFs. Designers will be able to directly browse and reuse content templates right from within Figma, so they're getting the right information at the right time.

‍

To learn more, check out our full help guide.