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!
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.
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.
There are 2 ways to connect a Ditto project to Figma. You can:
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!
Learn how to connect Ditto to development ->