Export to Figma 作成者: Shoun Eftikharul Alam

ウェブサイトを Figma に変換。あらゆるページの実際の UI を取り込み、整理された Figma レイヤーに変換します。スクリーンショットも、手作業での作り直しも不要です。

🚀 できること
• あらゆるウェブサイトを Figma レイヤーに変換（ページ全体でも特定のセクションでも）
• ランディングページ、ダッシュボード、競合のデザインを Figma にコピー
• タイポグラフィ、カラー、余白、パディング、マージン、CSS をコードなしで確認
• ロゴ、SVG、画像、アセットをワンクリックで抽出
• カラーパレット、フォントファミリー、WCAG コントラストを検証
• 実在するプロダクトからデザインシステムのリファレンスを作成
• AI コーディングエージェントや開発者に渡す DESIGN.md / SKILL.md 仕様を生成
• 内蔵のスポイトでページ上の任意の色を取得（ピクセル単位の正確な HEX）
• 任意のページや要素を右クリックして、そのまま Figma へ送信
• 埋め込み iframe、クロスオリジンコンテンツ、localhost、ローカル HTML ファイルにも対応

🎯 デザイナーと開発者に最適
• ウェブサイトを手作業で組み直すことなく Figma にコピー
• 既存サイトのリデザイン・モダナイズ
• HTML と CSS を Figma に変換
• 競合のランディングページを編集可能なリファレンスとして活用
• ブランドカラー、フォント、アセットを数秒で抽出
• スクリーンショットではなく実際のプロダクトから直接作業
• Cursor、Claude、GitHub Copilot、Windsurf などの AI ツール向けにデザインシステムのドキュメントとトークンを生成
• 実際の UI から得た正確なデザイン仕様を開発・AI ワークフローへ引き渡し

⚡ 使い方
1. Firefox 拡張機能をインストール
2. 任意のウェブページを開く
3. 「Export to Figma」をクリックし、ページ全体または要素をキャプチャ
4. Figma に直接貼り付け（Cmd/Ctrl + V）。追加の Figma プラグインは不要

編集可能なテキスト、フォント、カラー、画像と、整理されたレイヤー構造を備えた本物の Figma フレームが手に入ります。フラットな画像ではありません。

✨ 主な機能
• ページ全体および要素単位のキャプチャ
• 編集可能で整理されたレイヤー構造
• レイアウト、スタイル、フォント、テキストを保持
• Figma に直接貼り付け、コンパニオンプラグイン不要
• 余白・パディング・マージンのオーバーレイを備えた Inspect モード
• カラー抽出（HEX / RGB / HSL / OKLCH / Tailwind）
• フォントの使用状況まで分かるタイポグラフィスキャナー
• 画像、SVG、動画、GIF、Lottie ファイルのダウンロード
• WCAG アクセシビリティ コントラストチェッカー
• AI 生成サイトにも対応（v0、Lovable、Bolt、Replit、Framer など）
• デスクトップ・タブレット・モバイル・カスタム幅のプリセット
• ピクセルルーペ付きスポイトツール（HEX）
• DESIGN.md + SKILL.md ジェネレーター：デザイントークン、ブランド、余白、アクセシビリティ、ルールを AI 対応 Markdown で出力
• 右クリックメニューからのキャプチャ
• クロスオリジンおよび埋め込み iframe のキャプチャ

💡 よくある使い方
• クライアントサイトのリデザイン
• 競合リサーチと分析
• 既存サイトの Figma への移行
• 本番サイトからのデザインシステム抽出
• 高速プロトタイピングとモックアップ
• 実際のサイトからのスタイルガイド作成
• 本番の UI・UX パターンの研究
• AI コーディングエージェントとデザイン to コード向けの DESIGN.md コンテキスト生成
• 公開中のサイトからデザイントークンとブランドガイドラインを記録
• localhost のプロトタイプや AI 生成サイトのキャプチャ