コンテンツにスキップ

Code2Des — 使い方

Summary

Code2Des は、公開 Web ページを編集可能な Figma ネイティブレイヤーへ変換します。 レンダリング済みページをキャプチャし、表示されているレイアウト、テキスト、色、画像、 対応可能なベクターを保持して、現在の Figma ファイル内に再構築します。 変換は決定論的に行われ、LLM は使用しません。

前提条件

開始前に、次を確認してください。

  • Guinness Figma プラグインをセットアップし、Guinness のユーザーアカウントでサインインしていること。
  • アカウントの組織を確認し、インポート先のプロジェクトを選択していること。管理者ログインではなく、そのプロジェクトに割り当てられたユーザーアカウントを使用してください。
  • 生成結果を配置する Figma ページを開いていること。
  • サインインなしで閲覧できる公開 http:// または https:// URL を使用すること。
  • タイポグラフィの再現性が重要な場合、対象ページのフォントを Figma で利用可能にしておくこと。

Note

検出では URL を一覧にし、インポートでは選択したページを取得し、生成ではデザインを作成します。 検出だけでは全ページのインポートや生成は行われません。インポート時のログイン、ブラウザ セッションの再利用、プライベートネットワーク上のページ取得には対応していません。

ページをインポートする

ローカルで取得する画面は Page Import スクリプトガイド を参照してください。 更新版プラグインの 取り込み済み（Existing imports） を更新し、同じ環境・プロジェクトの完了済み画面を選んで 生成（Generate） します。URL は再取得せず保存したデータを使用します。同じ URL のデスクトップ版とモバイル版も別々に選択できます。

1 ページでも複数ページでも、code2des パネルの同じ操作を使用します。

URL を探す場合は、まず Discover pages を展開します。

  1. Homepage or sitemap に URL を入力し、Discover pages を選択します。ホームページでは同一オリジンのリンクを巡回し、XML サイトマップでは各ページを描画せず URL を一覧にします。どちらもサーバー側で処理され、キューで待機する場合があります。
  2. URL パス別のグループを展開します。個別 URL またはグループ見出し右端のチェックボックスで選択します。分類はパスに基づき、見た目の類似性は判定しません。同じレイアウトのページが複数ある場合は、自分で代表ページを選んでください。
  3. Use selected pages (N) で下の URL 一覧に反映します。この操作だけでは取得されないため、続けて Import pages を選択してください。

検出の既定上限はホームページで 500 ページ、サイトマップで最大 1,000 URL です。1 回のインポートでは最大 500 URL を選択できます。Discovery reached a limit が表示された場合、未検出のページが残っている可能性があります。

  1. 最大 500 件の公開 URL を 1 行ずつ入力して Import pages を選択します。ホームページまたはサイトマップを Discover pages に入力し、パス別のグループから URL を選ぶこともできます。サイトマップの場合、各ページを巡回せず URL を一覧表示します。
  2. Batch history で進捗を確認します。プラグインを閉じてもバックエンド処理は続きます。
  3. 完了したインポートは Ready to generate に自動表示されます。生成対象を選択します。
  4. Generate selected pages を選択します。Generate all captured variations を有効にすると各バリエーションが 1 項目として数えられ、上限は合計 500 件です。
  5. フレームは 1 件ずつ自動的に Figma に追加されます。同じファイルで再開すると、配置済みジョブはスキップされます。

Pause after current frame は配置を一時停止します。Cancel unstarted はディスパッチ未取得の項目をキャンセルし、Retry failed は失敗項目だけを新しいバッチに追加します。コードベースの失敗項目は、新しい Page Import ID で再アップロードしてください。

フォント不足の場合は配置を停止します。インストール後に Check again を選ぶか、Use fallbacks で続行します。Resume remaining frames は配置の中断または失敗時のみ表示されます。Figma への追加にはプラグインを開いておく必要があります。running の件数にはワーカー待ちのメッセージも含まれます。

