Linking Draft Groups to Figma

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:

  • Groups — this refers to sections of text in the Ditto project. To learn more about types of groups in a Ditto project, check out Drafting Basics.
  • Frames — this refers to top-level frames in a Figma file. This typically corresponds to mockups of screens in the product itself.

Step 1. Select Ditto Project

From the plugin, 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.

Step 2. Select a Figma frame to link to a Ditto group

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.

Step 3. Link the text in Ditto group to the text in the Frame frame

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.

After a project is connected:

Drafting additional text

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.

Linking new frames

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.

Unlinking a group

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.

Didn't find what you were looking for?
Contact Support