Walkthrough of the UI for DSM

Sketch DSM plugin UI tour

After clicking the DSM icon, 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


At the top of the pop-up module, you’ll notice a dropdown menu. Here you can perform tasks like:

  • Switching libraries
  • Managing library versions
  • Importing new libraries
  • Managing symbols
  • Adding collaborators
  • Signing 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 web view, click the drop-down, hover over the library name, and click View on the web.


A new browser window or tab will open, and if you have a valid session cookie, the DSM library will be accessed directly. Otherwise, the InVision sign in page will display.



Getting Started: Design System Manager (