トークンドリフトとは

トークンドリフトとは、デザインシステムに記録された決定と、プロダクトが実際に使っている値とが少しずつ食い違っていく現象です。Figma ファイル、スタイルシート、AI が生成したコードといった面が共有の情報源を参照しなくなり、独自の値を溜め込むことで起こります。

どう始まるか

ドリフトが自ら名乗ることはありません。個々には筋の通った小さな判断として現れます。

デザイナーが情報密度の高い表のために少しだけ明るい境界線を必要とし、トークンを提案せずファイル上で選ぶ。エンジニアが夜十一時に margin-top: 18px を出す。スケールに 16 と 20 はあるが、どちらもしっくりこないからです。誰かが別プロジェクトからコンポーネントを、直書きの影ごとコピーしてくる。

どれ一つとして、プルリクエストを止める理由にはなりません。それが半年続くと、「主要な青」が四つの値を持つコードベースになります。

AI による加速

これは最近になって速くなりました。理由を正確に述べておく価値があります。

設定画面を作るよう頼まれた AI アシスタントには、既定ではあなたのデザインシステムへのアクセスがありません。そこで、ほかで見てきたものからもっともらしい値を作ります。主要色に #3B82F6、間隔に 16px、あなたのものに似ているが一致はしない影。

出力はレビューでは正しく見えます。妥当な値を使っています。ただ、あなたのものとは*別の*妥当な値であり、しかもチームがコードを生む速度で作られます。人が手で CSS を書くよりずっと速い速度です。

どう見つけるか

コードベースから 16 進数の色を検索する。健全な体系なら、そのほとんどはトークン定義の中にあります。
実際に使われている余白の値の種類を数え、スケールの段数と突き合わせる。
Figma ファイルの色とリポジトリのトークンを比べる。
AI アシスタントが生成したコンポーネントを一つ取り、値を一つずつシステムと照合する。

数はたいていチームの予想より悪く、それを早く知れるのは有益なことです。

どう防ぐか

それを使うすべての面から、システムに手が届くようにする。 ドリフトはほとんどが配布の失敗です。人であれモデルであれ、正しい値を探すために作業を中断しなければならないなら、しないことも起こります。

エージェントには直接トークンを渡す。 最新の値を返す Model Context Protocol サーバーがあれば、モデルは主要色を推測せずに読み取ります。

生成されたコードをシステムと照合する。 トークンの対応がある直書きの値を検出できれば、ドリフトはレビューで見えるものになります。一年後に気づくものではなくなります。

どちらの方向を正とするか決める。 Figma とコードが食い違ったとき、どちらが正しいかを誰かが言える必要があります。デザインの変更が差分になり、人が承認してからリポジトリに届く。そのレビュー段階を置くのが通常の答えです。

Flash DSM との関係

Flash DSM は MCP 経由で最新のトークンを AI エージェントに提供し、直書きの値とそれを置き換えるトークンを返す check_violations を備え、Figma からの公開をレビュー可能な差分に変えてプルリクエストとして開きます。