If you have text drafted in Ditto, you can connect the text to text in frames in a Figma file to have changes between the two linked together.
When opening the Ditto Figma plugin for the first time in a Figma file, after providing the Figma file link, you can choose to either import text from the Figma file to a new Ditto project or link the Figma file to an existing Ditto project. This guide walks through the latter: linking a Figma file with an existing Ditto project.
From the plugin, first paste the link to your Figma file. Then, select the Ditto project that you’d like to connect the Figma file to. Keep in mind that you can only connect a single Figma file to a Ditto project.
Projects that have linkable draft frame will display in this list.
To begin linking a Ditto project with a Figma file, select a Ditto draft frame and click the top-level Figma frame in the file you’d like to link it to.
Only a single Figma frame can be linked to a Ditto frame.
To link a Ditto and Figma frame, select each text item from the frame in the plugin, and then click the text box in Figma you’d like to link each to.
Only a single text item in the Figma frame can be linked to a text item in the Ditto frame. When linking the text, the Figma text will turn into the Ditto text. If you connected to the wrong text, you can unlink with the break link icon.
When all of the text items in the Ditto frame have been linked to a Figma frame, you can finish linking the frame. Keep in mind that because all text items in a Ditto frame have to be linked to text boxes in the frame, the frame must contain at least the same number of text items as the Ditto frame. After the frame has been linked to a Ditto frame, any extra text in the Figma frame get brought into Ditto in the “Hidden” section.
Not all frames in a Ditto project need to be linked to Figma to finish connecting the project; frames that aren’t linked to Figma will stay in the “✍️ Drafted Frames” page and can be linked in the future.
If you want to draft new text in projects you started by importing text from a Figma file, you can navigate to the “✍️ Drafted Frames” page.
After a Ditto project is connected with a Figma file, you can always link additional frames in your Figma file to any unlinked frames in your Ditto project.
When selecting a frame that has not yet been included in your Ditto project, you can choose to either import the frame to your project or link it to a draft frame in your project.
The plugin will list the linkable draft frames in the connected Ditto project to select from.
You can always unlink Ditto frames from their associated Figma frames by using the manage modal in your Ditto project.
After unlinking a frame, the frame will moved to the “✍️ Drafted Frames” page, but all of the metadata (change history, status, components, variants, etc.) will still remain.
