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


Designing with DSM

This article references the new DSM, released for Early Access on May 5, 2020. Built on feedback from DSM customers, the new DSM offers a completely redesigned experience. Learn more about why we made the new DSM.

Not everyone accessing DSM will be managing or creating design systems. That’s why we’ve developed this guide for the individual contributor—those designers who interact with DSM on a regular basis, using assets to build designs and UIs. This guide will walk you through some basics of DSM, such as:

  • Accessing DSM in Sketch
  • Using DSM managed libraries in Sketch
  • Switching design system versions
  • Accessing the DSM documentation site

Accessing DSM in Sketch

To access DSM design systems in Sketch, you’ll need to install Craft Manager and enable the New Design System Manager plugin.

new-dsm-plugin-craft-manager.png

After installing, you’ll still need to show the DSM plugin panel in Sketch. To do so, navigate to the Sketch menu bar and select Plugins > New Design System Manager > Toggle Side Panel.

toggle-side-panel.png

The new DSM plugin will appear above the left-hand layers list in Sketch. If you haven’t already, sign in to the appropriate InVision account associated with your DSM organization.

dsm-plugin-above-layers-list.png

Using DSM managed libraries to Sketch

The first time you access a design system via the DSM plugin, you’ll have the option to add the design system to Sketch as a DSM managed library.

Managed libraries are how you bring DSM into your working Sketch documents. These are DSM-managed Sketch libraries, allowing you to pull assets from that design system into your current project.

To add managed libraries to Sketch:

  1. In the DSM plugin panel above the left-hand layers list, click Open Plugin.
  2. Beneath the preferred design system, click to expand the Managed libraries section.
  3. Next to a managed library, click the + button.
add-dsm-managed-library.gif

These managed libraries will appear in your Sketch libraries list with (DSM) appended to the end of the library name. They can be used just as you would any other linked Sketch library. DSM will keep your managed libraries up to date, ensuring you have the most accurate assets.

dsm-managed-libraries-in-Sketch.png

To show or hide these libraries, navigate to Sketch > Preferences and click the Libraries tab.

Using versions in Sketch

At any time, you can check which version of a design system you’re using via the DSM plugin. When a new design system version is released by editors, the DSM Sketch plugin will notify you. You can then quickly update to the latest design system version and its managed libraries.

switch-dsm-design-system-version__1_.gif

You can also check if your working document is out of date with the latest design system assets via the native Sketch notification. You’ll be able to selectively apply changes to each of the documents.

sketch-updates-to-library__1_.gif

To manually switch design system versions:

  1. Above the left-hand layers list, open the DSM plugin panel.
  2. To the right of your design system, click the version drop-down.
  3. Next to the preferred version, click Switch.

When you switch to a different version of the design system, all managed libraries will be replaced in Sketch. This could also trigger Sketch’s notification for available library updates.

dsm-manually-switch-versions.gif

Accessing the DSM documentation site

The DSM documentation site is the web version of your design system where you can view documentation, live components, and other design assets.

You can access the documentation site via the DSM Sketch plugin, your InVision account, or a direct link—provided to you by another collaborator on the design system.

To access the documentation site from Sketch:

  1. In the DSM plugin panel above the left-hand layers list, click Open Plugin.
  2. Click the name of the preferred design system.

The documentation site will then open in a new browser tab.

open-design-system-documentation-site-from-sketch-plugin.gif

At the top of the documentation site, you’ll notice two navigation links:

  • Foundations
  • Components

Foundations

The Foundations section of your documentation site is where assets like documentation, color styles, and text styles will live. In the left-hand navigation, click any item to open it in the main panel.

foundations-on-dsm-doc-site.gif

Components

The Components section is where you will be able to view design assets like symbols and live components. In the left-hand navigation, click any item to view its contents. Click any individual item to view its specifics.

components-in-doc-site.gif

Components are unique in that additional tabs can be added by admins and editors. These tabs can include live components synced from Storybook, additional links, or embedded content from a variety of sources.

Switching versions on the documentation site

To switch design system versions on the DSM documentation site:

  1. Sign in to the DSM documentation site and open your design system.
  2. Navigate to the top left of the page and click the version drop-down.
  3. Select the preferred version, or click Release notes to view the entire version history with any associated notes.
switch-versions-on-doc-site.gif

Learn something new

Getting Started Guides