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.
Two terms that will be helpful in this guide include:
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 groups will display in this list.
To begin linking a Ditto project with a Figma file, select a Ditto draft group 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 group.
To link the group with the selected frame, select each text item from the group 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 group. 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 group have been linked to a Figma frame, you can finish linking the frame. Keep in mind that because all text items in a Ditto group 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 group. After the frame has been linked to a Ditto group, any extra text in the Figma frame will be brought into the Ditto group under the “Hidden” section.
Not all groups in a Ditto project need to be linked to frames to finish connecting the project; groups that aren’t linked to Figma frames will stay in the “✍️ Drafted Groups” frame 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 Groups” page.
After a Ditto project is connected with a Figma file, you can always link additional frames in your Figma file to any unlinked groups 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 group in your project.
The plugin will list the linkable draft groups in the connected Ditto project to select from.
You can always unlink groups from their associated Figma frames by using the manage modal in your Ditto project.
After unlinking a group, the group will moved to the “✍️ Drafted Groups” page, but all of the metadata (change history, status, components, variants, etc.) will still remain.