単一ページの場合は同じ一覧に URL を 1 件入力します。初期表示だけなら Capture interactive variations をオフにし、対応する操作状態も取得する場合はオンにします。

例えば 3 ページを生成する場合、3 URL を入力してインポートし、Ready to generate でその 3 件を選択して Generate selected pages を押します。バリエーションがオフなら、1 つの結合フレームではなく、3 つの独立したルートフレームが作成されます。

選択中のインポートバッチが処理中の場合、ボタンは Importing N/total pages… と表示され、無効になります。Waiting to start は受付済み、Capturing pages はジョブが送信済みであることを示します。すぐに取得が始まらなくても、同じ URL を重複送信しないでください。

インポーターは新しいブラウザ環境でページを開き、レンダリング完了を待ってから、表示 DOM、 計算済みスタイル、座標、テキスト、フォント、画像、対応可能な SVG を取得します。完了した インポートは選択中のプロジェクトに保存され、複数回の生成に再利用できます。

Include variations を使う場合

タブ、アコーディオン、ラジオボタン、チェックボックス、セレクトメニューなどの状態を取得したい 場合に Capture interactive variations を有効にします。インポーターはフォーム送信を行わず、安全に 再実行できるチェック、選択、クリックを制限付きで探索します。

インタラクティブ探索には上限があります。状態数または深さの上限に達したというメッセージが 表示されても、一覧にあるバリエーションは生成できます。ただし、ページ内のすべての状態を 網羅しているとは限りません。

生成対象を選択する

インポート完了後、次の操作を行います。

  1. Ready to generate でページを選択します。
  2. 初期状態のみ生成する場合は Generate all captured variations をオフにします。
  3. すべての状態が必要な場合のみオンにします。バリエーションの合計は最大 500 件です。

静的インポートには通常、初期状態が 1 つ含まれます。インタラクティブインポートでは、初期状態と 複数の操作後状態が含まれることがあります。

選択した各バリエーションは、それぞれ別の Figma フレームになります。必要なものだけを選ぶと、 生成時間を短縮でき、キャンバスも確認しやすくなります。

配置場所を指定する

Generate を選択する前に、必要であれば現在の Figma ページ上でノードを 1 つ選択します。 最初の生成フレームはそのノードの右側 160 px に配置され、追加バリエーションは直前の結果の 横に配置されます。

有効なノードが 1 つだけ選択されていない場合、結果は現在のビューポート中央に配置されます。 完了すると、プラグインが生成結果を選択して自動的にズームします。

デザインを生成する

Generate selected pages を選択します。プラグインは次の処理を 行います。

  1. 選択した各キャプチャを Figma ネイティブ仕様へ変換します。
  2. キャプチャ済み画像を安全に取得します。
  3. 必要なフォントが現在の Figma エディターで利用できるか確認します。
  4. 編集可能なフレーム、テキスト、画像、ベクター、塗り、枠線、角丸、対応可能なエフェクトを作成します。
  5. 作成したルートフレームを Guinness に記録します。

長いページや複雑なページでは、変換と Figma レイヤー作成に数分かかる場合があります。 レイヤー作成中は進捗が表示されます。

選択中のバッチには Waiting to start、続いて Generating frames が表示されます。dev ではディスパッチが 1 分間隔のため、次の実行まで待機する場合があります。Batch history で queued、running、succeeded、failed、cancelled の件数を確認できます。succeeded はサーバー側の結果が完成したことを示し、Figma への配置完了を保証するものではありません。プラグインを開いたまま、フォント確認が表示された場合は対応してください。

不足フォントを解決する

Code2Des はレイヤー作成前にフォントを確認します。必要なフォントスタイルが利用できない場合、 要求されたフォントと、Figma が使用する代替フォントが表示されます。

  • 不足フォントをインストールまたは有効化し、Check again を選択すると再確認できます。
  • Use fallbacks を選択すると、表示された代替フォントを使ってすぐに続行できます。

