Drafting Basics

‍

Drafting allows teams to start writing text directly in Ditto projects. Using drafting in Ditto, 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), 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.

After drafting text in Ditto, you'll have the option to manage it with Ditto's copy management features — like statuses, components, variants, developer mode, and more — as well as connect drafted text to Figma files or to development.

‍

‍

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!

‍

How do draft frames work?

‍

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

You can start typing directly in draft fram to begin editing, and edits will save as you type. When clicking into a draft frame, 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 frames.

‍

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

‍

The  "✍️ Drafted Frames”  page of a project will also store the text (and Ditto metadata) for any frames that have been unlinked from Ditto , so you'll never lose your work!

‍

There are a few actions in Figma that can "unlink" a frame from Ditto. These include:

• a frame is deleted in Figma
• a frame removed in Ditto (through the "Manage" modal in the web app)
• a frame was cut (i.e. deleted) & pasted in Figma
• a frame is moved to a different Figma page

‍

👉Quick tip: If a frame needs to be moved to another page, do so via a right click and selecting the "Move to page" option (rather than copying and pasting the frame).

‍

‍

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 frame into a linkable frame by clicking “Enable linking” in the top right of a draft frame. Enabling linking for a draft frame turns the text from the frame into discrete text items.

‍

In linkable frame, you’re able to:

• organize text into blocks
• track status, notes, and tags of text
• componentize text
• create variants for text

‍

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

‍

If a linkable frame is connected to a Figma frame, the text items will display with a white background. For these frames, 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 frames.

Once linking is enabled for a frame, 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 frame 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 frames 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 Frames to Figma.