In Ditto, every piece of copy is a text item. Text items capture your copy, properties like status, tags, and notes, and give you a place to share comments or suggest edits. Figma text layers or text in Ditto’s design previews can be linked to text items to sync your changes everywhere, in real time. The following will walk through how to create new text items, link text layers from your designs with Ditto text items, and delete text from your project.
Add Figma frames to your project
The easiest way to start building your team’s source of truth is by adding your Figma frames into your Ditto project — whether it’s a single frame or an entire page — so they’re available for anyone on your team to view and collaborate on the text in the designs. This is the recommended method if your copy writers are primarily working from Ditto’s web app.
Add Figma frames to a project:
Select the frame(s) in Figma
Select the … in the top right corner of the plugin and click Add frame(s) to Ditto
💡 If you’re just adding 1 frame, you can instead click the + button next to the frame name to add it to Ditto
Create Ditto text items
Create text items from Ditto’s design view
Once your frames have been added to Ditto, you can see them in your web app’s design view, and interact directly with all the text layers in your frames.
Clicking on a text will display its details panel on the right hand side, which contains a list of actions you can take, including editing the text, changing its properties, and leaving a comment. By taking an action, Ditto will create a new text item in your project and link the text layer to that text item.
💡 Open your project in the web app by clicking the three-dot menu (…) in the top right of your Figma plugin, then click Open project in Ditto.
Create a text item from Ditto’s design view:
Select an unlinked text layer (dashed border)
Take an action on the text and Ditto will automatically create a new text item (solid border)
Create/update multiple text items from Ditto’s design view:
Hold Shift or Command and multi-select the text layers in the design preview
Update the Status, Assignee, Tags, and Notes for all of the text items’ properties at the same time
Create text items from your designs in Figma
If you work primarily from a Figma file instead of Ditto’s web app, you can create a new text item by simply taking an action on a Figma text layer from Ditto’s plugin. By editing the text, changing its properties, or leaving a comment, Ditto will automatically create that text item in your project and link the Figma text layer to it.
💡 Immediately start working on your product copy in your Figma file while letting Ditto take care of creating and linking the text layers for you
Create a text item from a Figma text layer:
Select a text layer in Figma
Take an action on the text and Ditto will automatically create a new text item
Create/update multiple text items from Figma text layers:
Select multiple text layers or frames in Figma
Open the Properties tab and update the Status, Assignee, Tags, and Notes for all of the text items’ properties at the same time
Create text items in a Ditto project
If your designs aren’t ready yet, or if you need to write copy that only exists in development (like error messages), you can create text items directly in Ditto. These text items work like any other text in Ditto — you can edit it, add properties, create variants, and link it to text layers in your designs later.
Create a text item in Ditto:
Click + Add text item in your web app’s text view
Enter the text value and add any properties and click Save
Add text items directly to your design
Designers can add text items from your Ditto project straight into their designs. This automatically creates a new text layer in your Figma that is linked to your Ditto text item as an additional instance.
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.
Delete a text item
When you delete a text layer in Figma that is linked to Ditto, the instance count for that text item decreases.
For example, if you have three Email instances and delete one instance, 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 zero. You can link the text item to a Figma text layer 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.
