chore(monorepo): 🤖 Figma Design Tokens plugin (initial)

[punkbit]

Why?

The Design Tokens Figma plugin is based on Figma's Schema 2025 Design Systems recap and was developed as a standalone proof of concept in a separate repo. Porting it to the monorepo as a new package ensures it shares the same dependency management, build tooling, and workspace conventions as the rest of the click-ui ecosystem.

⚠️ Depends on #946 (which should be merged first)

How?

• Copied plugin source files (src/index.ts, src/utils/, src/ui/) from the POC repo to packages/figma-design-tokens-plugin
• Copied build and TypeScript config (vite.config.ts, tsconfig.json, tsconfig.node.json, manifest.json) as-is
• Created a new package.json scoped as @clickhouse/figma-design-tokens-plugin with no unnecessary dependencies
• Removed all code comments from TypeScript source files

Tickets?

N/A

Contribution checklist?

• You've done enough research before writing
• You have reviewed the PR
• The commit messages are detailed
• The build command runs locally
• Assets or static content are linked and stored in the project
• For documentation, guides or references, you've tested the commands

Security checklist?

• All user inputs are validated and sanitized
• No usage of dangerouslySetInnerHTML
• Sensitive data has been identified and is being protected properly
• Build output contains no secrets or API keys

Preview?

Install via Plugins → Development → Import plugin from manifest... using packages/figma-design-tokens-plugin/manifest.json

[changeset-bot]

⚠️ No Changeset found

Latest commit: 38430ae

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 33s —— View job

---

Code Review

• Gather context
• Read source files
• Analyze for issues
• Post review

---

Great work porting this from the POC repo into the monorepo! The overall structure is clean, the type definitions are solid, and the DTCG token traversal logic is well thought out. A few things to address before merging:

🚨 Must Fix

• Leftover debug logs — src/index.ts and src/utils/tokens.ts are littered with console.log("DEBUG ...") statements (40+ occurrences). These will spam the Figma developer console for every user. Strip them out or gate behind a DEBUG flag before shipping. Fix this →

• Unhandled import error leaves UI broken — figma.ui.onmessage (index.ts:225) calls importJSONFile with no try/catch. If the Figma API throws or JSON.parse fails mid-import, IMPORT_COMPLETE is never posted and the submit button stays permanently disabled. Wrap in try/catch and post an error message back to the UI. Fix this →

• createVariableAlias non-null assertion crash — tokens.ts:492 does allTokens[valueKey]! — if valueKey is somehow missing here, this will throw Cannot read properties of undefined. traverseToken already guards this, but the function itself makes a hard assumption. Add a guard or make the precondition explicit.

💡 Suggestions (non-blocking)

• (token as any).scopes repeated 6× — The scopes property isn't in the current @figma/plugin-typings (v1.106). Using as any works but hides type errors. Consider a local augmentation: (token as Variable & { scopes: string[] }).scopes = scopes or a typed helper, so future type changes are caught. Fix this →

• File-name heuristic is fragile — The isPrimitivesFile / isSemanticFile detection (index.ts:34–36) relies on the filename containing "primitives" or "semantic". If a user names their file differently, scoping and mode creation silently break. Worth a brief note in the README so users know the naming convention is load-bearing.

• lint/format/test scripts are no-ops — package.json stubs these all as echo 'Skip ...'. At minimum, wire lint to tsc --noEmit (which is already typecheck) so CI can catch type errors automatically.

• vite.config.ts build banner leaks version string — The banner in the IIFE build (vite.config.ts:54) logs "DTCG Variables Plugin v2.0 - Build: ..." to console on every plugin load. Likely fine for dev, but worth removing or making opt-in for a production build.

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-ncmqx7gq6-clickhouse.vercel.app

Built from commit: 12ec175862ec2d3f60b66b08639a531ef83e63d3