Ray Syncs

About this plugin

- Token Generator turns your Figma variables into consistent, developer‑ready design tokens — across CSS/SCSS, JavaScript/TypeScript, Flutter/Dart, Swift, and Kotlin. Choose collections and modes, apply naming conventions (camelCase, PascalCase, snake_case), preview outputs in real‑time, and export single files or multi‑group bundles.

- Built for cross‑discipline teams, it preserves meaningful naming from Figma (including multi‑segment paths and camelCase) and converts values like colors to hex automatically. For teams that document tokens, optional Notion sync provides a central, browsable source of truth using a local proxy.

- From design to code in minutes — consistent, predictable, and ready for production.

Key Features

- Multi‑platform exports: CSS, SCSS, JS/TS, Flutter/Dart, Swift, Kotlin, JSON.

- Flexible naming conventions: camelCase, PascalCase, snake_case.

- Collections and modes: select specific variable sets (e.g., light/dark).

- Live preview: verify naming and values before export.

- Notion sync (optional): push tokens to documentation via local proxy.

- Smart value handling: color hex conversion; spacing/typography formatting.

Who It’s For

- Designers needing clean handoff with consistent token names.

- Developers wanting ready‑to‑use tokens across multiple platforms.

- Teams standardizing naming and publishing tokens to shared docs.

Requirements (Optional Notion Sync)

- Local proxy server running at http://localhost:3001 for Notion API requests.

Notion Template For Syncs

https://www.notion.so/2b7680f5245b813d8febc4c959eff189?v=2b7680f5245b81feb649000cff24f692&source=copy_link