prism-cli

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

Quick Start

# In your project directory
npx prism-cli init
npx prism-cli start

Then open the Figma plugin — it will guide you through initial setup.

Commands

| Command | Purpose | |---------|---------| | prism start | Start bridge + watcher together (recommended) | | prism init [name] | Scaffold Prism in the current directory | | prism watch | Watch tokens.css and sync to Figma | | prism bridge | Start WebSocket bridge server only | | prism bootstrap from-css | Create Figma variables from an existing CSS file | | prism bootstrap from-figma | Generate a CSS file from Figma variables | | prism bootstrap from-template | Scaffold from a built-in template then push to Figma | | prism ingest | Extract colours from Figma, generate missing state variants |

Bootstrap

One-time setup to connect your existing tokens to Figma:

# Push an existing tokens.css to Figma
npx prism-cli bootstrap from-css --tokens tokens.css --collection "Tokens" --mode Light

# Generate tokens.css from Figma variables
npx prism-cli bootstrap from-figma --collection "Tokens" --mode Light --output tokens.css

# Scaffold from the minimal template (22 tokens: colours, input, button)
npx prism-cli bootstrap from-template --name minimal --collection "Tokens"

The bridge must be running for bootstrap to work:

npx prism-cli bridge   # in one terminal
npx prism-cli bootstrap from-css   # in another

Or use prism start which runs both together.

Configuration

prism.config.js in your project root:

export default {
  project: {
    name: 'my-project',
    type: 'webapp'  // webapp | marketing | library
  },
  tokens: {
    file: './tokens.css',
    format: 'hex'  // hex | oklch
  },
  theme: {
    mode: 'light',  // light | dark | both
    primaryColor: '#3b82f6'
  },
  components: ['button', 'input'],
  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. prism start runs the bridge (WebSocket relay) and watcher (file monitor) together
3. The Figma plugin connects to the bridge and syncs variables bidirectionally

Changes to tokens.css are pushed to Figma automatically. Changes to Figma variables are written back to tokens.css.

Migrating from Legacy Scripts

If you previously used npm run bridge + npm run watch:

# Old workflow
npm run bridge   # Terminal 1
npm run watch    # Terminal 2

# New workflow
npx prism-cli start

Your existing prism.config.js continues to work unchanged.

License

MIT