Try it out: Automating Design Tokens via an API
  • 01 Feb 2023
  • 2 Minutes to read
  • Dark
    Light

Try it out: Automating Design Tokens via an API

  • Dark
    Light

Article Summary

Access your data programmatically with an API to speed up your change management process. Use this example script below to see it in action.

Example script for using DSM Tokens

To help you get started with DSM Design Tokens, we've created an example script that uses the DSM Tokens API and Style Dictionary to create style files for different platforms. Use this to explore the API before jumping in with your own data.

Activity

🔵Before you start

Before using the example script, you will need to:

  1. Add your design tokens to a DSM design system.
  2. Make sure you have access to the API endpoint.
  3. Install Style Dictionary into your working directory. This is typically a one-liner if you have NPM installed. For more information, see Style Dictionary's Installation documentation.
  4. Create a file named config.json in the root of your project and paste in the following JSON sample:
{
 "source": [
   "tmp/**/*.json"
 ],
 "platforms": {
   "scss": {
     "transformGroup": "scss",
     "buildPath": "pesto/scss/",
     "files": [{
       "destination": "_variables.scss",
       "format": "scss/variables"
     }]
   },
   "css": {
     "transformGroup": "css",
     "buildPath": "pesto/css/",
     "files": [{
       "destination": "_variables.css",
       "format": "css/variables"
     }]
   },
   "ios": {
     "transformGroup": "ios",
     "buildPath": "Pesto/",
     "files": [
       {
         "destination": "StyleDictionaryColor.h",
         "format": "ios/colors.h",
         "className": "StyleDictionaryColor",
         "type": "StyleDictionaryColorName",
         "filter": {
           "attributes": {
             "category": "color"
           }
         }
       },
       {
         "destination": "StyleDictionaryColor.m",
         "format": "ios/colors.m",
         "className": "StyleDictionaryColor",
         "type": "StyleDictionaryColorName",
         "filter": {
           "attributes": {
             "category": "color"
           }
         }
       },
       {
         "destination": "StyleDictionarySize.h",
         "format": "ios/static.h",
         "className": "StyleDictionarySize",
         "type": "float",
         "filter": {
           "attributes": {
             "category": "size"
           }
         }
       },
       {
         "destination": "StyleDictionarySize.m",
         "format": "ios/static.m",
         "className": "StyleDictionarySize",
         "type": "float",
         "filter": {
           "attributes": {
             "category": "size"
           }
         }
       }
     ]
   }
 }
}

🔵 Setting up the script

The following script will allow users to download design tokens from a DSM design system and then pass the JSON through the Style Dictionary build system for consumption in any language or platform.

Save the snippet below in the root of your tokens project and name the file build with no file extension.


#!/usr/bin/env bash
TOKENS_URL=*****
API_KEY=*****
TMP_DIR=tmp
ZIP_FILE=$TMP_DIR/dsm-style-dictionary.zip

# Create temporary dir.
mkdir -p $TMP_DIR

# Download and unzip property files.
curl -H "X-API-KEY: $API_KEY" $TOKENS_URL --output $ZIP_FILE
unzip $ZIP_FILE -d $TMP_DIR

# Create styles.
style-dictionary build --config config.json

# Clean up temporary dir.
rm -rf $TMP_DIR

Replace ***** with the actual values for TOKENS_URL and API_KEY. For example:

🔵 Running the script

To run the script, first make it executable. Using Terminal, navigate to the directory containing the script and run chmod 755 build (No quotes are needed in Terminal. For further instructions, visit the Terminal User Guide).

Next, navigate to the directory containing the build script and run ./build.


Was this article helpful?