Image to Figma: あらゆる画像を編集可能な Figma レイヤーに変換する

チュートリアル2026-05-10

画像を Figma で編集したいとき、選択肢は3つあります。フラットな画像として貼って手でトレースする方法（遅い）、画像を参考に一から再作成する方法（さらに遅い）、そして AI で画像を編集可能な Figma レイヤーに変換する方法です。

このガイドは3つ目の方法についてです。Codia AI は、スクリーンショット、モバイル画面、Webページ、ダッシュボード、モックアップ、ワイヤーフレームといった UI 画像を、編集可能なテキスト、実図形、独立した画像レイヤーとしての写真やアイコン、グループ化されたレイヤー階層を持つ Figma フレームに変換します。一部の検出された行やスタックには Auto Layout も適用されます。はっきりした高コントラストのスケッチや画面写真も使えることがありますが、整理の手間は増えます。ほとんどの画面は数分で編集できる状態になります。

Codia Screenshot to Figma を使うと、スクリーンショットや UI 画像を編集可能な Figma レイヤーに変換し、再設計、比較、引き継ぎに進めます。

"Image to Figma" とは何か

"Image to Figma" は、視覚入力を編集可能なFigmaデザインへAI変換する、より広いキーワード群です。対象は次のとおりです。

再構築のステップでは、Codia Screenshot to Figma で参照画像を編集可能なレイヤーに変換してからデザインを調整できます。

Screenshot to Figma - 最も一般的なケース（UIキャプチャ）
Mockup to Figma - PNG/JPG モックアップからの変換
Wireframe to Figma - 白黒ワイヤーフレーム画像
Sketch to Figma UI - 手描きUIスケッチの写真
Illustration to Figma - ブランドアートをレイヤー化されたファイルに変換
Screenshot to UI design - 同じ意図を別の言い回しで表したもの

これらはすべて同じ Codia AI の変換パイプラインを通ります。このパイプラインはアプリ画面、Webページ、ダッシュボード、モックアップといった UI 画像向けに作られています。スケッチやイラストも、はっきりした高コントラストの画像なら使えることがありますが、整理の手間は増えます。違いは、出力に何を期待するかです。

対応画像形式

Codia AI が受け付ける画像形式は次の3つです。

PNG（推奨）- 非可逆劣化がなく、エッジを鮮明に保つ
JPG / JPEG - きれいなキャプチャなら問題ありませんが、圧縮された JPG はアイコンや小さい文字のディテールが落ちます
WebP - 対応

GIF、SVG、PDF はこの変換の入力形式ではありません。PDF には専用のワークフローがあります（PDF to Figma を参照）。ベクター出力が必要なら Image to SVG を参照してください。

ベストプラクティスは、可能ならソースから新しく取得した PNG を使うことです。画面写真、再エンコードされた JPG、低解像度のサムネイルは、すべて出力品質を落とします。

変換の仕組み

内部では次の4段階で処理されます。

Vision analysis. Codia AI Vision が、画像内のテキストブロック、ボタン、カード、ナビゲーション、画像、アイコン、装飾要素を特定します。
OCR. テキストを位置情報、フォントサイズ、色情報付きで抽出します。
Layout reconstruction. フラットな画像を、入れ子のレイヤーツリーを持つ Figma フレームとして再構築します。flex のようなレイアウトが検出された一部の行やスタックには Auto Layout を適用し、それ以外のレイヤーの大半は絶対配置になります。
Layer grouping. 関連する要素をレイヤー階層にグループ化し、写真やアイコンは独立した画像レイヤーにします。繰り返し要素（カード、リスト行、ボタン）はグループ化されたレイヤーのままで、コンポーネント化はあなたが行います。

結果は、フレームの中に埋め込まれたスクリーンショットではなく、実際に編集できる Figma ファイルです。

変換後に何が残るか

たいていきれい

テキスト内容とフォントサイズ - OCR で復元される
色の値 - ソースからサンプリングされる
レイアウト構造 - ボックス、行、グリッド、列が、グループ化された入れ子のレイヤーになる
画像領域 - 独立した画像レイヤーとして抽出
シンプルなアイコン - 独立した画像レイヤーとして保持される
ボタン、入力欄、フォームフィールド - 形状とスタイルが素直なら、図形とテキストのグループ化されたレイヤーとして再構築される

要レビュー

フォント - 名前はベストエフォート。欠落フォントはフォールバックし、元の名前は保持される
Auto Layout - 検出された一部の行やスタックのみ。フレームの大半は絶対配置
複雑なアイコンとイラスト - ラスターの画像レイヤーになる。手動でベクター化するか Image to SVG を使う
重なり要素 - 分離が最も難しい。切り抜いて再実行する必要がある
グラデーションと効果 - 単純なグラデーションは良好だが、多段や放射状の複雑なものは近似される

ステップごと

