It can often be intimidating to start building a content design system from scratch. After working with hundreds of teams to get up and running, we’ve organized a guide on what we’ve seen work best for teams looking to building with Ditto components.

‍

Step 1. Learning how Ditto components work

Before beginning work on componentizing your text, it’s important to understand how Ditto components work. Here are some helpful resources:

• Component basics
• Ditto Components Playground (Interactive)

‍

Step 2. Understanding how component organization works

In Ditto, you can organize components by their name in up to 3 levels of nesting, as indicated by forward-slashes. (You can read a full overview on component nesting here!)

Additionally, you can organize components in your library in folders on our Growth or Enterprise plans. All in all, you can have 4 levels of nesting for components.

‍

Step 3. Determining a naming convention + organization system

It’s helpful to determine a few guidelines for your team about naming Ditto components so that team members feel enabled to create their own components.

Don’t worry — this is just helpful for setting basic expectations and does not have to be future-proofed. You can always change this later; when you rename or reorganize components, they stay attached to the instances they were previously attached in. The process of fully fleshing out and maintaining your Ditto component library will likely be an iterative process as you add new text.

Some ways we’ve seen teams commonly organize their component library include:

• Mirror design system naming conventions — especially for teams that already use a forward-slash naming convention in their design system, it can be helpful to reuse established conventions, especially when the naming convention references the same core product
• Determine distinct product areas — if your product has distinct product areas (especially if they correspond to individual teams), it can be helpful to set them up as their own folders
• Determine main use-cases of text written — a common organization method is by different use cases (header, description, CTA, etc.), or around actions for the user

‍

Step 4. Creating components

Although it can be intimidating to start creating your team’s component library, it can be helpful to start componentizing portions to see the benefits of systemization pay off.

A couple of approaches include:

• Componentizing frequently reused text — componentizing text that frequently gets reused or frequently edited can be helpful to reduce any existing overhead of repeated edits. You can also tackle this in several ways: If the text item you have selected is repeated several times in your project, the edit panel will surface a suggestion to componentize all of the repeated instances. Also, You can utilize create component suggestions at the project level to see the most frequently repeated text in your project to immediately componentize‍
• Appoint product owners to componentize in their product area — for teams that have writers/designers that own the writing in specific product areas, it can be helpful to have them each componentize text in their product area before a goal date. This can also be helpful for doing a content audit, as a lot of teams uncover existing inconsistencies when componentizing their text.‍
• Tackling a smaller, self-contained product area first — this can be helpful in establishing norms on using Ditto from end-to-end in a clearly described product area, and communicating them across the team

Building a content design system is just like building any other system: it’ll evolve as your team grows and expands, and as elements of the content design system get utilized. You can always grow your team’s component library as you go, and Ditto will always track edits to your components and where you attach them.

We hope this helps with getting started! If there are are any questions we can help answer, feel free to book a demo with our team.