Skip to content
SyntopeSyntope

Getting started

Introduction2026-11-09

Three ways in. Each one ends with a result you can check.

In Figma

You need Figma Desktop. Syntope Tokens, the Figma plugin, runs in Figma Design files only, not in FigJam or Slides.

  1. Download the plugin ZIP from the latest release and unzip it.
  2. In Figma Desktop, choose Plugins → Development → Import plugin from manifest and select manifest.json from the unzipped folder.
  3. Open Syntope Tokens in a Figma file. A file without tokens shows no tokens yet. Choose create token set, enter a path such as foundation/color, and choose create. The plugin stores the path in lowercase.
  4. With the set selected, choose create token. Keep type on color, set name to brand.primary and the value to #3b82f6, then choose create token in the dialog. The dot creates a group brand inside the set.
  5. Select a layer on the canvas. Right-click the token in the list, choose Apply token, then fill.

Result: the layer takes the colour, and the inspect tab shows which token is bound to which property. To take it back, use Figma’s own undo. The Undo button in the plugin covers token changes, not layers.

Your tokens now live in this Figma file only. To keep them in Git, link a repository under Settings → sync provider, see Sync.

With an AI app

Syntope MCP connects your AI app to the plugin. You need a Mac with macOS 13.5 or later, Figma Desktop, and one of Codex, Claude Code, Cursor or Claude Desktop.

  1. Install the plugin as described above.
  2. From the same release, install the .pkg for Codex, Claude Code and Cursor, or the .mcpb for Claude Desktop. Choose arm64 for Apple silicon or x64 for an Intel Mac. Use the plugin and the Mac app from the same release.
  3. The files are not signed, so macOS asks you to allow them. Go to System Settings → Privacy & Security and choose Open Anyway.
  4. Open Syntope Tokens in your Figma file and keep it open. Ask your AI app: “Show me my Syntope tokens.” Confirm the connection on your Mac and in the plugin, then allow the app for this file.
  5. Ask again.

Result: the app names your Figma file and lists its tokens. A file without tokens gives an empty list.

An app starts with read access. To let it change tokens, allow that under Settings → MCP. Connect your AI app has each step in detail, and What AI apps can do lists the tools.

In your own code

You need Node.js 22.12 or newer in the 22.x line, or Node.js 24 or newer. Syntope Engine is not on npm yet, so build it from the repository:

Terminal window
git clone https://github.com/syntope-eu/syntope-tokens.git
cd syntope-tokens
npm ci
npm run build -w @syntope/token-core
npm pack -w packages/engine

Then, in your own project:

Terminal window
npm install /path/to/syntope-token-core-0.3.0.tgz

Result: @syntope/token-core/token-system is available to import. Use the engine in code has a complete example that resolves a reference in two themes.

Where to go next

If you want to Read
Understand sets, themes and references Core concepts
Support several brands, or light and dark Themes
Know what a token type accepts Token types
Bring in existing tokens Import and export
Fix a problem in the plugin Troubleshooting
ImprintPrivacy