Exporting copy

‍

In Ditto, you can export all the copy in a project to a JSON, CSV, or XML file. This can be useful for a number of reasons:

• developers can pull text from JSON instead of manually copying and pasting to their code,
• copy can be directly imported into a localization tool,
• external clients and stakeholders can review copy in Excel or Google Sheets
• developers can generate string resources files for their Android apps

Getting started

In the Ditto web app, open up a project and click on the Export icon in the top bar. You'll be able to toggle between formats (JSON, CSV, or XML) and configure other settings. Only copy that is not hidden in Ditto will get exported.

You can also export your Component Library in Ditto by going to the Components tab and clicking the same Export icon in the top bar.

‍

‍
Exporting as structured JSON

When you select JSON from the dropdown menu, you'll get a preview of what the resulting JSON file will look like. You'll also have the option to check "Only include text in blocks" if you don't want to export text outside the blocks you've created!

‍

Here's an example of how a Ditto project maps to the JSON file:
‍

‍

The JSON file structure mirrors the structure of your Ditto project:

  •  project_name — the name of your Ditto project as a string

   •  frames — an array of objects with the following fields:

• frame_name — the name of the Figma frame as a string
• blocks — an array of objects describing any blocks you've created in the frame
• other_text — an array of objects describing any text not in blocks

‍

‍

Every text object in the JSON can have the following fields, which mirror those found in the edit panel:

• status — a string with one of the following values: "WIP", "REVIEW", "FINAL"
• text — a string
• notes — a string
• tags — an array of strings

The text field will always exist, but the status, notes, and tags will only be present if they have values.

‍

We're currently beta-testing our API, which will allow users to pull down copy from their Ditto projects in a format similar to our existing JSON export. If you'd like to learn more, shoot us a message at support@dittowords.com!

‍

‍

Exporting as CSV

To view your copy in a table format, you can export it as a CSV file. You'll be able to open it in any tool that accepts CSVs, like Google sheets, Excel, and most localization tools. When you select CSV from the dropdown menu, you'll be able to customize what information you'd like to include in your export:

You can choose whether you'd like to "Only include text in blocks," in addition to which columns you'd like included in the export:

• Text
• Status — one of 4 values: "NONE", "WIP", "REVIEW", "FINAL"
• Tags — each tag is separated by '|'
• Notes
• Is Component — TRUE or FALSE, depending on whether the text item is attached to a Ditto Component (learn more →)
• Frame Name — the name of the Figma frame this text is on
• Block Name — the name of the Block this text is in (if not in one, N/A)

‍

Here's an example of how a Ditto project maps to its CSV export:
‍

‍

Exporting as an Android string resource file (XML)

When you select XML from the dropdown menu, you'll get a preview of what the resulting file will look like.

‍

The file follows the format of a typical string resource file for Android app development. Each piece of text is wrapped in a <string></string> tags with a name field that represents the unique ID for that string. The name for a piece of text is created by combining the name of the Ditto project, the name of the frame it's on, and the value of the text itself with underscores. We also remove any punctuation, and add a number in parentheses for any duplicates to keep the names unique.

‍

For example, in the following project, the string "name@company.com" has the ID "onboarding_flow_welcome_namecompanycom" because it's in the "Onboarding Flow" project and on the "Welcome" frame.

‍

Want to see other export formats? We'd love to hear about it! Message us at support@dittowords.com.