Codia

Nano Banana（Figma / FigJam プラグイン）

概要

Nano Banana は Codia 公式の Figma / FigJam プラグインで、AI 画像にまつわる 探す・作る・編集に変換する の 3 アクションを 1 つのパネルにまとめています。インスピレーションのウォーターフォールを眺める、プロンプトで新しい画像を生成する、気に入った画像をキャンバスに挿入、または Figma の編集可能レイヤーに変換 — これらが縦断的に行えます。

ユースケース

  • デザインを始める前のインスピレーションと参考探し
  • FigJam ボードにイラスト・アイコン・ムード画像を素早く追加
  • カバー / バナー / アバターを AI で生成して Figma に直接投入
  • AI 生成したポスターを編集可能レイヤー化して Figma で継続作業

インストール

  1. Figma の Plugins → Find more plugins（FigJam でも検索可能）
  2. Codia AI: Nano Banana を検索
  3. Run をクリックし、Codia アカウントでサインイン

機能

パネル下部に 3 つのタブがあります。

1. Explore（探索）

  • キュレーションされた AI 画像のウォーターフォール、上部に検索ボックス
  • 画像をタップして詳細表示、Figma に挿入可能
  • ポスター / UI 系の画像は編集可能なデザインに変換（レイヤー・テキスト・形状を分解）
  • 挿入時は最適な解像度を自動選択し、キャンバスが肥大化しないように調整

2. AI Generate（AI 生成）

プロンプト
テキストプロンプト（参考画像オプション）
スタイル / 比率選択
サイズとスタイルのプリセット
生成
Codia 画像モデル
Figma に挿入 / 編集継続
  • テキストから画像生成、比率とスタイルの複数プリセットに対応
  • 生成履歴がギャラリーに残り、同じ画像の再利用が簡単
  • 生成結果も編集可能な Figma レイヤーに変換できます

3. My Creations（マイ作品）

これまで生成・操作した画像を一箇所で確認でき、既存アセットの使い回しが容易です。

クォータ

  • 生成回数と変換回数は Codia AI アカウントで共有
  • 無料プランは 1 日 / 月上限あり、Pro は大幅に緩和
  • 上限に達するとパネルがアップグレード案内を表示

コツ

  • 英語プロンプト推奨：現行モデルは英語に対してより反応が良好
  • まず Explore：キーワード検索で既存素材が見つかれば生成を節約できる
  • FigJam ブレストに最適：ムード画像をボードにポンポン投入
  • 主要素は解像度固定：挿入前に詳細で高解像度版に切り替え

よくある質問

生成に失敗する / 遅い

ネットワークを確認してください（manifest に allowedDomains: * が必要）。混雑時は待ち時間が発生します。

挿入後に画像がぼやける

Explore はサムネイルを既定で使用します。「フルサイズ挿入」または「デザインに変換」で元解像度を取得してください。

Figma と FigJam の両方で使える？

はい。manifest の editorType に figma と figjam の両方を宣言しています。

「デザインに変換」と Screenshot to Design の違いは？

Nano Banana は自ら生成 / キュレーションした画像を image-to-design パイプラインに流します。任意のスクリーンショットには Screenshot to Design をご利用ください。

次のステップ

Codia AI — Anything to Design, Anything to Code