スクリーンショットをFigmaへ:
どんな画像も編集できるレイヤーに
スクリーンショットやPNG・JPGをアップロードすると、実際に編集できるFigmaデザインになります。1枚の画像のままではなく、テキスト、シェイプ、画像、グループ化されたレイヤーとして再構成。無料のFigmaプラグインでも、ブラウザ上でも変換できます。
Figmaプラグインはパソコンで動作します。スマートフォンでは、まずブラウザ版をお試しください。
毎月5 AIクレジット無料 · クレジットカード不要 · Figmaの無料プランでも利用可能
プラグインなしならブラウザで変換
一般的なクリエイティブワークフロー向けに構築
実際の変換結果
よくあるスクリーンショットを、編集できるレイヤーに
Webサイト、ダッシュボード、モバイルアプリの画面を、Figmaプラグインと同じスクリーンショット→デザイン変換エンジンで変換しました。見出し、ボタン、カード、写真がそれぞれ個別のレイヤーになります。
フードデリバリーアプリ。プロモーションバナーがタイトル、サブタイトル、ボタン、写真に分かれ、選択中のタイトルはInter Boldの編集できるテキストです。
サンプル画面はこのデモ用に生成した架空のプロダクトですが、変換結果は実際のものです。Codia Studioでレイヤーパネルを開いた状態です。Figmaプラグインも同じ変換結果からレイヤーを作成します。結果は元の画像によって異なります。
変換できるもの
あらゆるUIを画像からFigmaへ
スクリーンショットを撮れるものなら、変換できます。実際のプロダクトやモックアップのPNG・JPG・WebP画像を、CodiaがFigmaデザインに変換します。

iOS・Androidのアプリ画面
手元のスマホ、TestFlightビルド、ストアの掲載画面から、コンポーネントを一つずつ描き直さずにアプリ画面を再構築できます。
Webサイト・ランディングページ
キャプチャしたWebページを編集可能なレイアウトに。公開中のURLなら、Web to Figmaでページを直接取り込めます。
SaaSダッシュボード・管理画面
テーブル、グラフ、サイドバー、項目の多いフォームも編集可能な要素として再現。そのままリデザインに使えます。
デザインの参考画像・ムードボード
インスピレーション画像や参考画面を、分析・スタイル変更・応用ができるレイヤーに変換します。
ソースファイルのない既存UI
元のデザインファイルが見つからなくても、リリース済みプロダクトのスクリーンショットから編集可能なデータを復元できます。
PNG・JPG・WebP画像
手早く撮ったスクリーンショットから書き出したモックアップまで、UI画像なら何でも使えます。鮮明な高解像度画像ほど、テキストがきれいに変換されます。
使い方
スクリーンショットをFigmaに変換する方法
Figmaプラグインで3ステップ。ほとんどの画面は数分で編集できる状態になります。
- 1
無料プラグインをインストール
Figma CommunityからCodia AI Designを開き、任意のFigmaファイルで実行します。
- 2
スクリーンショットをアップロード
アプリ画面、Webページ、ダッシュボード、デザインの参考画像などのPNG・JPG・WebPをドロップします。
- 3
生成されたレイヤーを編集
Codiaがテキスト、シェイプ、画像、レイヤー階層をキャンバス上に再構築。通常のFigmaデザインと同じように編集できます。
ブラウザで使いたい場合
このページ上部から画像をアップロードしてください。Codia Studioで編集可能なキャンバスとして開くので、「Figmaにコピー」をクリックしてFigmaファイルに貼り付けます。
変換結果
1枚の画像ではなく、編集できるFigmaレイヤー
Figmaに貼り付けたスクリーンショットは1枚の画像にすぎません。変換したスクリーンショットはデザインとして扱え、各パーツが個別のレイヤーになります。
実際のテキストレイヤー
見出し、ラベル、本文が編集可能なテキストになるので、画面を打ち直さずに文言を変更できます。
バラバラの図形ではなくUI階層
コンテナ、リスト、ボタン、カードがレイヤーツリーにグループ化され、移動・リサイズ・スタイル変更ができます。
画像とアイコンは独立したレイヤーに
写真、イラスト、アイコンは背景に焼き込まれず、背景から分離されます。
フォントと多言語テキスト
フォント検出で元の見た目を保ちます。英語だけでなく、多くの言語のテキストを認識します。
貼り付け・手作業トレース・変換:スクリーンショットをFigmaに取り込む3つの方法
貼り付けは一瞬ですが、残るのは画像です。手作業のトレースは編集できますが時間がかかります。変換なら両方を満たせます。
| Codiaで変換 | 画像を貼り付け | 手作業でトレース | |
|---|---|---|---|
| 編集可能なテキスト | 可(テキストレイヤーとして認識) | 不可(テキストはピクセル) | 可(手入力で打ち直し) |
| レイヤー構造 | グループ化・ネストされたレイヤー | 1枚の画像のみ | 手作業で構築 |
| フォントと色 | 画像から検出 | 見た目のみ | 目視で合わせる |
| 1画面あたりの時間 | 数分+仕上げ | 数秒 | 数時間かかることも |
Figma Communityでのデザイナーの声
Codia AI Designプラグインページに寄せられた公開コメントからの抜粋です(原文のまま掲載)。
Very impressed! I was skeptical, having tried other 'screenshot to figma' plugins with terrible results. This Codia plugin rapidly created an almost pixel-perfect replica of the screenshots, with all the correct vectors and layers. … The free 5 credits is more than enough to test the outputs before making a purchase decision. I'm subscribing now.We tested it today. With various screen shots. Very cool. And very simple to use.It was super helpful! Codia allows you to use a free version with pre set image formats (size for example). I recommend it!スクリーンショットのFigma変換 料金プラン
毎月5 AIクレジットで無料から始められます。より大きなスクリーンショット、一括アップロード、追加クレジットが必要ならアップグレードを。
スクリーンショットのFigma変換 よくある質問
スクリーンショットや画像を編集可能なFigmaデザインに変換する方法についてお答えします。
その他のご質問は、お気軽にお問い合わせください。
サポートに問い合わせ関連ガイドと変換ツール
- スクリーンショットのFigma変換ガイド撮影から最終的なレイヤーまで、きれいに変換するためのコツ。
- プラグインのドキュメントCodia AI Designの設定、制限、トラブルシューティング。
- スクリーンショットをCanvaにスクリーンショットを編集可能なCanvaデザインに変換します。
- スクリーンショットをPhotoshopにスクリーンショットを編集可能なPSDレイヤーとして再構築します。
- スクリーンショットをSketchにMacでスクリーンショットをSketchレイヤーに変換します。
- Web to Figma公開中のWebページをURLからFigmaに取り込みます。
- PDFをFigmaに変換PDFのページを編集可能なFigmaフレームに変換します。
- スクリーンショット→デザイン変換APIUIスクリーンショットをJSON、SVG、Figmaデータに一括変換します。
最初のスクリーンショットを
無料でFigmaに変換
Figmaでプラグインをインストールするか、ブラウザで画像をアップロード。すべてのアカウントに毎月無料のAIクレジットが付与されます。
クレジットカード不要 · ファイルは学習に使用されません · 毎月5 AIクレジット無料






















