公開日：2026/06/22 16:27 最終更新日：2026/06/22 16:42

【コード全公開】150行以下でFigmaトークンのズレを自動検出→手動チェックゼロへ

Xでシェア facebookでシェア LINEでシェア

Shown | AI自動化

Figmaで更新したカラートークンが、コードに反映されていない。そのままリリースしたら、本番のUIが崩れた。「またゼロから手動で全部見るの？」という時間の無駄が、毎スプリントのどこかで発生していますよね。
いまデザインシステムが「負債製造機」になっている
Claude Codeが普及し始め、デザイン作業の自動化に取り組むチームが増えた。でも現実はこうです。Claude CodeのskillでFigmaトークンのチェックを試みる。精度が足りず、結局手動確認に戻る。このサイクルが止まらない本当の理由は、「比較する仕組みそのもの」がないからです。
私がいま動かしている自動化の話
私は社内の請求書処理・日次レポート・監視botをPythonで自動化して業務を回しています。デザイントークンの整合チェックも、構造は同じです。「片方からデータを取得し、もう片方と比較して差分を報告する」。この記事で紹介するコードは、その手法を使って設計した、そのまま動く構成で書いたものです。
あなたが毎週やらされていること
・FigmaのColorトークンを更新したのに--color-primaryがコードに残ったまま・Spacing値がFigmaでは8pxなのにコードでは0.5rem表記で人間が目視換算している・borderRadiusがいつの間にかFigma定義と乖離していてQAで初めて発覚する・「さっきSlackで送ったトークン更新」に気づかないエンジニアをデザイナーが毎回Pingする・「指摘→修正→再確認」のループが1スプリントに2〜3回発生する
解決の正体: 「トークン整合チェッカー」
仕組みの名前はFigma↔コード双方向トークン整合チェッカーです。やることはシンプルです。Figma REST API（FigmaのデザインデータをHTTPで取得できる公式インターフェース）でトークンを取得し、CSS変数・Tailwindコンフィグと突き合わせる。差分があればSlackかCIに出力する。これが動くと、「FigmaのStylesを更新するたびにCIが差分を自動検知してSlackに通知が来る」状態になります。デザイナーもエンジニアも、手動チェックの時間がゼロになります。
この記事で手に入るもの
難易度: ★☆☆（Pythonが多少読める方向け）
・Figma REST APIでトークンを取得するPythonコード（コピペで動く）・CSS変数ファイルのパーサー（コピペで動く）・差分検出ロジックと出力フォーマット（コピペで動く）・GitHub ActionsでCIに組み込むYAMLファイル（コピペで動く）・Claude Code skillとして登録するプロンプト全文・詰まりポイント2つと回避策・再現チェックリスト10項目
対象読者と対象でない読者
向いている人:・Figmaとコードのズレに毎スプリント疲弊しているフロントエンドエンジニア・デザインシステムを持つプロダクトチームのデザイナー・Claude Codeをすでに使っていてデザイン作業まで自動化したい人・Pythonが多少読める人（書けなくてもコピペで動く）
向いていない人:・Figmaを使っていないチーム・デザイントークンの概念がまだないプロダクト（まずToken設計から始める段階）・CLIを触ったことがない方（この記事でCLIの入門は扱わない）
価格の話
競合SaaSのTokens Studio Proは月$12（試算で約1,800円）、毎月かかります。この記事は980円の買い切りです。コードを一度設置すれば、月額ゼロで動き続けます。50部で値上げします。いま読んでいる方は最安値で手に入れられます。