Codia

Screenshot to Editable Figma Design

概要

Codia AI Design: Screenshot to Editable Figma Design は、スクリーンショットを編集可能な Figma UI デザインへ労なく変換するプラグインです。アプリや Web サイトのスクリーンショットをアップロードすれば、あとはプラグインが処理 —— そこからデザインの旅を始めましょう。

181 カ国の 30 万人超のプロデザイナー が利用し、累計 100 万件以上のデザイン が Codia AI から生み出されています。

主な機能

1. ワンクリック変換

スクリーンショットをアップロードするだけで、完全に編集可能な Figma UI デザインが即座に得られます。

2. AI による画像強調

先進の AI ビジュアルモデルが画像を強化し、UI デザイン向けに最適化。ページ要素を細部までしっかり捉えます。

3. 精密な UI 階層の再構築

Listview とコンテナの区別など、UI 構造を正確に再構築し、リアルなデザインレプリケーションを実現します。

4. 専用フォント認識

高度なフォント検出で、デザインのスタイルと可読性を維持します。

5. マルチ言語対応

複数言語を認識・処理し、グローバルなオーディエンスに柔軟に対応します。

6. SVG 変換

スクリーンショットをスケーラブルベクター（SVG）に変換。どの解像度・デバイスでも適応します。

7. AI コード生成レディ

生成されたデザインは視覚的に美しいだけでなく、後続の AI コード生成にも最適化されており、開発フェーズへスムーズに移行できます。

8. 厳格なプライバシー保護

プライバシーを最優先。明示的同意なしに、あなたのデザインを学習に使用することはありません。実践は OpenAI のプライバシー規約とも整合しています。

インストール

  1. 任意の Figma ファイルを開く
  2. Plugins → Find more plugins → Codia AI: Screenshot to Design を検索
  3. Run をクリック、Codia アカウントでサインイン

Figma と FigJam の両方に対応。

ワークフロー

アップロード
スクショをドラッグ＆ドロップ、または Design Library から選択
トリミング
変換対象の領域に絞る
AI スキャン
レイアウト・階層・テキスト・フォント・コンポーネント
編集可能デザインが Figma に挿入

1. アップロード

  • ローカルアップロード — ドラッグ＆ドロップまたはクリックで選択
  • Design Library — iOS / Android / Web の実アプリ画面ライブラリ内蔵

対応形式: PNG, JPEG, WebP

2. トリミングと注釈

コーナーをドラッグして、1 つの画面またはカードに集中。任意の注釈で AI の認識精度をさらに高められます。

3. AI スキャン

トリミングされた画像を Codia のクラウドに送信し、編集可能な Figma レイヤーツリーとして返します —— レイアウト・フォント・色・余白・角丸・シャドウも再現。

4. 完了

結果をプレビュー、任意で Convert to Vector (AI SVG)、いいね / 悪いねのフィードバック、New Task で次の変換を開始。

バッチモード

複数のスクショを一度に処理するなら Batch mode：バッチアップロード → 並び替え / 削除 → 個別トリミング → バッチスキャン → 順次 Figma に挿入。

マルチプラットフォーム対応

同じワークフローは他ツール向け Codia プラグインでも利用可能：

  • Figma — 最も完成度が高い体験、Auto Layout 出力にも対応
  • Canva — スクショ → 編集可能な Canva デザイン
  • Sketch — スクショ → 編集可能な Sketch デザイン

このページは Figma プラグイン版に特化しています。

クォータ

  • 変換回数は Codia AI アカウントのクォータを共有
  • 使用量 50% 前後で残量ヒントが表示
  • 上限付近でアップグレード案内
  • Free / Start / Pro は 画像解像度・ファイルサイズ・月間変換数 に差

詳細は codia.ai/pricing。

ベストプラクティス

  • クリーンで高解像度の画像 — できれば 1×、未圧縮
  • 画面単位でトリミング — 無関係なページを 1 枚に混ぜない
  • テキストは読みやすく — 小さすぎ / 不鮮明は OCR 精度低下
  • 遮蔽を避ける — モーダル・オーバーレイ・半透明マスクは外す
  • 構造が明確 — 情報密度の高い UI は分割処理が効果的

サポートと連絡先

よくある質問

「解像度上限超過」と出る

プランごとに 1 画像の上限があります。トリミングするか、プランをアップグレードしてください。

Auto Layout が出力されない

整列したグリッドやスタックが検出できる場合のみ自動適用されます。自由度の高いレイアウトは絶対配置で出力されるため、Figma 上で手動変換してください。

フォントが既定フォントになる

元画像のフォントがローカルに未インストールの場合、Figma が既定フォントにフォールバックします。対応フォントをインストールし再読み込みしてください。

次のステップ

  • 生成したデザインをコードに → Figma to Code
  • プロンプトから UI 生成 → DesignGen
  • 問い合わせ・フィードバック → Support

Codia AI — Anything to Design, Anything to Code