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
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:
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.
Some features listed may not be available for your selected plan. For more information, check out our comparison of DSM plans.
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.
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:
Click the legacy DSM icon ().
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 design system documentation site.
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.
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.