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!)

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

‍