New to Ditto? You've come to the right place! This quick-start guide will help you learn all the basics. Soon, your team will have a single source of truth for all of your copy — everyone will know what's final and what's not, your mockups will always stay up-to-date with the latest, and all your copy feedback will live in one place! 🙌
Quick note before you read on: Ditto has three parts — a web app, a Figma plugin, and developer tools. In this article, we'll be covering set up using the web app and Figma plugin. To learn more about our developer tools, head here!
When you open up our Figma plugin for the first time and sign in, you'll be given access to our our web app and then get taken through a short onboarding flow before landing in your workspace.
In order for Ditto to be your team's source of copy truth, you'll need to get some copy into your workspace! Let's start by creating a new Ditto project by importing text from a Figma file.
1. Find a Figma file you want to work on, and copy the link. Tip: if you're using Figma for Desktop, you can find it by clicking the "Share" button.
2. Import your Figma file.
3. Congratulations, you've successfully created a new project in Ditto!
The text in your Ditto projects is automatically displayed by the Figma pages and frames from your file. We offer a lot of options for you to organize that text further, though, so it's useful for your team specifically. Don't worry if it takes some time to figure out how best to customize Ditto to fit your team's workflow!
1. Edit panel
The Edit panel is where you can edit the text itself, or add details like notes, tags, and status. Mark status so your teammates know what's still being worked on and what's not, and add notes to give additional context. Use tags to label copy (ex: H1, CTA, etc.) to make it easier to search for in the future.
When working with lots of stakeholders, it can be easy to lose track of who's doing what, who made what decision, or how copy got changed from one thing to another. In Ditto, you can view a log of all edits made in your project by heading to the Activity tab! You'll be able to see exactly who did what when as well as comment and @mention teammates.
In the web app, you'll be able to see a Figma image preview so you don't lose visual context. In the plugin, click any text box (or several!) in your Figma file and head to the Selected tab to find the edit panel.
2. Editing and selecting multiple
You can select and edit multiple pieces of text at once to speed up your workflow!
In the web app, hold down shift or command/control to select multiple. In the Figma plugin, you can click multiple text boxes in your Figma file and make edits in the Selected tab.
3. Synced Figma frames and pages
Remember when we selected the pages and frames we wanted to work on during import? These are the Figma pages and frames that are synced to your Ditto project, and define the structure of your Ditto project.
In the web app, you'll be able to see this by heading to the panel on the left (the Frames List). You can toggle between the Figma page you're working on by clicking the dropdown, and then view the frames on each of those pages. You can also drag to reorder the frames, or pin any frame to move it to the top.
You can also always change which pages and frames from your Figma file are synced to Ditto at any point!
In the web app, head to the Frames List panel on the left and click "Manage." Select/deselect frames in the modal to change the Figma pages and frames that are synced to your Ditto project.
In the Figma plugin, you can un-sync entire pages, or sync in new frames. To un-sync a page, click the three-dot menu in the top right, then "Settings," then scroll to the "Synced Pages" section. To add new frames, select them in the Figma file, and then head to the "Selected" tab in the plugin and click the "Include frames" button.
Ditto has several features to help you organize your project to make sure the right text is being worked on and any stakeholders dropping in can quickly get up-to-speed.
With Blocks, you can create labeled content groups that help establish hierarchy and context within your Ditto projects. We see lots of teams use these when moving over from copy docs or setting up copy to present to stakeholders for review.
You can create Blocks in the web app, or in the Figma plugin:
Hide text you're not working on to keep your project tidy. Note that this won't affect your Figma file at all and will just hide the text from view in Ditto!
In the web app, select a text item (or multiple using shift or command/control) and click "Hide selected from view" in the right-side Edit panel.
In the Figma plugin, select 1 or more text boxes in your file and click the "Hide in Ditto" button.
Once you feel good about your project setup, it's time to invite your teammates! Click the "Share" button at the top of your project, enter your teammates' emails, decide which role they'll be (admin, editor, or commenter), and write a quick message.
To help them settle in, leave a few comments on text you want their feedback on. To add a comment, click on any text item and head to the Activity tab. You can leave a new comment and even @mention any teammates in your workspace to notify them via email!
Tip: you can see the status of any piece of text directly in the layer name of the Figma file!
In addition to collaborating on copy for individual projects, you can use Ditto to build a content design system to promote consistency across all your projects. You'll be able to define reusable content components to scale your content, standardize content patterns, and empower everyone on your team (from designers to writers to PMs!) to work faster.
1. Create Ditto components for anyone in your team to use.
Ditto components are pieces of text that get synced across projects. Edits to the text or metadata of a component automatically get applied to all of its instances, even across Figma files!
You can create a Ditto component out of any text in your project (just click "Create or attach component" in the Edit panel), or draft a completely new one in your component library in the web app. These will be available for any teammate in your workspace to use.
Ditto components allow you to build a reusable bank of text for your team so you can easily maintain copy consistency across the surfaces of your product. They're super powerful but can take time to get comfortable with, so don't be afraid to just start with one component and build up as you go! Check out our guide on components to see all the possibilities.
2. Create and add Variants to map out copy variations for screens.
Ditto Variants allow you to write and preview variations for text in your project. We often see team use this feature to manage text that might not necessarily get mocked up in the designs, whether that's translations, audience-specific copy, explorations, or non-happy path error copy.
To create a variant, you'll need to use the web app. Just hover over the top of a frame in your project, click "Add a variant," and type in the name of a new variant. Once you save, you'll be able to edit any of the text in the new variant tab to differ from the "base" text (ie. what's on the Figma file).
You can then preview variants in your Figma mockups using our Figma plugin. Open up the plugin, head to the Selected tab, click on a Figma frame with a variant, and then choose a variant in the "Preview Variants" dropdown. This will temporarily display the text variations you added for that frame directly in the design, without messing up the original Figma file or requiring you to create a whole new set of mockups with the variant text!
Variants live at the workspace-level, so you can reuse variants across projects. Read our full guide on variants here →
If you've been working out the web app, now's the time to sync those changes with your Figma mockups so they can stay up-to-date! If you have a Figma editor license, open up the Ditto plugin in your file, and click on the "Resync" button in the top right. Otherwise, ping someone on your team to open up the Figma plugin and resync your changes.
You'll see any text changes immediately get updated in the file, and a list of all changes appear in the plugin. You'll also see icons get added to the layer names in the Figma file that correspond to status!
You can also use Ditto to sync your changes to production and effortlessly hand copy off to developers. Check out this page for more info!