Drafting Basics

Drafting allows teams to start writing text directly in Ditto projects through draft groups. With draft groups, teams can write and collaborate on text that doesn’t exist in Figma. Whether it’s text that only exists in development (i.e. error messages), or text for mockups that haven’t yet been made, drafting in Ditto gives your team space to collaborate on the text of your product in all of its stages — in the same place.

Once you’ve drafted text in Ditto, you’re also able to enable linking, which allows the newly drafted text to use any of our other features — statuses, components, variants, developer mode, and more — as well as be connected to Figma files or to development.

In this help guide, we’ll cover:

  1. Starting a draft project
  2. Types of groups in a project
  3. How draft groups work
  4. Enabling linking for draft groups

How do you start a draft project?

To start a draft project, click the “Start a new project” button on the Projects page, and select “Draft a new Ditto project”.

After you title your project, you’ll land in a new Ditto project where you can start writing text!

Types of groups in Ditto projects

In Ditto projects, there are 2 different types of groups:

  • Draft Groups — Draft groups display with a yellow background and provide a text editor surface for you to draft text directly in Ditto. You can immediately click into draft groups to begin editing, and edits will automatically save.
  • Linkable Groups — Linkable groups contain discrete text items. You can connect linkable groups to Figma or add Ditto metadata (statuses, components, variants, etc.). Edits will save after you press “Save” in the Edit panel.
  • If the linkable group has been linked to a Figma frame, the text items will display with a white background. Otherwise, if the frame is unlinked, the text items will display with a yellow background.

Groups that aren’t currently connected to frames in Figma (draft groups and unlinked groups) will show up on the page “✍️ Drafted Groups”, where you can always draft new text. Linked groups will display in the page corresponding to the page they reside in on the Figma file.

How do draft groups work?

Draft groups provide a collaborative text editor experience in Ditto where teams can draft new text.

You can start typing directly in draft groups to begin editing, and edits will save as you type. When clicking into a draft group, the right-side panel will show the comments and edit history for the line your cursor is currently on. Ditto will automatically track edits made in draft groups.

You can also rearrange text within a draft group by dragging and dropping using the handle on the left-hand side of the focused text.

[video-to-gif output image]

What is enabling linking?

Once you’re ready to work use Ditto’s text management features on your drafted text, you can turn a draft group into a linkable group by clicking “Enable linking” in the top right of a draft group. Enabling linking for a draft group turns the text from the group into discrete text items.

A draft group, before enabling linking

A linkable group (after linking has been enabled)

In linkable groups, you’re able to:

If a linkable group is not yet connected to a Figma frame, the text items will display with a yellow background.

If a linkable group is connected to a Figma frame, the text items will display with a white background. For these group, you’ll be able to see a Figma frame preview. Also, if you imported text from a Figma file, these frames will be in your Ditto out as linked groups.

Once linking is enabled for a group, you can also connect it to development or to a Figma file.

  • To connect to development — Turn on Developer Mode for your project. Developer IDs will also get generated for any linkable groups in the project.
  • To connect to Figma — You can connect a draft project to a Figma file via our Figma plugin. In a project already connected to a Figma file, new draft groups can be connected to frames in the Figma file not yet connected to Ditto.
    For more information about connecting a Ditto project to a Figma, check out our help guide for linking Draft Groups to Figma.
Didn't find what you were looking for?
Contact Support