Navigating legacy DSM
  • 13 Jun 2023
  • 2 Minutes to read
  • Dark
    Light

Navigating legacy DSM

  • Dark
    Light

Article Summary

This article applies specifically to legacy DSM. If you're using the new DSM, check out the DSM Getting Started Guide.

There are 2 primary components to the legacy DSM experience: the DSM Sketch plugin, and the DSM web view. This article provides a quick overview of each.

Legacy DSM Sketch plugin

Warning:

Sketch 85 is the last version of Sketch supported by the legacy DSM plugin.

The legacy DSM Sketch plugin is how you will build your design systems and ultimately implement them into your designs.

To open legacy design systems in Sketch, click the legacy DSM icon () in the right-hand Craft toolbar. A new window will open where you can access your design systems.

Click the arrow to the left of the category name to expand the folder and see the contents. Existing categories include:

  • Colors
  • Text Styles
  • Layer Styles
  • Icons
  • Components

You can rename, move, and add content to existing categories, or you can create new folders by clicking Add Folder.

At the top left of the legacy DSM window, you’ll notice the library name and version. Click the drop-down to switch design systems, release new versions, sign out, or perform other various actions. 

Note:

Some features listed may not be available for your selected plan. 

To the right of the design system name is the sync icon (). This will allow you to sync the design system to the current Sketch document.

legacy-dsm-sketch-sync.png

Accessing the DSM web view

The DSM web view serves at the documentation site for all your design systems. From the web view, you can add documentation, manage permissions, and share with others.

To access the DSM web view from Sketch:

  1. Click the legacy DSM icon ().
  2. In the top-left corner of the DSM modal, click the drop-down arrow.
  3. Hover over the library name and click View on the web.

Your browser will open, displaying the design system documentation site.

Note:

If you are not signed in to InVision, the sign-in page will display.

Editing section titles and descriptions

From the DSM web view, you have the option of editing section titles and descriptions. 

Descriptions also come equipped with a WYSIWYG editor. To reveal the editor, highlight the text within your description. To add an image, list, or code block to your description, start a new line by pressing Enter. A WYSIWYG editor with differing options will appear.

You can also drag and drop images into the DSM web view, or you can copy and paste images from an outside source. Supported image formats include PNG, JPEG, and GIF.

Note:

The maximum recommended size for images is 800x400 pixels or less than 2 MB in size.

Fonts in DSM web view

The DSM web view contains a fonts section that displays the font types associated with your design system's text styles. To access these fonts, navigate to the DSM web view and open your design system. In the left-hand navigation, click Fonts.


The Fonts section is not accessible from the DSM tool in Sketch, so you must open your design system in the DSM web view. Learn more about fonts in legacy DSM.

Additional resources

Looking for more information on legacy DSM? Check out the legacy DSM section of the InVision Knowledge Base.


Was this article helpful?