Accessing design system documentation
  • 01 Feb 2023
  • 1 Minute to read
  • Dark
    Light

Accessing design system documentation

  • Dark
    Light

Article Summary

One of the benefits of DSM is documentation standing side-by-side with a design element. From within Sketch, you can select a design system to view its documentation on the web. 

The DSM documentation site is part of the web experience for a design system where you can view design guidelines and information on how to use elements, interact with live components, dive into version history, and find other documentation, like team procedures. 

You can access the documentation site via the DSM-Sketch plugin, through the Design Systems in your InVision account, or via a direct link provided to you by one of your DSM collaborators.

To access a DSM design system documentation site from Sketch: 

  1. When signed into Craft, open Sketch. 
  2. In the top-right, select the DSM icon to open the modal window.
  3. On your preferred design system, hover over the name to reveal an arrow and click

The documentation site will then open in your browser to the version of the design system you're currently viewing. At the top of the documentation site, in addition to the Home page, you’ll notice three navigation links:

  • Foundations
  • Components
  • Tokens (must be enabled to view)

The Foundations section of your documentation site is where assets like documentation, color styles, text styles, and icons live. In the left-hand navigation, click any item to open it in the main panel.

The Components section is where you will be able to view design assets like design symbols and live components. In the left-hand navigation, click any item to view its contents. Click any individual item to view its specifics. Components are unique in that additional tabs can be added by admins and editors. These tabs can include live components synced from Storybook, additional links, or embedded content from a variety of sources.

The Tokens sections is where you will be able to view design tokens. In the left-hand sidebar, you can navigate your tokens to view them in the main panel. 


Was this article helpful?