TokensBrücke Plugin Setup Guide

Quick Installation

1. Within the project folder install Cobalt and its plugins locally

npm i -D @cobalt-ui/cli @cobalt-ui/plugin-css @cobalt-ui/plugin-js @cobalt-ui/plugin-sass

2. Install the TokensBrücke plugin from Figma Community: TokensBrücke Plugin.

Generating Tokens.json

Configure and save your tokens.json in the project folder file using these settings:

• Color Mode: hex
• Typography: yes
• Grids: no
• Effects: yes
• Separate Styles: keep separate
• Variables Scope: no
• DTCG Format: yes
• .value String for Aliases: off

Build with Cobalt

Run the following commands in your project directory:

npx co build
node postprocess.cjs

Use postprocess.cjs to adjust index.scss if needed, to remove colorBase (only if alias are already resolved)