mcpField
S
sync-figma-token

sync-figma-token

github.com/firebendersデザイン・UI27683 回インストール31 週間前に更新
リポジトリ

sync-figma-token について

コードのデザイントークンと Figma 変数を比較し、差分を調整するワークフロー用スキルです。書き込み前の検証と明示的な承認を求め、削除や競合を慎重に扱います。

主な機能

  1. 01コードトークンと Figma 変数の比較
  2. 02値、エイリアス、モード、スコープの検証
  3. 03トークン差分のカテゴリ分類
  4. 04書き込み前の明示的な承認
  5. 05ドライランと最終レポートの保存

活用シーン

  1. 01コードと Figma のトークン整合性確認
  2. 02Figma の変更前にトークン差分を確認
  3. 03承認後に古いトークンを安全にアーカイブ

MCP 対応

`use_figma` 呼び出しを使用し、各呼び出しの前に `figma-use` を読み込む必要があります。書き込み前のドライランと承認の手順が定められています。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/firebenders/sync-figma-token-skill --skill sync-figma-token

インストール後、Claude Code で/sync-figma-tokenを入力して読み込まれたか確認します。

同梱ファイルmaintainers.yml

詳細

sync-figma-token

このスキルは、トークンの整合性ワークフロー（コードトークンと Figma 変数）に使用します。

必須の前提条件: すべての use_figma 呼び出しの前に figma-use をロードしてください。

譲れない安全ルール

ドライラン出力を生成した後、あなたは必ず停止し、承認を求める必要があります。

  • ドライラン出力と同じターンで書き込み系の use_figma 呼び出しを実行してはいけません。
  • 通常の確認質問をしてください（例: 「これらの変更を適用しますか？(yes/no)」）。
  • 明示的な肯定的承認がある場合にのみ続行してください。
  • 応答が不明確または否定的な場合は、書き込みを適用しないでください。

標準ソース形式（必須）

実際のトークンソースを次の順序で優先してください:

  1. Design Tokens JSON（tokens.json、tokens/*.json、DTCG スタイル）
  2. Style Dictionary 入力 JSON
  3. プラットフォームテーマソース（Compose/Kotlin/TS）は、JSON ソースが利用できない場合にのみ

ソース形式が非標準の場合は、ドライラン出力で前提を明示的に記載してください。

書き込み前の必須ポリシー

  • direction: code_to_figma（デフォルト）、figma_to_code、bidirectional
  • deletePolicy: デフォルトは archive_only（削除ではない）
  • conflictPolicy: prefer_code、prefer_figma、manual_review
  • namingPolicy: トークンキーの正規化戦略
  • modePolicy: コードモード <-> Figma モードのマッピング

デフォルトでは決して削除しないでください。削除にはユーザーの明示的な指示が必要です。

正規化ルール

両側を正規の行に正規化します:

  • key（正規のトークン名）
  • type（COLOR、FLOAT、STRING、BOOLEAN）
  • modeValues（light/dark など）
  • aliasTarget
  • scopes
  • codeSyntax

名前の正規化の例:

  • color.bg.primary <-> color/bg/primary
  • Neutral10 <-> Neutral/10 は、naming ポリシーによって明示的にマッピングされている場合のみ

値の検証（必須）

ドライランは、存在や型だけでなく、値を検証する必要があります。

  • COLOR: 許容誤差 epsilon = 0.0001 で RGBA を比較
  • FLOAT: 許容誤差が設定されていない限り、厳密な数値比較
  • STRING/BOOLEAN: 厳密な等価比較
  • エイリアス: 正規のエイリアスターゲットを比較

ドリフトのカテゴリ

各ドリフト項目には、次のいずれかを含める必要があります:

  • missing_in_figma
  • missing_in_code
  • value_mismatch
  • alias_mismatch
  • type_mismatch
  • mode_mismatch
  • scope_mismatch
  • code_syntax_mismatch
  • broken_alias

ドライラン出力形式

常に次を返してください:

  1. ヘッドラインサマリー:
{
  "create": 0,
  "update": 0,
  "aliasFix": 0,
  "scopeFix": 0,
  "syntaxFix": 0,
  "archive": 0,
  "delete": 0
}
  1. トークンキーと変更前/変更後の値を含む詳細なドリフトリスト。

次に質問してください:

Dry-run complete. Apply these changes? (yes/no)

レポートの永続化（必須）

毎回の実行でレポート JSON を永続化してください:

  • /tmp/sync-figma-token-dry-run-{runId}.json
  • /tmp/sync-figma-token-final-{runId}.json

ファイルの永続化に失敗した場合は、出力でそのことを明示的に言及してください。

競合の処理

競合するデータが見つかった場合（型/モード/エイリアスの曖昧さ）:

  • conflictPolicy=manual_review の場合、競合をリストし、停止してください。
  • conflictPolicy=prefer_code の場合、Figma をソースの値/型に更新してください。
  • conflictPolicy=prefer_figma の場合、Figma を保持し、ドリフトを情報として出力してください。

適用順序

差分は次の順序で適用してください:

  1. コレクション/モードを確保する
  2. 不足しているプリミティブを作成する
  3. セマンティックエイリアスを作成/更新する
  4. 値の更新を適用する
  5. スコープとコード構文を適用する
  6. deletePolicy に従って古いトークンをアーカイブする

書き込み系の use_figma 呼び出しを並列化しないでください。

成功条件

適用後、新たに差分を実行してください。 成功 = 未解決のドリフトがゼロであるか、明示的に承認された例外のみが残っている状態です。

コメント

Markdown 対応