実際の手順として、任意のスクリーンショットを編集可能なFigmaファイルに変換する方法をご紹介します。AI(ClaudeまたはGemini)を使用してSVGを生成し、その後Figmaのキャンバスに直接ドラッグ&ドロップするだけです。プラグインは不要で、使用回数の制限もありません。

html.to.designのようなプラグインは非常に便利ですが、無料版では月20回のインポート制限があります。1日に10画面以上を制作するデザイナーにとって、その制限は1週間も持ちません。SVGは完全に無料で無制限、そしてFigmaがネイティブでサポートしている代替手段です。.svgファイルをドラッグ&ドロップするだけで、編集可能なレイヤーとして即座に利用できます。
HTMLからFigmaへの変換に関する記事: AIとhtml.to.designで画像を編集可能なFigmaファイルに変換する6ステップ手順
変換したいデザイン画面のスクリーンショットを撮影または保存します。画像が鮮明であればあるほど、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>
AIからSVGコードが返ってきたら、.svgファイルをパソコンにダウンロードします。
ここで多くの人が間違えやすいポイントです — ホーム画面ではなく、キャンバス内に入る必要があります。
Drafts画面(ファイル一覧のみ表示)にいる状態でSVGをドラッグしても効果はありません。必ず先にキャンバス内に入ってください。

入力画像について: 解像度の高い画像を使用すると、より正確な色の結果が得られます。画像がぼやけていたり、圧縮が強すぎると、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分です。プラグインも追加サブスクリプションも不要で、使用回数に制限はありません。
コメント
まだコメントはありません。最初のコメントを投稿しましょう。
コメントするにはログインが必要です。