Using the design tokens and icons API
  • 27 Jan 2023
  • 1 Minute to read
  • Dark
    Light

Using the design tokens and icons API

  • Dark
    Light

Article Summary

This article applies specifically to the new DSM. If using legacy DSM, check out this article instead.

The DSM Tokens and Icons API provides programmatic access to your tokens. It allows you to download a ZIP file that includes the entire folder tree, where each token set is available as a JSON file.

To help you get started, we created this example script that uses the DSM Tokens API and Style Dictionary to create style files for different platforms.

Accessing the API endpoints

To access the API endpoint for tokens:

  1. Open your DSM design system and navigate to the Tokens page.
  2. Next to the Tokens heading in the left-hand navigation, click the More menu .
  3. Click API setup.
  4. Copy the API endpoint for your design system's tokens.invision-dsm-copy-api-endpoint.gif

To access the API endpoint for icons:

  1. Open your DSM design system and navigate to the Tokens page.
  2. Next to the Tokens heading in the left-hand navigation, click More.
  3. Click API setup.
  4. Open Icons API & Download.
  5. Copy the API endpoint for your design system's icons.invision-dsm-icons-api.gif

Generating authentication keys

Using the design tokens API requires an authentication key.

To generate an authentication key:

  1. Open your DSM design system and navigate to the Tokens page.
  2. Next to the Tokens heading in the left-hand navigation, click the More menu .
  3. Click API setup.
  4. In the API Authentication section, click Manage.
  5. Click Generate new key.
  6. Copy the Key ID, add an optional Description, and click Save.

Revoking authentication keys

To revoke an existing authentication key:

  1. Open your DSM design system and navigate to the Tokens page.
  2. Next to the Tokens heading in the left-hand navigation, click the action menu .
  3. Click API setup.
  4. In the API Authentication section, click Manage.
  5. Next to the appropriate key, click Revoke.
  6. To confirm, click Revoke again.invision-dsm-revoking-authentication-keys.gif

Accessing endpoints for specific versions

To access the API endpoint for a specific version of your design system, first switch to the appropriate version using the version drop-down at the top of the DSM documentation site.

After doing so, follow the previously mentioned steps for accessing the API endpoint.

API permissions

Viewers, editors, and admins of a design system can download tokens and use the API.

Only editors and admins can generate and revoke authentication keys. Viewers can see the first four characters of a key, who generated it, and the description. For viewers to access the API, an admin or editor will need to provide them with an authentication key directly.


Was this article helpful?