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:
Select a text layer in Figma
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:
Select the text layers you want to group in Figma
Click Import as block in the Ditto plugin
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:
Click + Add text item in your Ditto project
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:
Suggested linking: Ditto detects repeated text and prompts you to link it
Automatic linking: Duplicated frames or text layers are linked automatically
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:
Select the placeholder text in Figma
Click Link → Project text
Search to find the project text you’d like to link to
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:
Select the text item in Figma
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.
Go to the Assets tab and select Project text
Browse and select a text item
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:
Select the text item in Figma
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.