If you’re coming from part 1 of this quickstart, you’ve connected text from your design files, and now it's time to start componentizing it. (You can also start here directly if you have string files from your codebase on hand!)

As a quick overview:

• Text components in Ditto are reusable pieces of text. All instances of a component (ie. places that piece of text is being used) are linked, so editing one instance will automatically propagate that change to all others.
• Remember those projects you created in the previous section when youimported your Figma files? Components are pieces of text that sync across those projects.
• Text components get added to your team’s component library. Your component library is like a centralized, searchable repository of your reusable text. It’s also how you’ll get your text synced up across design and development.

Choose your approach

There are two approaches to componentizing your text:

1. Importing string files from your codebase (highly recommended)

If you store copy in your codebase in string files JSON (.json), Android XML (.xml), iOS Strings (.strings), use this approach.

You’ll be able to directly sync the copy that’s currently live in your product to Ditto and get up-and-running in minutes.

You’ll likely have to ask a developer for these string files.

1. Creating components from text in your designs

Use this approach only if your team doesn’t store copy in string files in your codebase.

Method 1: Importing string files from your codebase

With this method, you’ll start by importing the copy that’s currently live in your product into Ditto as components. Then, you’ll hook up those imported components to your design files using Ditto's automated suggestions.

Before you get started, make sure your string file(s) have a valid format that’s accepted by Ditto: JSON (.json), Android XML (.xml), iOS Strings (.strings).

It’s likely that your product will have several string files that correspond to different parts of the app. Feel free to just start with one or a few.

Import your string files

• Head to your team’s Component Library. Click New Component in the top right, and then Import from string file.
• Once you upload a file, you’ll see a preview of the components that will get created from the strings in the file. If you want to exclude some, just deselect them. The generated components will get their IDs from whatever is specified in the string file, so you won't have to change any keys in production once you integrate Ditto!