DesignSync

Set of tools to help you sync your design tokens across platforms.

Overview

DesignSync processes W3C Design Token Format Module (DTFM) compliant tokens and transforms them into platform-specific output formats via a plugin system.

Packages

Core

Package	Description
@design-sync/cli	Command-line interface
@design-sync/manager	Plugin orchestration, config resolution, file writing
@design-sync/w3c-dtfm	Token processor, query API, color utilities
@design-sync/utils	Shared utilities
@design-sync/rpc	JSON-RPC 2.0 over postMessage
@design-sync/storage	Remote storage providers (GitHub, GitLab, Bitbucket, Azure DevOps)

Output Plugins

Package	Target
@design-sync/css-plugin	CSS custom properties
@design-sync/json-plugin	JSON
@design-sync/vanilla-extract-plugin	vanilla-extract
@design-sync/styled-components-plugin	styled-components
@design-sync/emotion-plugin	Emotion
@design-sync/tailwind-plugin	Tailwind CSS
@design-sync/panda-plugin	Panda CSS
@design-sync/unocss-plugin	UnoCSS
@design-sync/docs-plugin	Documentation (Markdown/HTML)
@design-sync/assets-plugin	SVG sprites, icon components
@design-sync/react-native-plugin	React Native
@design-sync/tamagui-plugin	Tamagui
@design-sync/compose-plugin	Jetpack Compose (Kotlin)
@design-sync/flutter-plugin	Flutter (Dart)
@design-sync/swiftui-plugin	SwiftUI (Swift)

UI

Package	Description
@design-sync/figma-plugin	Figma plugin (Solid.js + vanilla-extract)
@design-sync/design-tokens	Theme contracts and platform themes
@design-sync/uikit	Shared UI components (Solid.js + Kobalte)
@design-sync/figma-icons	Figma icon components

Quick Start

Configuration

Create a design-sync.config.ts in your project:

import { cssPlugin } from '@design-sync/css-plugin';
import { jsonPlugin } from '@design-sync/json-plugin';

export default {
  uri: 'gh:owner/repo/path#branch',
  out: './tokens',
  plugins: [cssPlugin(), jsonPlugin()],
  requiredModes: ['dark', 'light'],
  defaultMode: 'default',
};

Sync tokens

npx design-sync sync

Development

Requires Node.js >= 22 and Bun as package manager.

# Install dependencies
bun install

# Build all packages
bun run build

# Lint all packages
bun run lint

# Type check all packages
bun run test:types

# Run all tests
bun run test

# Create a changeset for versioning
bun run changeset

Single package

cd packages/css-plugin
bun run build
bun run test

Publishing

GitHub Actions manages versioning and publishing via Changesets. When changeset commits are merged to main, a release PR is created automatically. Merging the release PR publishes updated packages to npm.

License

MIT