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.
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.
In Ditto, you can now create and insert variables in your text.
We currently support 3 types of variables your team can reuse in their product text:
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. 😁
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.