- 01 Feb 2023
- 2 Minutes to read
- DarkLight
Try it out: Automating Design Tokens via an API
- Updated on 01 Feb 2023
- 2 Minutes to read
- DarkLight
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:
- Add your design tokens to a DSM design system.
- Make sure you have access to the API endpoint.
- 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.
- 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:
- TOKENS_URL = https://exampleurl.invisionapp...
- API_KEY = VJiIU90Ob
🔵 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
.