Designing with 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.

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.

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.

Using DSM-managed libraries in 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 file.

To add managed libraries to Sketch:

1. Above the left-hand layers list, click the DSM plugin.
2. Beneath the preferred design system, click to expand the Managed libraries section.
3. Next to a managed library, click the + button.

These managed libraries will appear as Sketch libraries with (DSM) appended to the end of the 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.

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.

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.

To manually switch design system versions:

1. Above the left-hand layers list, open the DSM plugin.
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.

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. Above the left-hand layers list, click the DSM plugin.
2. Click the name of the preferred design system.

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

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.

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 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.