Driftcheck

Driftcheck

ユーザーより先にUIのずれを検出します。
AI エージェントがエミュレーター上のアプリとFigmaのデザインを比較し、違いを修正します。

_{インタラクティブなレポートを開く → · デザイン：MarviloのPayloキット（CC BY 4.0）}

Driftcheckはローカルで動作するMCPサーバーです。AndroidデバイスまたはiOSシミュレーターの画面をキャプチャし、Figmaのフレームと1対1で比較して、差をなくすために必要な情報をエージェントに提供します。

• 異なる点：位置、サイズ、テキスト、フォント、色、角の半径、境界線、アイコンや画像の不足。テキストのないレイヤーも見た目から検出します。
• 修正方法：お使いのフレームワークのプロパティを使って記述します。Margin、android:layout_marginTop、Modifier.padding、.frame、EdgeInsetsなど。
• 再現度スコア：修正ごとの進捗を記録し、チームと共有できるHTMLレポートを生成します。

レイヤー名がFrameやTextのような実際のデザインキットにも対応しています。また、Driftcheck Figmaプラグインを使えば、Figmaトークンは不要です。

クイックスタート

.NET 10 SDK と、Android 用の adb または iOS シミュレーター用の Xcode が必要です。ワンクリックで Driftcheck をインストールできます。

VS Code では Figma トークンの入力を求められます。Figma プラグインを使う場合は、空欄のままにしてください。Cursor では、あとからサーバーの設定で FIGMA_TOKEN にトークンを追加してください。

または、任意の MCP クライアントに手動で追加できます。初回は dotnet dnx が NuGet からダウンロードします。

{
  "mcpServers": {
    "driftcheck": {
      "command": "dotnet",
      "args": ["dnx", "Driftcheck", "--yes"],
      "env": { "FIGMA_TOKEN": "<your Figma token>" }
    }
  }
}

Claude Code の場合：

claude mcp add driftcheck -e FIGMA_TOKEN=<your Figma token> -- dotnet dnx Driftcheck --yes

次にアプリを実行し、エージェントに次のように依頼します。

エミュレーター上のアプリを https://www.figma.com/design/…?node-id=… と比較し、違いを修正してください。

エージェントが受け取る内容

compare_screen は、エージェントが対処できるレポートを返します（デモからの抜粋）。

**Fidelity: 75 %** — 15 of 20 elements as in Figma

| Element                    | Property   | Figma   | App     |
|----------------------------|------------|---------|---------|
| Nice to meet you           | height     | 31.5    | 25.5    |
| Text "Sign up with Google" | x          | 131.9   | 125     |
| Shape "Sign up"            | background | #DBC6F8 | #BAD1BB |

## How to fix it

- **Nice to meet you**
  - The glyphs don't measure the same as in Figma; check the font: in Figma it is Inter 32 weight 600.
    `FontFamily="Inter"`, `FontSize="32"`, `CharacterSpacing`
