Structuring your design system web experience

Sign in to your DSM organization to access a design system. At the top of the design system, there are three primary options:

• Foundations
• Components
• Tokens

Let’s talk about building and structuring in your design system. One question you want to consider is: What is the most efficient way to structure your design system—documentation and UI elements—within an end-user-friendly hierarchy? More pointedly: How can you leverage a searchable structural strategy and searchable naming conventions?

There’s no right or wrong way, and you’ll determine the structure that works best for your team and system.

What’s in a name?

If you haven’t already, you'll want to align first on naming conventions for all of your elements, pages, and categories. When structuring these, consider the element’s use or purpose, make it discoverable, and be abstract rather than actual. A simple example of this, use a word like “primary” over “blue” when describing your main brand color. We recommend working closely with your development team on this, starting with the smallest bits of your design system—your colors, text styles, and layer styles—before moving to design components.

How you structure your design system doesn’t need to reflect your Sketch file or files, but we do recommend that approach. You can create a design system from multiple Sketch files. Meet with your team to discuss naming conventions across your design file(s) and your design system web experience.

Putting documentation to good use

Your design system structure is not just about your patterns or design elements it’s also about documentation. Of course, you should include documentation about your foundational elements and components: when to use them, when not to use them, how to use them, accessibility rules, and more. Some examples include: 

• Spacing, sizing guides, and redlines
• Examples of do’s and don'ts, real life examples when possible
• Design specs and responsiveness

So first, make sure you’re including component and styles documentation, then you’ll add additional categories to help people understand how to use the design system. Documentation helps keep your team on the same page and adds accountability. With well thought out documentation, you’re adding visibility that allows your design system and the team using it to mature while encouraging a culture of consistency and collaboration. Some examples include:

• Design purpose and principles
  Voice and tone
• A design system intro and getting started guide
• How-tos, like how to contribute or make requests

Tip: Create a template for common documentation, like components. It adds consistency that allows your design system users to find what they need quickly.