ウェブページを Figma に書き出す

編集可能なウェブページレイヤーをローカルでキャプチャし、CloneWebsite Figma プラグインでインポートする

ローカルワークフローの仕組み

CloneWebsite はウェブページを変換サーバーに送信しません。Chrome 拡張機能がアクティブなタブでレンダリングされたページを読み取り、メモリ内にバージョン管理された .cdesign アーカイブを作成して、ダウンロードまたはローカルに保存します。CloneWebsite Figma プラグインがそのファイルを開き、現在の Figma ドキュメントにレイヤーを作成します。

レンダリングされたウェブページ → Chrome 拡張機能 → ローカル .cdesign ファイル → Figma プラグイン → 編集可能なレイヤー

.cdesign ファイルはオープンな ZIP ベースのコンテナです。マニフェスト、キャプチャされた状態ごとに1つの JSON シーンファイル、コンテンツアドレス指定された画像アセットが含まれています。

ページまたはコンポーネントをキャプチャする

ウェブページを開き、コンテンツとウェブフォントのレンダリングが完了するまで待ちます。
CloneWebsite ツールバーを開き、出力を ウェブサイト から Figma に変更します。
ページをクローン または コンポーネントをクローン を選択します。
Figma キャプチャオプションを開き、ビューポートとテーマの組み合わせを選択します。初期設定では現在のビューポートと現在のテーマをキャプチャします。1440、768、390 ピクセルのビューポートと、ライトまたはダークテーマを最大6つの組み合わせまで追加できます。
レスポンシブなビューポート、コンポーネントのインタラクション状態、iframe/フィルターのラスターフォールバック、より正確なブラウザジオメトリが必要な場合は、拡張キャプチャ を有効なままにしてください。
開始を選択します。コンポーネントモードでは、ページ上のコンポーネントをクリックして選択を確定します。
生成された .cdesign ファイルをダウンロードするか、後でダウンロードするために拡張機能のローカルプロジェクトリストに保存します。

Chrome は debugger 権限をオプションとして宣言することをサポートしていないため、拡張機能のインストール時に付与されます。CloneWebsite は 拡張キャプチャ を有効にして Figma キャプチャを開始したときのみデバッガーをアタッチします。これは、ビューポート/テーマの組み合わせのエミュレート、サポートされているコンポーネントの疑似状態の強制、サポートされていない視覚サブツリーのローカルスクリーンショット作成のために一時的に使用されます。キャプチャが完了または失敗すると、拡張機能はタブから切断します。

拡張キャプチャ がオフの場合、拡張機能はデバッガーをアタッチしません。基本モードは現在のビューポート、現在のテーマ、Default コンポーネント状態をキャプチャします。キャプチャレポートには、スキップされた拡張シーンやフォールバックが説明されています。

Chrome DevTools ともう一つのデバッガークライアントは、同じタブを同時に制御することはできません。拡張キャプチャがアタッチエラーを報告した場合は、そのタブの DevTools を閉じてください。

Figma にインポートする

公開版の CloneWebsite Design Importer プラグインは Figma Community で利用できます。プラグインのビルドやローカル manifest のインポートは不要です。

Figma Design ファイルを開きます。初回はプラグインページで Open in… を選択し、次回からは Figma の Resources → Plugins から開けます。
編集したいファイルで CloneWebsite Design Importer を実行します。
.cdesign ファイルをプラグインにドロップするか、コンピューターから選択します。
必要なビューポート、テーマ、インタラクション状態のシーンを選択し、Import selected scenes をクリックします。
インポートレポートでフォントの置換、ラスターのフォールバック、欠落したアセット、キャプチャ警告を確認します。

プラグインにはネットワーク権限がありません。アーカイブの解析、画像の作成、フォントのマッチング、レイヤーの生成は、すべてお使いのデバイス上の Figma 内で行われます。

編集可能なまま残るもの

フレーム、塗りつぶし、境界線、角の半径、シャドウ、基本的なブレンドモード
テキストコンテンツ、フォントサイズ、行の高さ、配置、装飾、色
画像および SVG レイヤー
高信頼度の Flexbox レイアウトは Figma Auto Layout として
選択したコンポーネントは Figma コンポーネントとして
拡張キャプチャが選択したコンポーネントをマッピングできる場合、Default、Hover、Focus、Active、Disabled のコンポーネント状態はバリアントとして

グリッドおよび自由形式のページ領域は、ジオメトリを保持するために絶対位置を使用します。複雑なフィルター、マスク、iframe、動画サーフェス、サポートされていないブラウザ効果は、ローカルラスターフォールバックレイヤーになる場合があります。

フォントとインポートレポート

Figma プラグインは、ページのリモートウェブフォントをエディターにインストールできません。インポーターはまず、Figma で利用可能なフォントの中から要求されたファミリーとスタイルを探します。完全な一致を読み込めない場合は、編集可能なローカルフォールバックを使用し、インポートレポートに置換を記載します。

レポートにはまた、欠落しているアセット、ラスターフォールバック、スキップされた安全でない SVG マークアップ、ノード制限、キャプチャの警告も記載されます。インポートしたファイルを本番のデザインソースとして扱う前に、確認してください。

プライバシーと責任ある使用

ページのコンテンツは CloneWebsite にアップロードされません。キャプチャ中のネットワークリクエストは、ページによってすでに参照されているリソースのダウンロードと、別途その機能を設定した場合のオプションの BYOK AI エンドポイントに限定されます。拡張機能のプライバシーポリシーを参照してください。

アクセスを許可されているページのみをキャプチャしてください。元のサイトの著作権、商標、個人データ、デザイン権は、それぞれの所有者に帰属します。