Important links

Related articles

Walkthrough of the UI for DSM

Sketch DSM tool UI tour

To open Design System Manager, click the DSM icon () 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 and items.

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

View an example library

Import new libraries

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 (). 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:

Click the DSM icon () or use the keyboard shortcut Command + L.

In the top-left corner of the DSM modal, click the drop-down arrow.

Hover over the library name and click View on the web.

Your browser will open, displaying the DSM Library.

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

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