manage-variables-figma

manage-variables-figma — 変数／コレクション／モードの CRUD

Figma の変数システムを段階的かつ的確に編集します。1 つまたは複数の変数の作成、一括での値の更新、名前の変更、スコープとコード構文の設定、モードの追加／名前の変更、削除を行えます。すべてのプランで use_figma を利用できます。

スキルの範囲

• use_figma のルール — 最初に公式の figma-use スキルを読み込んでください。これは Figma Plugin API の完全なリファレンスです。これらのスクリプトで必要となる要点は、トップレベルの await と return を使ったプレーンな JS（IIFE は使用せず、figma.closePlugin() も呼び出さないこと。console.log の内容は返されません）、各スクリプトの先頭で入力を const としてインライン化すること、色の範囲を 0～1 にすること、テキスト操作の前にフォントを読み込むこと、await figma.getNodeByIdAsync(...) を使うこと、そしてアトミックエラー（スクリプトが失敗すると変更は何も適用されません。エラーを読み、修正して再試行してください）です。
• ゼロからの初期設定 → setup-design-tokens-figma。コードとの同期 → import-tokens-figma / export-tokens-figma。

ワークフロー

1. 対象を特定します。 ほとんどの操作には ID が必要です。export-tokens-figma の読み取りスクリプトまたは get_variable_defs から variableId／modeId／collectionId を取得します。スクリプト内でコレクションを名前で検索することもできます。
2. references/variable-ops.md から操作を選びます。コレクションの作成、変数の作成、一括作成、一括更新、名前の変更、スコープの設定、モードの追加／名前の変更、削除について、それぞれ完全なコピペ用の use_figma スニペットがあります。
3. use_figma で実行します（skillNames: "manage-variables-figma"）。値を大量に更新する場合は scripts/batch-update-variables.js を使います（値ごとに 1 回呼び出す方法より 10～50 倍高速です）。
4. 確認します。 各スニペットは、影響を受けた ID／名前を返します。get_variable_defs で読み戻して確認します。削除する場合は、先に必ずユーザーの確認を取ってください。コレクションを削除すると、その中の変数がすべて削除され、それらを参照しているもののバインドも解除されます。

主なルール

• 色の範囲は 0～1 です。 16 進数の入力には hexToRgb を使います。
• 新しい変数には必ず scopes を設定します。デフォルトの ALL_SCOPES のままにすると、すべてのピッカーが不要な変数で埋まります。
• デザインとコードの命名を一致させるために、コード構文を設定します（setVariableCodeSyntax('WEB', '--token-name')）。
• 名前の変更は安全です。値と既存のバインドは維持されます。削除は取り消せない操作です。
• エイリアス：v.setValueForMode(modeId, figma.variables.createVariableAlias(targetVar)) を使って、ある変数を別の変数にバインドします。