画像を選ぶ。 きれいな PNG キャプチャが最良です。
不要な領域を切り取る。 ブラウザクローム、ステータスバー、ウォーターマーク、その他入れたくない要素を削除します。
Codia AI にアップロード する（Figma プラグイン、またはブラウザの Codia Studio でアップロードして Copy to Figma）。
変換を実行 する。ほとんどの画面は数分で編集できる状態になります。
Figma で開く。 各変換は構造化レイヤーを持つ Frame として着地します。
レビューして整理 する。テキスト、フォント、色、レイヤーのグループ化、Auto Layout を確認します。
繰り返し要素をコンポーネント化 して、継続的なデザイン作業で使える状態にします。変換結果はコンポーネントではなくグループ化されたレイヤーなので、繰り返し出てくるカード、行、ボタンのコンポーネント化には数分かかります。

ソースタイプ別のユースケース

UI Screenshot

最も一般的なケースです。モバイル、ダッシュボード、ランディングページ、Eコマース向けの用途別ヒントは、専用の Screenshot to Figma guide を参照してください。

Wireframe Image

ワイヤーフレームは変換しやすいです。きれいな四角形、明確なラベル、最小限のスタイルなら、すぐにデザインシステムを当てられるFigmaファイルになります。

Hand Sketch (Photographed)

Codia はスケッチではなく UI 画像向けに作られていますが、はっきりした高コントラストのスケッチなら使えることがあります。平らな場所で、均一な照明の下で撮影してください。矩形がはっきりしていて手書きが読みやすいほど結果は良くなりますが、スクリーンショットより整理の手間は増えると考えてください。芸術的な手描きイラストは相性が悪いです。

Mobile App Mockup PNG

スクリーンショットと同じワークフローです。モックアップが1xなら、2x または 3x でアップロードすると、アイコン認識がきれいになります。ただし、拡大後の画像はプランのサイズ上限（無料プランでは 1440 × 1440 px）に収めてください。

バナーや広告クリエイティブも編集可能な Figma フレームに変換できます。写真の重なりや装飾的なタイポグラフィは手作業の整理が必要なことがありますが、基本レイアウトとテキストの復元はうまくいきます。

Illustration / Brand Artwork

イラストはこの変換が想定している入力ではありません。ベクターではなく、主に画像レイヤーとして出力されると考えてください。編集可能なベクターが必要なら、Image to SVG のほうが適しています。

Image to Figma vs Screenshot to Figma vs 画面写真

3つの意図は近いですが、同じではありません。

Source	Tool	What to expect
Screenshot (PNG)	Codia AI	最も高い忠実度。新しいキャプチャ、鮮明なエッジ、OCR に最適。
Image (PNG/JPG/WebP)	Codia AI	同じパイプライン。品質は元画像の品質次第。
Photo of a screen (camera)	Codia AI	はっきりした高コントラストの写真なら使えることがあるが、反射、モアレ、傾きの分だけ追加の修正が必要。

可能なら、画面を撮影するよりスクリーンショットを使ってください。

変換後に確認すること

出力は完成したデザインシステムではなく、高品質な編集可能ドラフトとして扱ってください。次を確認します。

テキスト - 編集できるか。改行は正しいか。OCR が似た文字を取り違えていないか
フォント - 置換は自然か
色 - サンプリングされた値は正しいか。変換ではカラースタイルは作られないので、後から自分のスタイルに割り当てる
アイコン - 画像レイヤーのまま使うか、ベクター化するか、差し替えるか
コンポーネント - 出力にコンポーネントは含まれない。どの繰り返し要素をコンポーネント化するか
Auto Layout - 検出された一部の行やスタックにしかない。レスポンシブにするにはどのコンテナに追加が必要か

API とバッチ処理

大量処理（カタログ移行、デザイン監査、自動取り込み）には Visual Struct API を使います。画像を受け取り、ツール側で Figma に変換したり、下流のデザインパイプラインに流せる構造化 JSON を返します。バッチエンドポイントは多数の画像をまとめて処理でき、完了時には webhook コールバックで通知されます。

FAQ

"image to Figma" と "screenshot to Figma" の違いは何ですか？

多くの場合、同じ意味で使われます。image to Figma はより広く、どんな画像入力でも含みます。screenshot to Figma は UI 画面キャプチャを特に意味します。Codia はどちらも同じワークフローで扱います。

本当に変換後のテキストを編集できますか？

はい。OCR がテキストを抽出し、出力は他のテキストレイヤーと同じように編集できる実際の Figma テキストレイヤーになります。

画像に手書き文字がある場合はどうなりますか？

構造的な文脈にあるはっきりした印刷体の文字（ワイヤーフレームのラベル、注釈など）は OCR できることがありますが、テキストの手直しは想定してください。筆記体は難しくなります。

画像の解像度が低い場合は？

アップロード前に 2x または 3x にアップスケールしてみてください（拡大後もプランのサイズ上限、無料プランでは 1440 × 1440 pxに収めてください）。AI アップスケーリングツールは有効です。目的は、変換に必要なピクセル境界を明確にすることです。

イラストを編集可能なベクターに変換できますか？

矩形やカードなどの UI 図形は編集可能なシェイプになりますが、アイコンやアートワークは画像レイヤーのままです。ベクターが必要なら、Image to SVG のほうが適しています。

無料版はありますか？

はい。無料プランでは毎月 5 AI クレジットが付与され、1440×1440 px・5 MB までの画像を変換できます。クレジットカードは不要です。有料プランではさらに多くの変換量を利用できます。

Figma プラグインはありますか？

はい。Figma Community から Codia AI Design をインストールできます。