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 a quick video walkthrough of design tokens in DSM, check out the DSM Learn Hub.
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.
Note: If you're trying to get or share code snippets for specific layers, groups, or components in a prototype, we recommend using Inspect instead. That being said, we are always looking to improve DSM, so if you have specific feedback for new features or capabilities, let us know.
Accessing design tokens from your DSM library
- From the DSM modal in Sketch, click the drop-down menu at the top left, hover over your library, then click View on the web. The DSM web view will open in your browser.
- In the top right corner of the DSM web view, click the Design Tokens icon ().
- 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.
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:
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:
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 your 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.