Codia
Figma Communityで330,000+ユーザー · 6,000+いいね

スクリーンショットをFigmaへ:どんな画像も編集できるレイヤーに

スクリーンショットやPNG・JPGをアップロードすると、実際に編集できるFigmaデザインになります。1枚の画像のままではなく、テキスト、シェイプ、画像、グループ化されたレイヤーとして再構成。無料のFigmaプラグインでも、ブラウザ上でも変換できます。

Figmaプラグインはパソコンで動作します。スマートフォンでは、まずブラウザ版をお試しください。

毎月5 AIクレジット無料 · クレジットカード不要 · Figmaの無料プランでも利用可能

プラグインなしならブラウザで変換

一般的なクリエイティブワークフロー向けに構築

実際の変換結果

よくあるスクリーンショットを、編集できるレイヤーに

Webサイト、ダッシュボード、モバイルアプリの画面を、Figmaプラグインと同じスクリーンショット→デザイン変換エンジンで変換しました。見出し、ボタン、カード、写真がそれぞれ個別のレイヤーになります。

元のスクリーンショット
Webサイト: 元のスクリーンショット
変換後:編集できるレイヤー
旅行のランディングページ。ナビゲーションリンク、ボタン、写真、旅程カードがそれぞれ個別のレイヤーになり、選択中の見出しは編集できるテキストです。

旅行のランディングページ。ナビゲーションリンク、ボタン、写真、旅程カードがそれぞれ個別のレイヤーになり、選択中の見出しは編集できるテキストです。

サンプル画面はこのデモ用に生成した架空のプロダクトですが、変換結果は実際のものです。Codia Studioでレイヤーパネルを開いた状態です。Figmaプラグインも同じ変換結果からレイヤーを作成します。結果は元の画像によって異なります。

変換できるもの

あらゆるUIを画像からFigmaへ

スクリーンショットを撮れるものなら、変換できます。実際のプロダクトやモックアップのPNG・JPG・WebP画像を、CodiaがFigmaデザインに変換します。

ランディングページのスクリーンショットを、編集可能なFigmaのテキスト・画像・レイアウトレイヤーに変換した例
  • iOS・Androidのアプリ画面

    手元のスマホ、TestFlightビルド、ストアの掲載画面から、コンポーネントを一つずつ描き直さずにアプリ画面を再構築できます。

  • Webサイト・ランディングページ

    キャプチャしたWebページを編集可能なレイアウトに。公開中のURLなら、Web to Figmaでページを直接取り込めます。

  • SaaSダッシュボード・管理画面

    テーブル、グラフ、サイドバー、項目の多いフォームも編集可能な要素として再現。そのままリデザインに使えます。

  • デザインの参考画像・ムードボード

    インスピレーション画像や参考画面を、分析・スタイル変更・応用ができるレイヤーに変換します。

  • ソースファイルのない既存UI

    元のデザインファイルが見つからなくても、リリース済みプロダクトのスクリーンショットから編集可能なデータを復元できます。

  • PNG・JPG・WebP画像

    手早く撮ったスクリーンショットから書き出したモックアップまで、UI画像なら何でも使えます。鮮明な高解像度画像ほど、テキストがきれいに変換されます。

使い方

スクリーンショットをFigmaに変換する方法

Figmaプラグインで3ステップ。ほとんどの画面は数分で編集できる状態になります。

  1. 1

    無料プラグインをインストール

    Figma CommunityからCodia AI Designを開き、任意のFigmaファイルで実行します。

  2. 2

    スクリーンショットをアップロード

    アプリ画面、Webページ、ダッシュボード、デザインの参考画像などのPNG・JPG・WebPをドロップします。

  3. 3

    生成されたレイヤーを編集

    Codiaがテキスト、シェイプ、画像、レイヤー階層をキャンバス上に再構築。通常のFigmaデザインと同じように編集できます。

プラグインがスクリーンショットを読み取り、テキストとUI要素を認識して、Figmaキャンバス上にレイヤーとして再構築します。

ブラウザで使いたい場合

このページ上部から画像をアップロードしてください。Codia Studioで編集可能なキャンバスとして開くので、「Figmaにコピー」をクリックしてFigmaファイルに貼り付けます。

スクリーンショットをアップロード

変換結果

1枚の画像ではなく、編集できるFigmaレイヤー

Figmaに貼り付けたスクリーンショットは1枚の画像にすぎません。変換したスクリーンショットはデザインとして扱え、各パーツが個別のレイヤーになります。

実際のテキストレイヤー

見出し、ラベル、本文が編集可能なテキストになるので、画面を打ち直さずに文言を変更できます。

バラバラの図形ではなくUI階層

コンテナ、リスト、ボタン、カードがレイヤーツリーにグループ化され、移動・リサイズ・スタイル変更ができます。

画像とアイコンは独立したレイヤーに

写真、イラスト、アイコンは背景に焼き込まれず、背景から分離されます。

フォントと多言語テキスト

フォント検出で元の見た目を保ちます。英語だけでなく、多くの言語のテキストを認識します。

ベクターが必要ならSVG出力

同じスクリーンショットを拡大しても劣化しないSVGに変換。鮮明さを保ちたいアイコン、イラスト、素材に使えます。

Design to Codeにそのまま使える

構造化されたレイヤーツリーは、Codia Design to Codeや他のFigma-to-codeツールのきれいな出発点になります。

貼り付け・手作業トレース・変換:スクリーンショットを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.
DDavid Champion@davidchampion ·
We tested it today. With various screen shots. Very cool. And very simple to use.
LLars@lars63 ·
It was super helpful! Codia allows you to use a free version with pre set image formats (size for example). I recommend it!
ddaniela zavala@danielazavala ·

スクリーンショットのFigma変換 料金プラン

毎月5 AIクレジットで無料から始められます。より大きなスクリーンショット、一括アップロード、追加クレジットが必要ならアップグレードを。

スクリーンショットのFigma変換 よくある質問

スクリーンショットや画像を編集可能なFigmaデザインに変換する方法についてお答えします。

その他のご質問は、お気軽にお問い合わせください。

サポートに問い合わせ
次のスクリーンショットもすぐ変換できます

最初のスクリーンショットを 無料でFigmaに変換

Figmaでプラグインをインストールするか、ブラウザで画像をアップロード。すべてのアカウントに毎月無料のAIクレジットが付与されます。

クレジットカード不要 · ファイルは学習に使用されません · 毎月5 AIクレジット無料