×

What can I do with the DSM API?

Design System Manager supports design tokens, which lets your development team use the colors and styles you define within DSM directly within their code. The design token feature supports different formats including CSS, SASS, Less, Stylus, and others. These files are accessible with the DSM API, so developers can propagate design tokens to different applications and can also import the remote file to ensure that they’re always seeing the latest colors and text styles that you’ve defined within DSM.

For now, DSM only supports color, text style and icons export, but we’ll be adding measurements, shadows, and other types of design tokens in the future.

Accessing design tokens from your DSM library

  1. From your DSM plugin modal in Sketch, click the dropdown menu at the top left, hover over your library, then click View on the web. The DSM web view will open in your browser.
    Screenshot_2017-12-14_10.11.57.png
  2. In the top right corner, click the Design Tokens icon next to the black Share button.
    Screenshot_2017-12-14_10.14.04.png
  3. To access your styles directly from your application code, pick the relevant format or framework on the left to access up to date style assets. Depending on the tech you’re using, you can either import the remote URL for your styles to help ensure that the design tokens are always current, or download the files from DSM and use locally.
    Screenshot_2017-12-14_10.48.47.png

    Screenshot_2017-12-14_10.49.09.png

 

Using design tokens in development

How you use DSM’s design tokens will depend on the technology you’re using them in. For example, if you’re using basic CSS then you’d import the DSM styles using @import and the URL generated in the preceding section. For example:

@import url("https://projects.invisionapp.com/dsm-export/example-organization/example-library/_style-params.css?key=ABCD1234”)

 
You’d then reference the styles found within the preview within your HTML. For example, if your DSM library had a color called Primary 1” and you left the color prefix” option unchanged when generating your design tokens, then you could reference that color as a custom property by doing the following:

#example_element {
  background-color: var(--color-primary-1);
  color: var(--color-primary-2);
}


Note that this approach relies on custom properties which are an experimental feature of CSS that may not be supported by all browsers. See here
 for more on browser compatibility for that feature.

 
If you need better browser compatibility but still want to take advantage of design tokens in yourr CSS, then using a CSS preprocessor like Sass or LESS would let you take advantage of the design tokens during development but would generate more traditional CSS once compiled. If you’ve never worked with CSS preprocessors before, there are a number of great resources out there that you can use to learn more including courses from CodeSchool and Lynda.