フォント置換により、テキスト幅、折り返し、フレーム高さが変わる場合があります。代替フォントを 使用した場合は、タイポグラフィを注意して確認してください。

生成結果を確認する

完了フレームには code2des 接頭辞と生成日時が付けられます。次を確認してください。

  • フレーム全体の寸法、セクション順序、余白。
  • 特にフォント置換時のテキスト折り返しとタイポグラフィ。
  • 画像、グラデーション、SVG、枠線、角丸、不透明度、影。
  • 黄色または特殊な名前の unmatched レイヤー。元ページの表現を直接再現できなかったことを示します。
  • 作成レイヤー数、警告数、失敗したバリエーション数を示す最後のメッセージ。

出力は Figma ネイティブノードなので、通常どおり編集できます。同じインポートから再度生成しても、 以前の結果は削除されず、新しい結果が追加されます。

警告があっても生成が成功する場合があります。asset_not_persisted は画像がキャプチャに保存されなかったこと、unsupported_background_image は背景を変換できなかったことを示します。成功した結果でも画像や背景が欠ける可能性があるため、元ページと比較してください。動画と 3 MB を超える画像はインポート時にスキップされます。

問題が発生した場合

No completed pages まず公開 URL をインポートしてください。以前のインポートが処理中の場合は完了を待ち、一覧が更新されない 場合はプラグインを開き直してください。

Page URL must use http or https https:// を含む完全な公開 URL を入力してください。ローカルファイルやその他の URL スキームには 対応していません。

Page import failed プライベートブラウザウィンドウで URL を開き、ログイン、CAPTCHA、VPN、ブラウザ拡張機能、 プライベートネットワークへのアクセスなしで表示できることを確認してください。ページが安定しない場合や キャプチャ上限を超えた場合も失敗することがあります。

インポート結果が不完全 遅延読み込み、操作、認証セッション、自動ブラウザ対策が原因の場合があります。対応する操作状態には Capture interactive variations を試せますが、Code2Des はアクセス制御の回避や手動操作を行いません。

必要なフォントが利用できない フォントをインストールまたは有効化して Check again を選ぶか、表示された代替フォントで続行します。

検出が queued のまま進まない 定期ディスパッチを待ってください。待機が続く場合は、環境の担当者に Page Discovery ワーカー、FIFO キュー、バックエンドのキュー設定を確認してもらってください。検出が未デプロイでもインポートと Code2Des は動作する場合があります。その間は URL を手動入力できます。

生成は成功したがフレームが表示されない 同じ Figma ファイルとプロジェクトを開き、Batch history から生成バッチを選択します。Missing fonts または配置エラーを確認してください。Resume remaining frames が表示された場合は、新規生成ではなく配置を再開します。プラグインを閉じるとキャンバス操作は止まりますが、バックエンド処理は続きます。

一部レイヤーがない、または unmatched と表示される 未対応のブラウザ効果や取得できないアセットは、推測で補完せず警告として表示されます。元ページを参照し、 必要なレイヤーを手動で修正してください。

一部のバリエーションだけ失敗した 成功したバリエーションはキャンバスに残ります。失敗メッセージを確認し、元ページまたはフォントの問題を 修正してから、失敗したバリエーションだけを再生成してください。

対応しないこと

  • 再利用可能なデザインシステムコンポーネントやコンポーネントバリアントの生成。
  • プロトタイプリンクの作成や他ページへのナビゲーション推測。
  • 動画、アニメーション、ホバー時間、すべてのブラウザ固有ビジュアル効果の再現。
  • 認証済みコンテンツ、プライベートネットワーク、非公開コンテンツのキャプチャ。
  • 元フォントを Figma で利用できない場合のピクセル単位で同一なタイポグラフィ。
  • デザインレビューの代替。元ページが最終的なビジュアル参照です。

実装仕様については AI Code2Des を参照してください。