Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Developing Your DSM Documentation

This guide references the new DSM. Built on customer feedback, the new DSM offers a completely redesigned experience. Learn more about why we made the new DSM.

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.

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

  • Home
  • Foundations
  • Components
  • Tokens

At the bottom of the design system, there is 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.

If you haven't yet synced a Sketch file to your design system, you'll need to do that before adding any colors or text styles. To learn more, check out our article on creating a new design system

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, 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 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.
add-colors-to-dsm.gif

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.

If a sample for a typography style you add doesn't display the correct font, check out this article on adding missing fonts to DSM.

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 documentation site, you must save the icons as symbols and mark the symbol masters for SVG export in Sketch. To learn more, check out this article: Adding icons to DSM

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.

If you haven't yet synced a Sketch file to your design system, you'll need to do that before adding any components.  To learn more, read these instructions: Syncing a Sketch file to DSM 

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:

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 theme

If you are a DSM Enterprise customer, then you can customize your design system to match your brand guidelines. Add a logo, customize colors, and rearrange the layout.

To customize your theme:

  1. Open your design system documentation site.
  2. In the bottom toolbar, click the settings icon ().
  3. Click Customization options.
  4. After you’ve finished making your adjustments, click Save changes.

Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

Learn about InVision DSM, the design system platform for collaborative teams. Find the plan that's right for you and your team and set up your DSM organization.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo