D2W Diff

Figmaデザインを任意のWebページにオーバーレイして比較するツール D2W Diff は、Figmaのデザインカンプをブラウザにオーバーレイしてデザインと実装の差分を目視確認する Chrome 拡張機能です。 【主な機能】 ・Figma URL を最大5件保存しワンクリックで切替（サムネイル付き） ・PNG / JPG / WebP の画像アップロードも最大5件保存 ・オーバーレイをドラッグで直接移動（数値入力との併用可・Chrome Device Mode 対応） ・差分ハイライトモード（mix-blend-mode: difference）でピクセルズレを強調表示 ・不透明度・XYオフセット・スケールモードをリアルタイム調整 ・Windowサイズをデザインフレーム幅に自動合わせ ・Shadow DOM で実装 → ページのスタイルに一切干渉しない ・キーボードショートカット Option+D（Mac）/ Alt+D（Win） ・「？」ボタンから使い方ページをいつでも参照可能 【対応ページ】 Chrome で開いているすべてのページ（本番・ローカル環境どちらも可） 【セキュリティ】 ・Figma PAT は中間サーバーなしで Figma 公式 API に直送 ・デフォルトはセッションストレージ（ブラウザ終了で自動削除） ・外部への情報送信なし・トラッキングなし 【使い方・詳細ドキュメント】 https://github.com/togetoge03/d2w/blob/master/v1.2.1/README.md 【免責事項】 本拡張機能は現状有姿で提供されます。Figma API の仕様変更・障害等による動作不具合について、開発者は責任を負いません。本拡張機能の使用により生じた損害について、開発者は一切の責任を負わないものとします。 【v1.2.1 アップデート内容】 ・Chrome Device Mode（スマホシミュレーション）でのドラッグ移動に対応 ・オーバーレイ読み込み・再取得時にオフセット (X/Y) を 0 にリセット ・ドラッグ中のページスクロール抑止を強化