×

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. 

Screen_Recording_2018-08-15_at_07.06_AM.gif

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

menu.png

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.

Image_2018-08-15_at_6.55.43_AM.png

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.

dsm-web-view.png

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.

wysiwyg-editor-dsm.gif

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.

dsm-web-view-add-image.png

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.

fonts-section-dsm.png

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

search-dsm.gif

 

Getting Started: Design System Manager (
)

Walkthrough of the UI for DSM

Prev