Part 1: Sync your Figma files

In the next few guides, we’ll walk you through the fundamentals of setting Ditto up for your team. By the end, you’ll have a single source of copy truth for your team that allows you to reuse text and is connected to design and development. Here’s an overview of what we’ll cover:

1. Part 1: Sync your Figma files (you’re here!)
2. Part 2: Populate your component library
3. Part 3: Sync to development
4. (Bonus!) Copy review workflow

This order is based on what we’ve seen work for teams, but if you have string files from your codebase, you can also skip straight to part 2 to import those first if you'd like!

‍

Importing a Figma file

In order to build your team’s source of copy truth in Ditto, you’ll need to get some copy into your workspace! You can do this easily by importing text from your Figma files.

Each Figma file will get brought into Ditto as its own project. In the next section of this guide, you’ll learn how to componentize your text so that it can be reused across projects.

For the best import experience, use Ditto’s Figma plugin directly in the Figma file. You can also use Ditto’s web app.

Figma plugin

• Open the Figma file you’d like to import.
• Run Ditto’s Figma plugin (click the Resources icon, then the Plugins tab, then search for Ditto and click Run). If it’s your first time, sign in with Google or Azure AD.
• Paste the link to the Figma file. In the file itself, click on the frames you’d like to import to Ditto.

Web app

• If it’s your first time, head to https://app.dittowords.com and sign in with Google or Azure AD.
• Open the Projects page. Click Start a new project, then Import a Figma file.
• Paste link to the Figma file you’d like to import. Then, select the frames (and pages) with text you’d like to sync to Ditto.

You can do this for as many Figma files as you’d like. Remember: each Figma file maps 1:1 to a Ditto project.

‍

Keeping Ditto and Figma synced

Connecting a Figma file to Ditto isn’t just a one-time import — you’ll be able to continuously sync changes back and forth between the Figma file and corresponding Ditto project. This makes it easy to ensure your Figma mockups are always up-to-date with the latest copy.

To pull the latest changes from Ditto into a Figma file:

• Open up Ditto’s Figma plugin in the file.
• Click the Resync icon in the top right.
• The text in your Figma file will now be updated with the latest changes from Ditto, and you’ll be able to see a summary of what’s changed in the plugin. You’ll also see status indicators for any text layers that have been assigned a status in Ditto
• (If you don’t have edit access to the Figma file, just ping someone on your team to open up the Figma plugin and resync your changes!)

‍

Automatically sync new Figma frames into Ditto

If you want to make sure you don’t miss a frame while a designer is iterating, you can automatically sync any new Figma frame into Ditto.

‍

To turn on this functionality, just click the 3 dots in the top right corner of your project, and select “Sync Settings and Automation” from the dropdown list. This modal will give you the option to automatically sync new frames. This will automatically sync any new frames detected in the linked Figma file, so you can keep pace with your designer’s iterations.

To sync new frames to the Ditto web app, just click the “Resync” button in the top right corner, and any new frames will automatically appear.

‍

✍️ Note: Auto-sync only works after you’ve linked a Figma project. Once you manually link a design file, you can keep it up to date with auto-syncing new frames.

‍

Option to bulk revert automated sync

When Ditto automatically syncs new frames to a project, you will have a brief window when you can bulk revert the action. This gives you the chance to remove Figma frames that were unintentionally added to your project.

✍️ Note: Bulk revert is only available for a short period of time—about ten minutes. This is to prevent inadvertent data loss if text items are changed before a bulk revert is carried out.

‍

Head to the next section to learn how to componentize your text →

‍