How Design Tokens Streamline Frontend‑Designer Collaboration Across Platforms

Design Tokens Overview

A Design Token is a platform‑agnostic variable that represents a visual attribute (color, font size, spacing, etc.) in a design system. Tokens provide a single source of truth that can be consumed by web, iOS, Android, and other platforms.

Token Generation Workflow

Extract attributes – retrieve color values and typography data from a source (e.g., a database) and store them in JSON.

Generate variables – transform the raw JSON into language‑specific token files (CSS, SCSS, LESS, Stylus, JSON, YAML, Android XML, iOS Objective‑C/Swift).

Create mixins – group related variables into reusable mixins for each target language.

Export results – write the generated files to disk, host them, and provide download links.

1. Variable Generation

The supported output formats are CSS, SCSS, LESS, Stylus, JSON, YAML, Android XML, and iOS (Objective‑C/Swift). The first five formats are produced automatically with the Theo library; Android XML and the iOS formats require custom scripts.

static async formatWebOrAndroid(type: string) { 
  const res = await theo.convert({
    transform: {
      // type can be 'web' or 'android'
      type: 'web',
      file: path.resolve(__dirname, 'data.json'),
    },
    format: { type }
  })
  .then(data => data)
  .catch(error => console.log(`Something went wrong: ${error}`));
  return res;
}

Custom Implementations

JSON and YAML tokens are generated by serialising the processed data to the respective file formats. iOS tokens require separate Objective‑C header/implementation files and Swift extensions.

Objective‑C example:

// Header fragment
let colorsH += `- (UIColor *)${colorName};
`;
// Implementation fragment
let colorsM += `- (UIColor *)${colorName} {
return [UIColor colorWithRed:(${red})/255 green:(${green})/255 blue:(${blue})/255 alpha:(${alpha})];}

`;
colorsH = `@interface UIColor (Colors)

${colorsH}
@end`;
colorsM = `#import "designTokenColor.h"

@implementation UIColor (Colors)

${colorsM}
@end
`;

Swift example:

// Swift extension fragment
let colorsSwift += `class func ${colorName}() -> UIColor {
return UIColor(red: (${red})/255, green: (${green})/255, blue: (${blue})/255, alpha: (${alpha}));}

`;
colorsSwift = `import UIKit;

extension UIColor {

${colorsSwift}
}
`;

2. Mixin Generation

Mixins aggregate related variables so that a complete style set can be applied with a single include. Below are examples for several target languages.

CSS custom property block:

--aotu { 
  font-family: var(--aotu-font-family);
  font-size: var(--aotu-font-size);
  font-style: var(--aotu-font-style);
  font-weight: var(--aotu-font-weight);
  letter-spacing: var(--aotu-letter-spacing);
  line-height: var(--aotu-line-height);
  opacity: var(--aotu-opacity);
  text-align: var(--aotu-text-align);
  color: var(--aotu-text-color);
  text-decoration: var(--aotu-text-decoration);
  text-transform: var(--aotu-text-transform);
}

SCSS mixin:

@mixin aotu() { 
  font-family: $aotu-font-family;
  font-size: $aotu-font-size;
  font-style: $aotu-font-style;
  font-weight: $aotu-font-weight;
  letter-spacing: $aotu-letter-spacing;
  line-height: $aotu-line-height;
  opacity: $aotu-opacity;
  text-align: $aotu-text-align;
  color: $aotu-text-color;
  text-decoration: $aotu-text-decoration;
  text-transform: $aotu-text-transform;
}

LESS mixin:

.aotu() { 
  font-family: @aotu-font-family;
  font-size: @aotu-font-size;
  font-style: @aotu-font-style;
  font-weight: @aotu-font-weight;
  letter-spacing: @aotu-letter-spacing;
  line-height: @aotu-line-height;
  opacity: @aotu-opacity;
  text-align: @aotu-text-align;
  color: @aotu-text-color;
  text-decoration: @aotu-text-decoration;
  text-transform: @aotu-text-transform;
}

Android XML style:

<style name="${aotu.name}">
  <item name="android:fontFamily">${aotu.fontFamily}</item>
  <item name="android:textSize">${aotu.fontSize}</item>
  <item name="android:letterSpacing">${aotu.letterSpacing}</item>
  ...
</style>

3. Exporting Tokens

Each generated file is saved to a dedicated directory, uploaded to a server, and a download URL is returned. When designers update the source design, the pipeline is re‑run and developers can simply replace the previously imported token bundle, eliminating manual code changes.

Reference

Theo – https://github.com/salesforce-ux/theo