ソースファイルなしで画面から復元しなければならないなら

クライアントが参考画面をキャプチャして送ってきて、「この構成に変えてください」と言うことがあります。テキストもカードもボタンも目の前にありますが、元のFigmaファイルがないため、結局は空のフレーム上で描き直すことになります。

このようなときは、スクリーンショット→Figma変換ツールを使うと、最初の構造を素早く確保できます。CodiaはPNG・JPG・WebPのスクリーンショットからテキスト、画像、グループ、視覚的な階層を検出し、個別に編集できるFigmaレイヤーを生成します。

ただし、ここで得られるのは完成したデザインシステムではなく、修正可能な復元下書きです。公式ワークフローでも、生成後に間隔とタイポグラフィ、繰り返し要素、コンポーネント境界、レスポンシブ動作を人が確認するよう案内されています。

精度ランキングではなく作業経路で選びましょう

同じ入力を統制した独立比較実験がないため、「どのツールが何パーセント正確か」と順位付けするのは難しいです。代わりに、結果をどこで編集するか、オートレイアウトが必要か、ベクター化と料金のどちらが重要かで選ぶと、判断が明確になります。

ツール確認できた作業経路選びやすい状況先に確認する点
CodiaFigmaプラグインでスクリーンショットを編集可能なレイヤーに変換Figma内で復元から後続の編集まで進めるときオートレイアウトは適用可能な箇所に生成されますが、すべてのレスポンシブ構造が完成するわけではありません
image.to.designWeb変換ツールまたはFigmaプラグインを使用編集可能なレイヤー、オートレイアウト、意味のあるレイヤー名を明示した出力を優先するとき静的な画像からホバー・アニメーション・JavaScriptの動作まで推測することはできません
Banani独立したWebアプリで作業した後、Copy to Figmaでキャンバスに貼り付けBananiで画面を作成または修正してからFigmaへ移すとき2026年6月の公式ヘルプではFigmaエクスポートを有料機能として案内していますが、製品ページの無料変換という文言と矛盾するため、アカウントで現在の条件を確認する必要があります
ReforeスクリーンショットとAI生成画像をベクター化してFigmaへ取り込み画像のベクター復元が中心で、クレジット単位の利用量を計算できるときScreenshot to FigmaはRefore Maxに含まれ、機能ごとにクレジットが差し引かれます

素早く選ぶ基準

  • いま開いているFigmaファイルでそのまま復元したいなら、まずCodiaとimage.to.designを比較します。
  • 独立したWebアプリで生成・修正した画面を移す流れが使いやすければ、Bananiを見てみましょう。
  • ベクター化が重要ならReforeを検討しますが、想定する変換回数とあわせてクレジット費用も計算します。

Codiaもオートレイアウトを作りますが、レビューは残ります

Codiaがすべての要素を絶対位置だけで作るという説明は、現在のドキュメントと一致しません。公式のAI Designドキュメントには、適切なレイヤー構造とともに適用可能な箇所にオートレイアウトを生成すると明記されています。

だからといって、自動生成されたフレームをそのまま開発へ渡してよいわけではありません。どの要素にオートレイアウトが適用されるか、またその適用率は公開されていません。長いページや密度の高いダッシュボードでは、意味が保たれる区間ごとに画像を分け、生成後にテキスト・画像・間隔・構造を修正するよう公式に案内されています。

結局、このツールが減らしてくれるのは、レイヤーを最初から描く工程です。デザイントークンをつなぎ、繰り返し要素をコンポーネントとしてまとめ、画面幅ごとの動作を決める作業は、依然としてデザイナーの判断に委ねられます。

最初の復元は画面全体ではなく1区間から始めましょう

用意するものは、編集権限のあるFigmaファイル、メール確認を完了したCodiaアカウント、そして外部サービスへアップロードする権限がある鮮明なPNG・JPG・WebPファイルです。個人情報や機密情報はアップロード前に削除してください。

  1. 公式ページからインストール経路を開きます。
    Codia Screenshot to FigmaでFigma向けのダウンロード経路を開くか、Figma CommunityでCodia AIを検索してプラグインをインストールします。
  2. プラグインを実行し、Codiaにログインします。
    Figmaファイルでプラグインを実行した後、用意したCodiaアカウントでログインし、Screenshot to Designを選択してください。アカウントがない場合は、メールまたはGoogleアカウントで登録してから、先にメール確認を完了する必要があります。
  3. 圧縮の少ない元画像をアップロードします。
    最初は、ページ全体ではなく、ヘッダー・ヒーロー・機能一覧のように文脈が保たれる1区間を選びましょう。メッセンジャーで再保存した低画質キャプチャではなくクライアント提供の元PNGを使い、長いページや密度の高いダッシュボードは区間ごとに分けて入力します。
  4. レイヤーが実際に分離されたか確認します。
    テキストと画像をそれぞれ選択して編集してみて、主要なグループとコンテンツ階層が1枚の平面画像ではなくレイヤーとして作られているか確認します。
  5. 元画像を横に置き、差分を直します。
    文言と数字、ブランド名、間隔、タイポグラフィを先に合わせ、その後に繰り返されるカードとボタンのコンポーネント境界を整理します。
  6. オートレイアウトを自分で動かしてみます。
    フレーム幅を狭くしたり広くしたりして、間隔と整列が意図どおり維持されるか確認してください。崩れる箇所は、パディング、間隔、リサイズルールを修正してから引き渡します。

最初の成功基準は、元画像とピクセル単位で完全に同じかどうかではありません。 テキスト・画像・グループを個別に選択して編集でき、主要な階層と繰り返し要素に一貫性があり、必要な画面幅でレイアウトの意図を説明できれば、復元下書きとして使えます。

スクリーンショットにない情報は復元できません

静止画だけでは、ボタンのホバー状態、アニメーション、画面遷移の条件、JavaScriptのインタラクションは分かりません。image.to.designも、こうした動作は平面画像から推測できないと明記しています。

引き渡し前に、3つを分けて表示してください。

  • 画像で確認したもの: 見えている文言、色、間隔、コンテンツ階層
  • ツールが推定したもの: グループ、オートレイアウト、繰り返し要素の境界
  • チームが新たに決めるもの: ホバー・クリック動作、レスポンシブルール、デザイントークン、コンポーネント状態

この区別があれば、自動生成された構造が元の製品ルールであるかのように開発へ渡されることを防げます。