Skip to main content

Linking

Linking a Figma text layer to a Ditto text item creates a new instance of that text item in your project. The linked text layer inherits all of the properties of that text item — copy text, status, tags, comments, variants, components, etc. Additionally, any changes made to the text item will be synced and reflected instantly across all of its instances, which automatically keeps your Figma copy up-to-date with Ditto.


Link text layers in your Figma design to Ditto

Creating a new text item from a Figma text layer will automatically link that text layer to the newly created text item, and it becomes an instance of that text item.

In Ditto’s design view and Figma plugin, text not linked to Ditto are displayed with a dashed border, while linked text have a solid border. By taking an action on unlinked text, Ditto will create a text item and link the text layer to it.


Link a text layer to an existing Ditto text item

Text layers can be linked to an existing text item in your Ditto project. Once linked, the text layer inherits the text item's value and properties, and becomes another instance of it. This is useful when designers use placeholder text that needs to be replaced with actual copy — you can link the text layer to the right Ditto text item and update it in a single step.

Use project-level suggestions to link matching text layers

The easiest way to bulk link text layers to existing text items is through the Suggestions tab in the Figma plugin. Ditto scans all text layers across your Figma page and surfaces any that match an existing text item in your project. You then can review and link them all in one place, without selecting each layer individually.

Bulk link matching text layers from the Suggestions tab:

  1. Go to ProjectSuggestions → Linking

  2. Review each mach and click Link — or Ignore to skip it

💡 This is the recommended approach when you have multiple text layers to link in a large file — it surfaces all matches at once so you don't have to hunt for them layer by layer

Link a single text layer to an existing text item

You can also link a text layer directly from the design view or plugin when working layer by layer.

Link a text layer to an existing text item:

  1. Select a text layer in Figma or Ditto’s design view

  2. Click Link to text item in Ditto

  3. Search to find a text item, or accept the suggestion, and click Link


Suggested linking

Ditto constantly scans your project for opportunities to suggest text items that should be linked up. There are 3 scenario where linking suggestions will be surfaced by Ditto.

Link repeated text items

If the same text appears multiple times across the same page in a Figma file, such as a Sign Up button across different frames, Ditto will surface a suggestion to link these text layers to Ditto as multiple instances of the same text item, so you can manage them from one place.

Link repeated text layers to the same text item:

  1. Click on Preview matches in the detail panel to preview each case of repeated text using the arrow keys

  2. Click Link all to link all text layers to the same text item

💡 If you want to manage repeated text across multiple projects, you should publish the text as a component

Link with matching text items in the Ditto project

If you selected a text layer that matches an existing text item, Ditto will suggest linking the text layer to the matching text item. The text layer will inherit all the properties of the text item and become one of its instances.

Link text layer to a matching text item:

  1. Preview the matching text item found in the details panel

  2. Click Link

Link matching components

If you selected a text layer that matches a component in your component library, Ditto will suggest linking it to the matching component. The text layer will inherit all the properties of the component and become one of its instances.

Link text layer to a matching component:

  1. Preview the matching component found in the details panel

  2. Click Link

Automatic linking

When you duplicate a frame or text layer in Figma, Ditto automatically keeps text layers linked in the same way in the new frame. This keeps everything connected without any extra work.

💡 See this guide to change the default automatic linking behavior for duplicated text in your plugin settings


Split off instance

Sometimes, you may want to split off an instance to manage that copy separately from the other text instances or change the copy entirely.

Split off an instance:

  1. Select the text item in Figma or Ditto’s design view

  2. Click Split off instance in the details panel

This creates a new text item with the same value, properties, and variants, but it will no longer be linked to the original text item. The web app also reflects the change with a duplicated text item.


Merge text items

Use the merge feature to combine multiple text items into one. All text layers that were linked to any of the merged text items will be linked to the resulting text item. Note that properties, comments, and change history from the text items merged into the resulting text item are not retained.

Merge text items:

  1. Select two or more text items, open the menu and click Merge

  2. Select which text item the others should be merged into, and click Merge


Unlink a text layer

You can unlink a text layer from Ditto to remove connection to your project. The text item will remain in your Ditto project, which you can manually link the text item or add it to your Figma file later.

Unlink a text layer:

  1. Select the text item in Figma or Ditto’s design view

  2. Click Unlink from Ditto in the details panel

Unlink text layers in bulk from Figma:

  1. Multi-select the text layers or frames in Figma

  2. Open the … menu and click Unlink all

Did this answer your question?