Skip to content

README.md

Latest commit

 

History

History
116 lines (86 loc) · 3.77 KB

README.md

File metadata and controls

116 lines (86 loc) · 3.77 KB

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
⚡