HTMLをFigmaに変換：あらゆるWebサイトを編集可能なレイヤーに

Figma Communityから無料のCodia AI Web2Figmaプラグインをインストールし、任意のFigmaファイルで実行します。ページのURLを貼り付け、ビューポート（デスクトップ、タブレット、モバイル）とライト／ダークのテーマを選んで取り込むと、ページが編集可能なFigmaレイヤーとしてキャンバスに配置されます。ログインが必要なページは、先にChrome拡張機能でキャプチャしてください。

はい、無料で始められます。無料プランでは毎月10 Transformクレジットが付与され、クレジットカードは不要です。Proプランでは、無制限の取り込み、高解像度の画像処理、複数のURLやCodiaファイルの一括取り込みが利用できます。

はい。FigmaのプラグインはFigmaの無料プランでも動作するため、有料のFigmaシートは必要ありません。ただし、Figmaデスクトップアプリかパソコンのブラウザ版Figmaが必要です。Figmaのモバイルアプリではプラグインを実行できません。

はい。Codia AI Web2FigmaのChrome拡張機能をインストールし、ログインした状態でChromeでページを開いてキャプチャすると、ページが.codiaファイルとして保存されます。そのファイルを、プラグインのChrome拡張機能用の取り込み欄にアップロードするか貼り付けてください。ダッシュボード、管理画面、ステージング環境など、URL取り込みでは届かないページに使えます。

はい。取り込む前にデスクトップ、タブレット、モバイルを選ぶと、その幅でページをキャプチャします。ライトとダークの両方に対応したサイトではテーマも選べます。複数のビューポートを取り込めば、レスポンシブなフレーム一式を1つのファイルにまとめられます。

テキストは編集可能なテキストレイヤーに、画像は画像の塗りに、セクション、背景、枠線、グラデーションはページのレイアウトに沿ったフレームやシェイプになります。Codiaは取り込んだ時点のページの見た目をキャプチャするため、アニメーション、スクリプト、インタラクションは引き継がれません。

はい。URLを貼り付ける代わりに、プラグインのChrome拡張機能用の取り込み欄に.html・.htmファイル、またはCSSや画像ごと書き出したサイトの.zipをアップロードできます。ZIPに複数のページが含まれる場合は、取り込むページを選べます。ローカルのビルドやHTMLの書き出し、まだ公開していないページに便利です。