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.