スクリーンショットからFigmaへ5分で変換 — プラグイン不要

SVGをプラグインの代わりに使う理由

html.to.designのようなプラグインは非常に便利ですが、無料版では月20回のインポート制限があります。1日に10画面以上を制作するデザイナーにとって、その制限は1週間も持ちません。SVGは完全に無料で無制限、そしてFigmaがネイティブでサポートしている代替手段です。.svgファイルをドラッグ＆ドロップするだけで、編集可能なレイヤーとして即座に利用できます。

HTMLからFigmaへの変換に関する記事: AIとhtml.to.designで画像を編集可能なFigmaファイルに変換する6ステップ手順

必要なもの

Figmaで再現したいUIのスクリーンショット画像
Claude (claude.ai) または Gemini のアカウント
Figma（無料プランで十分です）

ステップ1 — 画像の準備

変換したいデザイン画面のスクリーンショットを撮影または保存します。画像が鮮明であればあるほど、AIの分析精度が高まります。

ステップ2 — 標準プロンプトとともに画像をAIに送信

Claude (claude.ai) または Gemini (gemini.google.com) を開き、画像をアップロードして以下のプロンプトを使用します。

プロンプト:

Convert this UI screenshot to a clean SVG file for Figma import.

Rules:
1. Extract all colors from the image first. List them as:
   --color-name: #hexvalue
   Never invent colors. No generic defaults like #333 or #eee.

2. Canvas width: 1200px. Calculate height from content.

3. For icons: Instead of using pre-made icons, design a logo that closely resembles the submitted image.

4. Output complete SVG code ready to drag into Figma.

AIから返される結果は2つの部分で構成されます:

第1部 — 抽出されたカラーパレット（SVG記述の前）: 色コードが意図したものと一致しているかを確認するために使用します。変更したい場合は、ここで修正します。

EXTRACTED COLORS:
--page-bg: #f8f8f8
--sidebar-bg: #ffffff
--sidebar-border: #e5e5e5
--text-dark: #1a1a1a
--text-mid: #4a4a4a
--accent: #e84855
--border: #e0e0e0
--code-bg: #f5f0ff
--code-text: #c53030

第2部 — 完全なSVGファイル:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720">
  <defs>
    <style>text { font-family: "Inter", sans-serif; }</style>
  </defs>
  <!-- SIDEBAR -->
  <rect x="0" y="0" width="220" height="720" fill="#ffffff" stroke="#e5e5e5" stroke-width="1"/>
  ...
</svg>

ステップ3 — SVGファイルの保存

AIからSVGコードが返ってきたら、.svgファイルをパソコンにダウンロードします。

ステップ4 — Figmaを開き、空のデザインファイルを準備

ここで多くの人が間違えやすいポイントです — ホーム画面ではなく、キャンバス内に入る必要があります。

figma.com にアクセス → ログイン
Drafts画面で、右上の 「Design」 ボタンをクリック
Figmaが新しいデザインファイルを白いキャンバスで開きます — 周囲に定規と中央に薄いグリッドが表示されます
ここがSVGファイルをドラッグ＆ドロップする正しい場所です

Drafts画面（ファイル一覧のみ表示）にいる状態でSVGをドラッグしても効果はありません。必ず先にキャンバス内に入ってください。

alt

ステップ5 — SVGファイルをFigmaにドラッグ＆ドロップ

SVGファイルをフォルダからFigmaのキャンバス中央にドラッグ＆ドロップします
Figmaが1～2秒で処理し、レイアウト全体を表示します

より良い結果を得るためのヒント

入力画像について: 解像度の高い画像を使用すると、より正確な色の結果が得られます。画像がぼやけていたり、圧縮が強すぎると、AIが正しい色をサンプリングしにくくなります。

プロンプトについて: 必要に応じて、UIの言語をプロンプトに追加してください。例えば「日本語のUI、フォントはNoto Sans JPを使用」と指定すると、AIが適切なフォントファミリーを選択します。

アイコンについて: AIにアイコンを描画させるのは避けてください。結果は必ずずれてしまい、修正に時間がかかります。薄いグレーのプレースホルダーの方がはるかにすっきりしており、Figma内で簡単に差し替えができます。 複数画面について： 画像が複数ある場合は、画像を個別に送信し、SVGファイル名を順番に（screen-01.svg、screen-02.svg...）付けてください。その後、すべてのファイルを1つのFigmaファイルにインポートし、各ファイルを1つのフレームに配置します。

ワークフローのまとめ

スクリーンショット
      ↓
Claude / Geminiに送信 + 標準プロンプト
      ↓
AIが色を抽出 → SVGを生成
      ↓
.svgファイルをPCに保存
      ↓
Figmaを開く → 空のデザインキャンバスへ
      ↓
.svgファイルをキャンバスにドラッグ＆ドロップ
      ↓
グループ解除 → アイコンとコンポーネントを差し替え → 完了

画像からFigmaキャンバスに至るまでの全工程は、1画面あたり約5～7分です。プラグインも追加サブスクリプションも不要で、使用回数に制限はありません。