Working on product copy text inherently requires thinking through all of the potential interactions a user might have with your product. In many situations, copy shown to users doesn't get mocked up in the designs, whether it's error messages, localized text, or customized messaging for each user segment.
From talking to teams about their workflows, it became clear to us that we needed to provide a way to manage this type of text in Ditto. While teams can currently use Ditto to sync copy from their mockups to production, we realized that the text in designs is often only a subset of the text that's actually surfaced to users and needs to end up in development.
Today, we're excited to launch Variants in Ditto, which allow teams to write and preview text variations for frames in their projects.
We wanted Variants in Ditto to be flexible enough for all of the different ways we've heard teams want to write and maintain variant text. Just a few of the use cases we're excited for it to help with include:
You can now create variants of frames in Ditto projects. On a variant, you can edit any of the text items to differ from the initial text of the frame the variant was created from (also known as the Base!). Any text unedited in the variant will keep the text from the Base.
You can also preview variants directly in the design using our Figma plugin! When clicking in Figma on a frame that has variants, you can temporarily switch the variant being displayed. This way, you can see how variants look in your design without having to mock up each individual screen in each variant.
Any variants created will also get included in JSON exports or our developer integrations — meaning you can directly go ahead and use them for developer handoff!
You can also view all the variations of a single text item by opening the new Variants tab in either the web-app or plugin. This tab will appear if the selected text has variants. Text in a variant will keep all of the organization set in the Base, including blocks and hidden text.
When we first sought to build a feature to handle variants in Ditto, we asked ourselves: what does this look like in a tool that handles text from design all the way to production? After all, product copy is an entity separate from design and code but interacts with both.
Compared to existing tools in the market that handle "variant-like" use cases (think localization tools, A/B testing frameworks, etc.), Ditto at its core is about building that infrastructure for product text in all of its stages — from draft to design to production. Many of these tools treat text that's not in the "happy path" for users as just strings tacked onto the UI right before development, without context of how they exist in the user experience.
Text that isn't mocked up often doesn't live anywhere in particular, and ends up getting written in spreadsheets, docs, or just directly as strings in the codebase. This makes it hard for teams to treat this text like a real and essential part of the user experience. When making Variants, we knew that bringing it into our design and developer integrations was crucial, even in the first release.
We're super excited for all the ways teams can use Variants in Ditto for their own content! We also know that this is just the start. A few things in our immediate-term roadmap include Component Variants, Variant-based comment threads, and more. If you have any suggestions or feedback about Variants as you try it out in your own projects, please let us know — we'd love to hear!
You can create Variants in any project you currently have in Ditto! Just hover over a frame and click the "Add Variant" button.
For more information, check out the Variants help guide.
