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.
Before beginning work on componentizing your text, it’s important to understand how Ditto components work. Here are some helpful resources:
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.
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:
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:
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.