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:
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). To get more details, see this guide.
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.
1. 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!
That’s it! The copy that’s currently live in your product has been added to your Ditto component library. Your team now has an interface for viewing, searching, and editing the copy that exists in your product.
Tip: if you have translations in language-specific string files, you'll be able to import those in as well, as Ditto variants.
2. Attach your imported components in your design files
Now it’s time to hook up your imported components to your designs. If you came from part 1, you’ll be matching up your imported components to the text in those Figma files, so make sure they correspond to the same features. Otherwise, feel free to import other Figma files.
You can do this in the web app or in Figma using Ditto’s Figma plugin.
Head to the component suggestions for a project.
Web app: Go to the Projects page. Open up a project, then click the Components tab on the right.
Figma plugin: Open up a Figma file and run Ditto’s Figma plugin. Click the Components tab at the top.
Click Attach to see Ditto’s suggestions for components you might want to use in the project (based on text similarity). You should see some of the components you imported from your codebase in step 1 listed as suggestions.
Click into a suggestion to view the corresponding instances in the project. Accept all the relevant suggestions (tip: accept suggestions in bulk to save time!).
Repeat for all of your projects.
That’s all! You’ve now hooked up the text that’s live in your product all the way to your designs. In the next section of this guide, you’ll learn how to distribute your text to developers and other tools.
METHOD 2
Creating components from text in your designs
If you don’t store strings in files in your codebase, you can start populating your component library by identifying recurring text in your mockups, and then creating components out of those.
You can do this in the web app or in Figma using Ditto’s Figma plugin.
Head to the component suggestions for a project.
Web app: Go to the Projects page. Open up a project, then click the Components tab on the right.
Figma plugin: Open up a Figma file and run Ditto’s Figma plugin. Click the Components tab at the top.
Click Create to see Ditto’s suggestions for components you might want to create in the project (based on how many times they recur).
Click into a suggestion to view the corresponding instances in the project. Accept all the relevant suggestions. You’ll need to name the components (ex: Onboarding/Modal/CTA) before you can accept them.
If there’s text you’d like to componentize that isn’t showing up in the suggestions, you can create a component out of it directly by selecting the text, then clicking Create or attach Ditto component.
Repeat for all of your projects. For text that exists in several projects, you’ll be able to reuse components you created previously. Head to the Attach tab to view those suggestions.
In the next section of this guide, you’ll learn how to distribute your componentized text to developers and other tools.
