If your Styleguide already has colors, text styles, and spacing tokens published in Zeplin, select the "Export Design Tokens" button from your styleguide to download a .zip package or copy the tokens to your clipboard.
Copying your Design Tokens to the Clipboard
You'll be asked to Fetch the Design Tokens through the API or download a .zip package. If you would like to copy the design tokens to your clipboard, you can select "Fetch."
Here is an example of the color tokens that are generated:
{
"colors": {
"card-overlay": {
"value": "rgba(85, 77, 86, 0.4)",
"metadata": {
"source": {
"styleguide": {
"id": "6635019cbe6761dad4dc4016",
"name": "Snack Overflow App",
"platform": "ios"
}
},
"resource": {
"id": "6638a128764e2ccb55fde1b6",
"type": "Color"
}
}
},
"peach-pressed": {
"value": "rgb(238, 103, 35)",
"metadata": {
"source": {
"styleguide": {
"id": "6635019cbe6761dad4dc4016",
"name": "Snack Overflow App",
"platform": "ios"
}
},
"resource": {
"id": "6638a1288ce7e34f40aabae3",
"type": "Color"
}
}
},
"karl-pressed": {
"value": "rgb(237, 236, 237)",
"metadata": {
"source": {
"styleguide": {
"id": "6635019cbe6761dad4dc4016",
"name": "Snack Overflow App",
"platform": "ios"
}
},
"resource": {
"id": "6638a128a47aad7daed1b4c3",
"type": "Color"
}
}
}
}
}
Downloading design tokens as a .zip package
You can also download individual JSON files of your color, text style, and spacing tokens by selecting the "Download" option from the same menu.
