Overview of a Project

👉 Quick note on the web app vs. Figma plugin

• If you’re working on a project that’s connected to Figma, you can use either the Ditto web app or Figma plugin when working on a project — they have the same functionality in terms of editing.
• The Figma plugin is often useful when you're working on more visually-complex flows and want to be in the Figma file.
• When you want to get a high-level overview of copy across your designs or view your text abstracted from the visuals, use the web app! There, you'll be able to do things like set up content components, browse copy from all your projects, and more.

‍

🧭 Navigating your Ditto Project

After you've created your account and set up either a draft project or a project linked to Figma, you'll land on your new project page:

‍

‍

To toggle between frames and pages in your project, head over to the left side panel:

‍

You can also add or remove frames at the top of this panel:

‍

‍

In the top right bar of your project, you'll be able to see if a project is linked to Figma, turn on Developer mode, resync to Ditto, export your project, and more!

‍

For example, to resync your project to Figma, select the resync button:

‍

To turn on Developer mode, or hide the API IDs, select the Developer mode icon:

‍

To export your project as a JSON or CSV, click the export icon:

‍

‍

🔠 How text is organized in Ditto

Text in Ditto can be either unlinkable (drafted in a group, which looks like a standard text editor) or linkable (broken into discrete text items).

‍

You can draft text on the Drafted Groups page of any project. Learn more in our full guide on drafting ->

‍

🔠 Managing linkable text in Ditto

For any linkable text, you’ll be able to add metadata and apply other Ditto features, like components!

You can draft new text, edit existing text, and manage copy using by adding metadata, creating text components, and more!

👉 Heads up! Some of Ditto's copy management features are only available for linkable groups, not drafted text. For example, adding metadata, selecting multiple, and organizing text are only available for linkable groups of text. All of our feature-specific guides (for example, our guide to Blocks and our guide to Components) also have more detail about how each feature can be used!

Add metadata to your copy

‍Text in Ditto can be transformed into discrete text items (called “linkable text”), allowing each piece of text to be edited and managed individually. With linkable text, you’ll be able to add metadata, sync to Figma and development, and much more!‍

‍Edit and select multiple

‍You can select and edit multiple pieces of linkable text at once to speed up your workflow!In the web app, hold down shift or command/control to select multiple. In the Figma plugin, you can click multiple text boxes in your Figma file and make edits in the Selected tab.‍

‍

‍Organize text

‍Use Blocks to create labeled content groups that help establish hierarchy and context within your Ditto projects. We see lots of teams use these when moving over from copy docs or setting up copy to present to stakeholders for review.

You can create Blocks for linkable text, either via the web app or the Figma plugin.
Read our full guide on Blocks here →‍

‍

‍Hide text you're not working on to keep your project tidy. Note that this won't affect your Figma file at all and will just hide the text from view in Ditto!In the web app, select a text item (or multiple using shift or command/control) and click "Hide selected from view" in the right-side Edit panel.

‍

👉 Quick tip: Text will be imported to Ditto if it's on a frame and visible on the frame (not hidden or outside the boundaries of the frame).

‍

‍Read our full guide on hiding text here →

‍

Save time by copying setup between frames

If you find yourself recreating the same Blocks, re-hiding the same text over and over on different frames, you can save time by copying that work over to other frames. You can do this using Ditto's setup suggestions. Learn more here ->