<- Back to all posts

Introducing Variants — for localization, user segments, and explorations

Jessica Ouyang
May 19, 2021

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.

A few of the use cases

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:

  • User segments — oftentimes, text in-product can differ for different user segments. Whether it's the difference between a "Welcome!" and a "Welcome back!" or state changes based on actions taken in the UI, we often heard of teams trying to manage the writing and delivery of this copy in spreadsheets or directly in the codebase.
  • Translations (i18n/l10n) — for teams looking for a lightweight solution to managing translations that integrates with both design and development, they can now use Variants to create different language variants of designs. With Variants, they can preview translations directly in the design without having to create mockups for each language!
  • Explorations — when we hopped on calls with potential users, we often saw writers doing their best to co-opt design tools for writing, repeatedly copying and pasting mockups just to test out different copy explorations. Using Variants for copy explorations, teams can test out and compare different variants directly in the design without recreating the mockup itself.

How variants in Ditto work

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.

An end-to-end solution

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.

What's next?

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!

Getting Started

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.