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, in the left panel, click Design Systems.

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.

At the top of the design system, there are four primary pages:

• Home
• Foundations
• Components
• Tokens

At the bottom of the design system, you'll see a tool bar where you can toggle between Preview and Edit mode, access settings, and share the design system.

Home

The Home page is where viewers land when accessing your design system. On this page you can upload a home image, edit the title, and add a description. 

Foundations

The Foundations page 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

To add color fills 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, click + Add Page or select an existing one.
3. Just below the page description, click the Add colors button.
4. In the Libraries list on the left, select a library.
5. Select the Color Variables or Layer Styles Fills you want to add. Alternatively, at the bottom of the modal, 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, 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.

To add icons to your DSM documentation site:

1. Open your design system in the DSM web view.
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, 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

The Tokens page is where you can build out design tokens documentation that lives alongside all the other elements of your design system. Later in our Getting Started Guide, we talk about what design tokens are, the design tokens practice, and how to manage design tokens with DSM. If you want, you can always skip ahead to the DSM Design Tokens section.

By default, the Tokens page is hidden from viewers who access a published version of your design system. You can change this setting at anytime. To learn more, check out this article: Hide or show DSM sections

Customizing your design system appearance

If you're a DSM Enterprise customer, you can customize your design system to match your brand guidelines and your team's preferences. Add a logo, customize colors, and manage the layout of your top navigation items and your component tabs.

To customize the appearance of your design system site:

1. Sign in to the DSM web view and open your design system.
2. In the bottom toolbar, click the settings icon () and select Settings.
3. On the left, click the Customization dropdown and select the item you want to customize:
   • Top navigation: Rename, reorder, hide, add, or delete specific section links in the navigation at the top of your design system site.
   • Component tab order: Drag-and-drop items to edit the order of the tab structure applied to every component page.
   • Theme: Edit the visual appearance of your DSM documentation site.
   • Logo: Upload a new logo for the design system.
     You can upload a PNG or JPEG file (1 MB max) of the logo, which will be resized to maximum dimensions of 80x40 pixels (or 160x80 for Retina displays).
4. After you’ve finished making your adjustments, click Apply Changes.