Organizing your component library is a helpful for teams to create shared context on how components get reused. In Ditto, you can use a forward-slash naming convention to group and organize your components. We'll explain below!
If you haven't already, we go over the basics of components in Ditto here.
Ditto automatically generates levels of organization based on components named under a forward-slash naming convention. Similar to projects, the component library supports 3 levels of organization; which will display as groups and blocks in the component library.
On Ditto's Growth and Enterprise Plans, you can also use component folders to organize components with 4 levels of organization.
To get started, go ahead and name one of your components using a forward-slash naming convention. Don't worry, renaming and organizing your components doesn't affect how they're attached in projects!
A brief cheatsheet:
You can also use our drag-and-drop interface to drag components between groups or between blocks, which will automatically adjust the component names accordingly.
Groups, blocks, and components are all displayed alphabetically in the component library, and you can use the Navigation to click to scroll to any component in the library. Components named without a forward slash are not nested in any group and are displayed at the bottom of the library.
👉 Resource: Want to learn how to create and attach components in a low-stakes sandbox? Check out our 🌐 Ditto Components Playground (Figma Community File)!
Here are some examples of component names, and what their resulting component library organizations are:
Note that the component name on the right-hand side will always show the full component name, whether you're in the component library or working out of a project!
