Design Tokens App

Automated design tokens generation from Figma Token Studio using StyleDictionary.

Features

• 🎨 W3C Design Tokens Format - Supports the latest design tokens specification
• 🔄 Multi-Platform Output - Generates tokens for Web (JS/CSS) and React Native
• 🚀 GitLab CI/CD - Automated build and deployment pipeline
• 📦 NPM Publishing - Ready for package distribution
• 🔗 Webhook Integration - Automatic builds from Figma Token Studio

Quick Start

Installation

npm install

Build Tokens

npm run build

Test Build

npm run test

Watch for Changes

npm run watch

Start Webhook Server

npm run serve

Project Structure

design-tokens-app/
├── tokens/
│   ├── tokens.json          # Source W3C design tokens
│   └── transformed.json     # StyleDictionary format
├── build/
│   ├── web/
│   │   ├── tokens.js        # JavaScript ES6 exports
│   │   └── tokens.css       # CSS custom properties
│   └── native/
│       └── tokens.js        # React Native tokens
├── scripts/
│   ├── build-tokens.js      # Main build script
│   ├── test-build.js        # Build verification
│   └── webhook-server.js    # Figma webhook server
└── .gitlab-ci.yml           # CI/CD configuration

Token Categories

• Colors - Complete color palette with semantic naming
• Spacing - Consistent spacing scale
• Typography - Font families, sizes, weights, and line heights
• Border Radius - Consistent corner radius values
• Opacity - Standard opacity levels
• Dimensions - Base dimension scale

Usage Examples

JavaScript/TypeScript

import { 
  ColorsBlue600, 
  SpacingMd, 
  FontSizesH1 
} from './build/web/tokens.js';

const button = {
  backgroundColor: ColorsBlue600,
  padding: SpacingMd,
  fontSize: FontSizesH1
};

CSS

@import './build/web/tokens.css';

.button {
  background-color: var(--colors-blue-600);
  padding: var(--spacing-md);
  font-size: var(--font-sizes-h1);
}

CI/CD Pipeline

The GitLab CI pipeline includes:

1. Build Stage - Transforms tokens and generates output files
2. Test Stage - Verifies build artifacts
3. Publish Stage - (Commented) NPM package publishing
4. Deploy Stage - (Commented) Vercel deployment trigger

Configuration

StyleDictionary Config

The build process uses StyleDictionary v3 with custom transforms for:

• W3C token format conversion
• Font weight mapping (Regular → 400, Bold → 700)
• Reference resolution
• Multi-platform output

Webhook Server

Configure the webhook server for Figma Token Studio integration:

// Set environment variables
WEBHOOK_PORT=3000
WEBHOOK_SECRET=your-secret-key

Troubleshooting

Build Issues

1. Dependency conflicts: Use npm install --legacy-peer-deps if needed
2. Missing build directory: The script automatically creates required directories
3. Token references: Complex references may need manual resolution

Common Fixes

• Ensure Node.js version 16+ is installed
• Clear node_modules and reinstall if build fails
• Check token syntax in tokens/tokens.json

Development

Adding New Tokens

1. Update tokens/tokens.json with W3C format
2. Run npm run build to generate outputs
3. Test with npm run test

Modifying Build Process

Edit scripts/build-tokens.js to customize:

• Token transformation logic
• Output formats
• Platform-specific builds

License

MIT License - see LICENSE file for details.

Support

For issues and questions:

• Create an issue in the GitLab repository
• Check the troubleshooting section above
• Review StyleDictionary documentation