Skip to main content

Text Items and Linking

Updated over a month ago

In Ditto, every piece of copy is a text item. You can create text items directly in Ditto or import them from a Figma file. The following will walk through how to import and create text items, link text inside your projects, and delete text items.


Import text from your Figma file

To start building your team’s source of truth, you need to bring copy into Ditto. Once your Ditto project is connected to a Figma file, you can easily import text from your designs.

Import a text item:

  1. Select a text layer in Figma

  2. Click Import in the Ditto plugin

💡 To import multiple text layers at once, hold Shift while selecting them

You can also import a group of related text as a block to add structure to your project text.

Import text items as a block:

  1. Select the text layers you want to group in Figma

  2. Click Import as block in the Ditto plugin

  3. Name the block


Draft text inside a Ditto project

If your mockups aren’t ready yet, or if you need to draft copy that only exists in development (like error messages), you can create text items directly in Ditto.

Draft a text item:

  1. Click + Add text item in your Ditto project

  2. Enter the text value and add any metadata

Drafted text works like any other text item—you can edit it, add metadata, create variants, and link it to your Figma designs later.


Link text within your project

If the same text appears multiple times in the same project, such as a Continue button across different screens, Ditto helps you link these instances so you can manage them from one place.

When you update a linked instance, all instances automatically update to reflect the change.

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

Ditto offers three ways to link repeated text items:

  1. Suggested linking: Ditto detects repeated text and prompts you to link it

  2. Automatic linking: Duplicated frames or text layers are linked automatically

  3. Manual linking: You manually link copy from Figma to drafted text in Ditto

Suggested linking

After importing text, Ditto scans your the page in your Figma file for repeated instances. If matching text is found, you’ll see a Preview match option in the plugin.

Click Preview match to see where the text item is repeated. Select Link to connect a single instance, or select Link all to connect every instance.

If you create a new text item that matches existing text, Ditto will suggest linking it upon import.

💡 Navigate between linked instances by using the arrow keys in the plugin

Automatic linking

When you duplicate a frame or text item in Figma, Ditto automatically links the copied text. This keeps everything connected without extra work.

Manual linking

If you start writing in Ditto before designs are ready, you can manually link drafted text to Figma later.

Manually link text:

  1. Select the placeholder text in Figma

  2. Click LinkProject text

  3. Search to find the project text you’d like to link to

  4. The placeholder text updates to match the text item you selected

Split off instance

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

Split off an instance:

  1. Select the text item in Figma

  2. Click Split off instance in the plugin

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

💡 You can only split off an instance from the Figma plugin since individual copy instances are not shown in the web app


Add text items directly to your design

Designers can add project text items straight into their mockups without importing text into Ditto first.

  1. Go to the Assets tab and select Project text

  2. Browse and select a text item

  3. Click Add to insert it into your design as a text layer

Alternatively, you can drag and drop text items into your design from the plugin if you're using Figma's desktop app.


Unlink a text item

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 item:

  1. Select the text item in Figma

  2. Click Unlink text layer from Ditto in the plugin


Delete a text item

When you delete a text instance in Figma, the instance count in Ditto decreases.

For example, if you have three Email instances and delete one, the instance count drops to two.

If you delete all instances of a text item in Figma, Ditto keeps the text item in your project with an instance count of 0. You can manually link the text item or add it to your Figma file later.

To completely remove a text item from Ditto, select the text in the web app and click Delete text item in the details panel. This will also remove all instances of the text item from your project.

Did this answer your question?