Developing Your DSM Documentation

The DSM documentation site is the centralized web view for your design systems. It’s a place where designers, developers, and stakeholders can contribute to your living design system.

Accessing your design system

To access your DSM documentation site, sign in to InVision and, at the top of the page, click DSM.

In the center of the page, you'll notice a list of all your available design systems. To open a particular system, click its tile.

The design system will open to a cover page where you can add a cover image, as well as some introductory documentation.

At the top of the design system, there three primary options:

• Foundations
• Components
• Tokens (coming soon!)

Throughout this guide, we’ll cover each of these in more detail.

Foundations

The Foundations section of your design system is where you can add colors and text styles from your associated Sketch file. You can also create free form documentation categories.

Colors

Colors are derived from Sketch layer styles, so it’s important that any colors you want to add to your design system are saved as layer styles. To learn more, check out our Sketch best practices.

To add colors from your Sketch library to DSM:

1. Open your design system and, at the top of the page, click Foundations.
2. In the left-hand navigation, under the Colors category, create a new page or select an existing one.
3. In page body, click the Add colors button.
4. In the left-hand Libraries menu, select a library.
5. Click the color swatches you want to add. Alternatively, at the bottom of the modal, you can click Select all.
6. At the bottom right, click the Add assets button.

The colors will appear on the page in a table format. Using the toolbar at the top of the table, you can sort rows, hide columns, or add more colors. To manually reorder, select a specific row. To the left of the row, click the reorder control () and drag the row to a different position. To delete a selected row, click the remove icon () on the row’s right-hand side.

Typography

To add text styles from your Sketch library to DSM:

1. Open your design system and, at the top of the page, click Foundations.
2. In the left-hand navigation, under the Typography category, create a new page or select an existing one.
3. In the page body, click the Add typography button.
4. In the left-hand Libraries menu, select a library.
5. Click the text styles you want to add. Alternatively, at the bottom of the modal, you can click Select all.
6. At the bottom right, click the Add assets button.

The text styles will appear on the page in a table format. Using the toolbar at the top of the table, you can sort rows, hide columns, or add more text styles. To manually reorder, select a specific row. To the left of the row, click the reorder control () and drag the row to a different position. To delete a selected row, click the remove icon () on the row’s right-hand side.

Icons

The Icons category of your DSM documentation site can contain any symbols that you reference on a regular basis, such as system icons, logos, and illustrations. Viewers of your DSM site will be able to download these items as SVGs.

Before adding icons to your design system, here are a few things to note:

• You can only add Sketch symbols as icons. You can't add any non-symbol layers.
• You must first make a symbol exportable as an SVG in Sketch.

A symbol marked for SVG export in Sketch's right-hand information panel

After completing those actions, be sure to re-upload your Sketch file to your design system.

To add icons to your DSM documentation site:

1. Open your design system on the DSM website.
2. On the Foundations page, navigate to the Icons category.
3. On any page within the Icons category, click the Add icons button.
4. In the left-hand Libraries menu, select a library.
5. Select the icons or folders you want to add. Alternatively, at the bottom of the modal, you can click Select all.
6. Click Add assets.

Icons you add remain linked to the Sketch library. If you change icons in the Sketch library and re-upload the library to DSM, icons you added to the DSM Foundations will be updated automatically.

The icons will appear on the page in a table format. Using the toolbar at the top of the table, you can sort rows, hide columns, or add more icons. To manually reorder, select a specific row. To the left of the row, click the reorder control () and drag the row to a different position. To delete a selected row, click the remove icon () on the row’s right-hand side. To download an icon as an SVG, click the download column for that specific icon.

Documentation

One of the unique features of DSM is the ability to add freeform documentation. Create brand guidelines, an introduction, or any other number of resources to enhance your design system.

If you want to create a new page exclusively for documentation, you’ll need to add that page in a category other than Colors or Typography. While you can certainly add documentation to a color or typography page, they will still respectively show options for adding colors and text styles.

To create a new documentation page:

1. Open your design system and, at the top of the page, click Foundations.
2. In the left-hand navigation, select or create a new category.
3. In the appropriate category, click Add Page.
4. Type a page name and press Enter.

Once you’ve created the page, click in the large white space to begin adding content. When you begin a new line, a small toolbar will give you the option to add images, lists, or text blocks. After you have added some content, highlight the text to reveal a more robust editor for adding headings, creating links, and applying formatting.

Components

Components are the interactive building blocks used to create our product interfaces. They can range in complexity from simple components like buttons to more complex components like multi-step processes or cards.

Before you can add a component to DSM, make sure it is saved as a symbol in your original Sketch library.

To add components to DSM:

1. Open your design system on the DSM documentation site.
2. At the top of the page, click Components.
3. If you prefer, create a new category or folder. Within your chosen folder, click Add Page.
4. Type the name of your component and press Enter.
5. On the Design tab of the component page, click the Add components button.
6. Select your symbols to be added as components, and click Add assets.

DSM components allow for incredibly robust documentation. In addition to using the standard text editor available for every element in your design library, you can:

• Add links
• Embed web pages
• Create Live Components with the DSM Storybook integration

Tokens

At the top right of your design system, you’ll notice the Tokens tab. This feature is not yet available but will be soon.

Design tokens are platform-agnostic variables that represent the look-and-feel of your brand and product. They constitute the atomic building blocks of your design system and can be used to define colors, text styles, spacing, and other property types. They provide the foundation for theming and design process automation. To view an example of design tokens, visit Salesforce’s Lightning Design System Design Tokens page.

Customizing your theme

If you are a DSM Enterprise customer, then you can fully customize your design system to match your brand guidelines. Add a logo and custom colors for titles, navigation items, backgrounds, and more.

To access the theme customization panel:

1. Open your design system documentation site.
2. At the bottom right of the page, click the settings icon ().
3. Click Customize theme.
4. After you’ve finished making your adjustments, click Save changes.