Pixel Diff - Figmaの画像・UI差分をピクセル単位で比較
Pixel Diffは、Figma上で2つのレイヤーや画像を比較し、ピクセル単位の差分、UI変更、ビジュアルリグレッションを確認できるFigmaプラグインです。
プラグインURL: Figma CommunityでPixel Diffを開く
無料版: 最大 1500x1500 ピクセルまで比較可能
Premium: 月額 $8。ライセンス認証で最大 4096x4096 ピクセルまで比較可能
クリックすると決済サービス Polar のページへ移動します。
購入により、利用規約・プライバシーポリシーに同意したものとみなします。
インストールと基本的な使い方
- Figma Communityで Pixel Diffプラグイン を開き、Figmaに追加します。
- Figmaのキャンバスで、比較したい2つのレイヤー（フレーム、コンポーネント、画像、図形など）を先に選択します。
- Pixel Diffを実行します。「2つのレイヤーが選択されています」と表示されたら比較できます。
- 「比較を実行」ボタンを押すと、画像A、画像B、差分画像が生成され、プラグイン内に表示されます。
- 表示モードや差分感度を変えながら確認し、必要に応じて「PNGを保存」で差分画像をダウンロードできます。
2つのレイヤーのサイズが異なる場合は、大きい方に合わせてリサイズして比較します。
Pixel Diffでできること
- Figma上の2つのレイヤーや画像をピクセル単位で比較します。
- UI修正前後のビジュアル差分、デザインレビュー、表示崩れの確認に使えます。
- 差分画像をPNGで保存し、レビューやバグ報告に添付できます。
表示モード
比較実行後、ツールバーで次の表示を切り替えられます。
- フェード - 画像を重ねて表示し、スライダーで透明度を変えて前後を比較します。
- ハイライト - 差分部分を強調して表示します。
- 減算 - 画像の差を減算して表示します。
差分感度
「差分」の検出の細かさを「細かい」から「大きい」まで選べます。微妙な違いを見たいときは細かく、ざっくり比較したいときは大きめにしてください。
制限とライセンス
- 無料版 - 比較サイズは最大 1500x1500 ピクセルまで。
- Premium - ライセンス認証後は最大 4096x4096 ピクセルまで利用可能です。
プラグイン内の「ライセンス」を展開し、購入後に受け取ったライセンスキーを入力して「認証」を押すとPremiumが有効になります。購入は決済ページから行えます。
よくある質問
-
Pixel Diffは、Figma上で2つのレイヤーや画像をピクセル単位で比較し、UI差分やビジュアル差分を確認するためのFigmaプラグインです。
-
無料版は最大1500x1500ピクセルまで比較できます。Premiumはライセンス認証後に最大4096x4096ピクセルまで比較できます。
-
購入確認メールに記載のリンクから、決済・ライセンス管理サービス Polar のアカウントページにアクセスし、ライセンスキーを確認・コピーできます。キーの再送や表示に関するお問い合わせは Polar のドキュメント/サポート をご確認ください。
-
決済はPolarが処理しています。支払い方法の変更、請求書、返金手続きなどは Polar のドキュメント/サポート をご確認ください。
-
キーが正しくコピーされているか、Polarのアカウントページで有効なキーかをご確認ください。それでも解決しない場合は、お問い合わせフォームからお知らせください。
-
いつでも解約できます。解約手続きはPolarのアカウントページまたは Polar のドキュメント/サポート から行ってください。月の途中で解約した場合も、お支払い済みの期間はPremiumを利用できます。