ガイド：画像をFigma編集可能ファイルに変換する6ステップ

---

スクリーンショットからFigmaで編集可能なレイヤーに直接変換できれば、ゼロからデザインをやり直す手間を大幅に削減できます。本手順では、AIの画像解析能力と変換ツールを活用し、Figmaへのデータ取り込みを実現します。

プロセス概要

本プロセスは「画像 → HTML/Tailwind CSS → 中間ファイル（.h2d）→ Figmaレイヤー」という原理に基づいています。

詳細な手順

ステップ1：AIで画像を解析しHTMLコードを出力

Claude 3.5 Sonnet、GPT-4o、GeminiなどのAIツールを使用して、画像をコードに変換します。

• 要件： 画像を送信し、AIに次のように指示します：「この画像を解析し、Tailwind CSSを組み合わせたHTMLコードで書き直してください」。
• 注意点： Tailwind CSSのコードにより、Figmaに取り込んだ際にレイアウト構造が美しく正確になります。
• 作業： 受け取ったコードを、お使いのコンピューター上で.html拡張子のファイルとして保存します。

ステップ2：ブラウザ拡張機能の準備

ブラウザからデータを「キャプチャ」するための拡張機能をインストールする必要があります。

• ダウンロードとインストール：Chrome Web Storeのhtml.to.design

ステップ3：ファイルアクセス権限の設定（重要）

今回はWebリンクではなく、コンピューターから直接HTMLファイルを開くため、拡張機能に権限を付与する必要があります。

1. ブラウザを開き、chrome://extensions/にアクセスします。
2. html.to.design拡張機能を見つけ、Details（詳細）を選択します。
3. Allow access to file URLs（ファイルURLへのアクセスを許可）の項目を見つけ、有効にします。

ステップ4：HTMLを.h2dファイルに変換

1. Chromeでステップ1で作成した.htmlファイルを開きます。
2. html.to.design拡張機能を起動し、以下のパラメーターを設定します。
   • サイズ： 1920px（デスクトップ）とLightモードを選択。
   • オプション： Save .h2d file locallyにチェックを入れる。
   • 実行： Capture current pageをクリック。

• 完了後、.h2d形式のファイルがダウンロードされます。

ステップ5：Figmaでプラグインをインストール

1. Figmaファイルを開きます（新しい空白のページを作成）。
2. 空白部分を右クリックし、Plugins → Manage pluginsを選択。
3. キーワード 「html.to.design」 を検索し、クリックしてプラグインを実行します。

ステップ6：インポートして完了

1. プラグインのインターフェースが表示されたら、Import .h2d fileのセクションを確認します。
2. ステップ4でダウンロードした.h2dファイルをプラグインウィンドウにドラッグ＆ドロップします。
3. システムが処理するまで数秒待ちます。

結果

これで、元の画像全体がFigma内で100％編集可能なベクター、テキスト、フレームに変換されました。

ヒント： レイヤー構造が適切にグループ化されていない場合は、ステップ1のHTMLコードを見直してください。コードがクリーンであればあるほど、Figmaファイルの管理が容易になります！