👉 Quick note on the web app vs. Figma plugin
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:
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 ->
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!
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!
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.
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).
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 ->