Sync

Sync tokens from one tool to another, from multiple sources to multiple targets.

For example from your design tool to your token translation tool:

Architecture

This process is split into three steps:

• Reader - Reads the tokens read from your source and parses them into a unified format
• Lexer - Understands the tokens your way
• Writer - Writes them to disc according to your generated knowledge in the format of your preferred token translation tool

Theemo has support for a Figma Reader and Style Dictionary Writer but thanks to its pluggable architecture, you can write your own reader or write your own writer plugins.

Setup

To get you started, install these packages:

pnpm add -D @theemo/cli @theemo/sync @theemo/figma @theemo/style-dictionary

Create a config file theemo.config.mjs, and start with this template. You'll find further configuration in the respective readers and writers that you use.

theemo.config.js

import { defineConfig } from '@theemo/cli';

export default defineConfig({
  sync: {
    // ...
  }
});

To run it, place it as a script in your package.json:

package.json

{
  "scripts": {
    "sync": "theemo sync"
  }
}

Now you can run it with:

pnpm sync