- **Shape "Sign up"**
  - `BackgroundColor="#9E56FF"` (it renders as #DBC6F8 in the design: the layer or a container has opacity)

## Design non-text layers not found in the app (1)

- Icon (x=108.2 y=392.3 w=20 h=20) — Missing a 20×20 dp icon (the Figma layer is 24×24)

レポートとともに、report.html（上記のインタラクティブなレポート。スライダー、不透明度、差分、並べて表示）、side_by_side.png、diff.png が生成されます。

対応プラットフォーム

デバイス	画面の読み取り方法
Android エミュレーターまたはデバイス	adb：screencap + uiautomator dump（AutomationId は resource-id です）
iOS シミュレーター（macOS）	simctl + アクセシビリティツリーを読み取る XCUITest ヘルパー（AutomationId は accessibilityIdentifier です）

修正案は .NET MAUI、Android views、Jetpack Compose、UIKit、SwiftUI、Flutter 向けに記述されます。また、framework を指定しない場合は、一般的な表現で記述されます。比較処理自体はフレームワークに依存せず、画面上の表示内容をもとに動作します。

MCP ツール

ツール	用途
list_devices	接続されている Android デバイスと起動中の iOS シミュレーターを一覧表示します
get_design_specs	フレームのサイズ、色、テキスト、フォントを取得します（UI コードを書く前に使用）
capture_screen	画面をキャプチャし、AutomationId を含むアプリの要素を取得します
compare_screen	デザインとアプリを全面的に比較します。忠実度、差分、修正方法、report.html を返します
import_design	Figma プラグインからダウンロードフォルダー以外に保存された .driftcheck.json をインポートします

仕組み

Driftcheck はフレームを一度ダウンロードしてローカルキャッシュに保存し、Figma のオートレイアウトを再計算して、AutomationId、表示テキスト、または位置を使ってレイヤーとアプリの要素を照合します。テキストはボックスではなく表示されているグリフで比較し、テキスト以外のレイヤーはスクリーンショット内で見た目をもとに検出します。また、フレームより少し幅の広いデバイスや狭いデバイスでは、各要素が最も適した位置にアンカーされます。詳しい手順については、Driftcheck の比較方法をご覧ください。

Figma API の制限

Figma では、トークンで呼び出せる回数が制限されており、一部のシートタイプではクォータが非常に少なく、使い切ると 429 と数日間の待機時間が返されます。そのため、次のようになっています。

• 各フレームの JSON と PNG はローカルキャッシュに保存され、比較のたびに再利用されます。Figma で変更されたフレームをダウンロードするには、get_design_specs または compare_screen に refresh=true を渡します。
• Figma が 429 を返した場合、エラーに待機時間が表示されます。
• トークンまたはクォータがない場合、tools/figma-export-plugin の Figma プラグインを使うと、REST API を使わずにフレーム（JSON + 2x レンダリング）を .driftcheck.json ファイルにエクスポートできます。ファイルが Downloads に保存されると、Driftcheck はフレームのリンクから自動的に取得します。別のフォルダーに保存された場合は、import_design でインポートしてください。プラグインの READMEをご覧ください。

要件

• .NET 10 SDK
• Android の場合：adb を含む Android SDK（Windows と macOS では、ANDROID_HOME、ANDROID_SDK_ROOT、または既定のパスから検出されます）
• iOS の場合：Xcode と起動済みのシミュレーターを備えた macOS。idb や WebDriverAgent は不要です
• Figma Personal Access Token（スコープ File content: Read-only）を設定した FIGMA_TOKEN 環境変数、または API を使わずに動作する Figma プラグイン
• 任意：出力フォルダーを変更する DRIFTCHECK_OUTPUT（既定値：一時フォルダー内の driftcheck）
• 任意：プラグインのエクスポートの検索先を変更する DRIFTCHECK_EXPORTS（既定値：Downloads）

現在の制限事項

• シミュレーター上の iOS のみ（物理デバイスには対応していません）。
• 表示領域のみ（スクロールには対応していません）。
• アプリ内のフォントサイズは測定しません（uiautomator と XCUITest では取得できません）。get_design_specs で参照できます。

ソースから実行する

git clone https://github.com/wilsonvargas/Driftcheck.git
cd Driftcheck
dotnet build src/Driftcheck.Mcp

ルートにある .mcp.json は、このフォルダーを開いたときに読み込む MCP クライアントにサーバーを登録します。別のプロジェクトから使うには、クライアントの MCP 設定にサーバーを追加します。

{
  "mcpServers": {
    "driftcheck": {
      "command": "dotnet",
      "args": ["<repo path>/src/Driftcheck.Mcp/bin/Debug/net10.0/Driftcheck.Mcp.dll"]
    }
  }
}

リポジトリの構成

• src/Driftcheck.Mcp — MCP サーバー
• tools/ios-accessibility-helper — iOS Simulator のアクセシビリティツリーを出力する UI テスト（ビルド時にサーバーと同じディレクトリにコピーされます）
• tools/figma-export-plugin — REST API を使わずにフレームをエクスポートする Figma プラグイン
• samples/PayloMaui — Marvilo の Paylo kit（CC BY 4.0）の画面を含む MAUI テストアプリ iOS Simulator では、dotnet build -f net10.0-ios -p:TargetFrameworks=net10.0-ios を実行します（TargetFrameworks を制限することで、Mac Catalyst ワークロードのインストールを回避できます）。その後、xcrun simctl install booted bin/Debug/net10.0-ios/iossimulator-arm64/PayloMaui.app と xcrun simctl launch booted com.companyname.paylomaui を実行します。Xcode のバージョンは、iOS ワークロードが要求するものを使用する必要があります。複数インストールされている場合は、DEVELOPER_DIR で選択してください。
• samples/PayloNative — MAUI に依存しない比較であることを確認するための、ネイティブ Android ビュー（Java、MAUI や AndroidX は不使用）による同じサインアップ画面です。./build.ps1 で SDK ツールを使ってビルドし（Gradle は不使用）、エミュレーターにインストールします
• samples/PayloIos — ネイティブ iOS ビュー（Swift の UIKit、MAUI やストーリーボードは不使用）による同じ画面です。./build.sh で swiftc を使ってビルドし（Xcode プロジェクトは不使用）、起動済みのシミュレーターにインストールします
• tests/Driftcheck.Tests — 合成画面を使った比較テスト
• docs — 詳細な比較手順と、GitHub Pages で公開されているデモレポート

サンプルアプリを比較するには、Figma Community で Paylo kit を開き、自分の下書きに複製して、Component 113（サインアップ画面）のフレームを選択し、Copy link to selection を使用します。次に、エミュレーターまたはシミュレーターでサンプルを実行し、そのリンクを使って比較するようエージェントに依頼します。

コントリビューション

イシューやプルリクエストを歓迎します。ビルド、テスト、変更の提案方法については CONTRIBUTING.md を、脆弱性を非公開で報告する方法については SECURITY.md を参照してください。

ライセンス

Driftcheck は MIT License の下で公開されています。サンプルアプリに含まれるサードパーティの素材には、それぞれのライセンスが適用されます。THIRD_PARTY_NOTICES.md を参照してください。