tokensync

Sync design tokens between CSS and Figma variables in real-time.

Installation

npm install -g tokensync

Quick Start

# In any project directory
tokensync init my-project
tokensync bridge    # Terminal 1
tokensync watch     # Terminal 2

Then load the Figma plugin and connect.

Commands

| Command | Purpose | |---------|---------| | tokensync init [name] | Scaffold TokenSync in current directory | | tokensync watch | Watch tokens.css and sync to Figma | | tokensync bridge | Start WebSocket bridge server |

Configuration

tokensync.config.js in project root:

export default {
  project: { name: 'my-project' },
  tokens: { file: './tokens.css' },
  bridge: {
    url: 'ws://localhost:3055',
    port: 3055,
    channel: 'my-project'
  },
  figma: {
    collection: 'Tokens',
    mode: 'Light'
  }
};

How It Works

1. tokens.css is your single source of truth for design tokens
2. tokensync watch monitors the file and sends changes to Figma
3. tokensync bridge relays messages between the watcher and Figma plugin
4. The Figma plugin creates/updates variables in your Figma file

License

MIT