Connecting Ditto projects to Figma

In order for Ditto to be your team's source of copy truth, you'll need to get some copy into your workspace! You can start managing text in Ditto in two ways: creating a new Draft Project, or linking to an existing Figma file. Figma-linked projects allow you to import text from existing Figma files to be edited, updated, and organized. This guide covers how to link projects in Ditto to Figma, and how to sync edits back and forth between Figma and Ditto!

‍

Install Ditto's Figma plugin

In order to link Ditto to Figma, you (or someone on your team!) will need to use our Figma plugin. This is because, at the moment, Figma only allows edits to design files to be made from plugins. Note: Figma only allows users with edit access to the Figma file to open plugins there.

1. Open a Figma file you're working on.

2. At the top left of the Figma file, click the third icon from the right.

3. In the modal, click the "Plugins" tab, search for Ditto, and click "✍️ Ditto | Collaborate on copy."

4. In the three-dot menu, click "Save."

‍

After that, you'll be able to run the plugin (1) from that same button, (2) from the Figma menu (see below), or (3) by right clicking on the canvas and selecting Plugins.

‍

‍

‍

Connect a specific project to a Figma file

There are 2 ways to connect a Ditto project to Figma. You can: 

1. Import a Figma file directly into Ditto

• If you have a Figma file with copy that you'd alrady like to work on, you can start off by importing it directly into Ditto. This can be done either via our web app or our Figma plugin. Check out this guide for more information ->

2. Connect existing drafted text in Ditto to a Figma file

• If you've created a new draft project in Ditto, you can link that to a Figma file. Check out our full guide on this ->

‍

Sync Edits Between Figma and Ditto

Once you've connected your project to Ditto, you can sync changes back and forth between Ditto and Figma so your Figma mockups always 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!

Read our full guide on syncing to Figma here ->

‍

Up Next

Learn how to connect Ditto to development ->