In building Ditto, we set out to build a single source of truth for product text — from design all the way to production. Despite the importance of product text, existing workflows force teams to copy and paste between a patchwork of tools (mockups, docs, Slack, tickets), with an enormous amount of manual work for everyone that touches product copy.

From working with customer teams, we heard over and over again that there was one aspect in existing workflows that (1) took a ton of manual effort from developers and (2) prevented text in mockups from being used directly in production — variable interpolation.

‍

How does variable interpolation work without Ditto?

In speaking to lots of developers about their workflows, the process of interpolating dynamic values in text was menial, brittle, and error-prone. Developers had to manually rewrite and restructure text from mockups, create their own fallback text, and do the work of bridging the gap between mockups and real data. And just updating the same link in multiple places required searching the entire code base!

These same problems surfaced in the workflows of designers and writers. Without a way to indicate that parts of the product copy were dynamic, writers and designers missed out seeing parts of text that should be referencing the same value and left text written in mockups up to developers' interpretation.

Building a solution that was seamless and made it easier for everyone involved required rethinking what that process could look like from beginning to end.

Today, we're launching Variables in Ditto, which takes care of interpolating dynamic values in product text.

‍

How do Variables in Ditto work?

In Ditto, you can now create and insert variables in your text.

• Engineers can immediately use text with Ditto Variables in development. Text will automatically be formatted with mustache interpolation ({{variableName}}). Variable metadata (such as links, fallbacks, and examples), will also get included when you fetch text via our API/CLI.
• Anyone can create and reuse Variables in their text through our UI. Whether you're a writer, designer, or developer, you can indicate which parts of your text are dynamic, what it should look like, and reuse variables in your workspace.
• Text in designs will sync with the variable's example value, allowing the mockups to still represent what the UI would look like when a user encounters it.

We currently support 3 types of variables your team can reuse in their product text:

1. 🔤 Strings — commonly interpolated string variables include names, selections, and displayed inputs. (Example: "Hello {{firstName}}!" as "Hello Natasha!")
2. 🔢 Numbers — commonly interpolated number variables include counts, prices, and elapsed minutes. (Example: "Last edited {{minsElapsed}} min ago" as "Last edited 12 min ago")
3. 🔗 Links — by reusing link variables in Ditto, you only have to update links in one location, rather than hunting down all of the occurrences of a link in development. (Example: "Click here")

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

What's next?

We're beyond excited for all the ways Variables can help streamline the workflows of everyone that touches product copy.

We also know that it's just the start! A few things in our immediate-term roadmap include support for Variables in Variants, additional Variable types, and pluralization support. If you try it out, we'd love your feedback. 😁

‍

Getting Started

Like other features in Ditto, we hope Variables makes it easier for teams to focus on the product that they're building and what they're communicating, rather than all of the menial work in between.

You can now create and insert variables anywhere you can edit text in Ditto — in projects, in our Figma plugin, and in the component library! In the edit panel, the "+ Insert Variable" button will appear if when you click into the text input box. Just click to begin!

If you're new to Ditto, you can give Variables a spin in any project in Ditto. To start a new project, open up our Figma plugin in any of your Figma files or log into our web-app. 🙌

📖 For detailed information, check out the Variables Help Guide.

‍

Update 3/21/23: We've added list and map variable types to Ditto! You can read more about them here.