Walkthrough of the UI for DSM

Sketch DSM plugin UI tour

To open Design System Manager, click the DSM icon (dsm-plugin-icon.png) or use the keyboard shortcut Command +L.

A window will appear with two panes. The left pane contains your categories. The right pane contains a preview, as well as the ability to add to those categories. 

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 add content to existing categories, or create a new folder by clicking Add Folder. You can also click and drag to reorder folders or move items from one folder to another. 


At the top left of the DSM pop-up modal, you’ll notice the library name and version. Click the drop-down arrow to perform any of the following actions:

  • Switch libraries
  • View and manage library versions
  • Import new libraries
  • Manage symbols
  • Add collaborators
  • Sign out


It’s possible that not all features listed in the menu will be available for your selected plan. For more information on DSM Free and DSM Enterprise, check out our comparison of DSM plans.

To the right of the dropdown menu is a small arrow icon (Image_2018-07-03_at_4.49.54_PM.png). This will allow you to sync your selected library to the current document.

Accessing the DSM web view

To access the DSM web view from Sketch:

  1. Click the DSM icon (dsm-plugin-icon.png) or use the keyboard shortcut Command + L.
  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 DSM Library.


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. To edit a title or description, click the text and begin typing. 

Descriptions also come equipped with a WYSIWYG editor. To reveal the editor, highlight the text within your description. Any changes will be automatically saved once you click outside of the text field.


To add an image to your description, start a new line by pressing the Enter key. In the WYSIWYG editor that appears, click the image icon (dsm-image-icon.png). You can now upload an image from your computer.


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.

Fonts in DSM web view

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


Note: The fonts section is not accessible from the DSM plugin in Sketch. To view the fonts section, you must open your library in the DSM web view.

Searching the DSM web view

The DSM web view allows you to search for items within your entire library or even specific folders. 

To search a specific folder, first click into that folder. At the top-right of the page, click the magnifying glass icon (Image_2018-08-15_at_11.58.36_AM.png) and enter your search term. If you need to broaden your search to the entire library, navigate to the left-hand sidebar and click All


Note: To help improve search within DSM, avoid using underscores, periods, or backslashes when naming elements. For more information, check out this article: Why can't I find items when searching in Design System Manager (DSM)?

Getting Started: Design System Manager (

Walkthrough of the UI for DSM