FigmaでAI画像と動画を生成：選択中のレイヤーを参照に

デザインの仕事では、誰かが撮影するずっと前から写真が必要になります。ランディングページのヒーロー画像、商品カードのライフスタイル写真、SNSテンプレートの背景。eroqのFigmaプラグインは、それらを使う場所でそのままレンダリングします。デザイン中のフレームの隣に、キャンバス上の塗りとして。しかも、すでに描いたものから始めることもできます。

インストール（ベータ版）

ベータ版のあいだ、プラグインはマニフェストから読み込みます。そのためFigmaデスクトップアプリが必要です。

1. eroq for Figmaからzipをダウンロードし、解凍します。
2. FigmaデスクトップアプリでPlugins → Development → Import plugin from manifest…（プラグイン → 開発 → マニフェストからプラグインをインポート）を開き、manifest.jsonを選びます。
3. Plugins → Development → eroq — AI images & videoから起動します。

接続

Connect eroq（eroqを接続）をクリックします。ブラウザでeroq.aiが開くので、必要ならログインしてAllow（許可）をクリックすると、ページにコードとCopy code（コードをコピー）ボタンが表示されます。それをプラグインに貼り付けてください。貼り付けた瞬間に接続されます。Figmaのプラグインはブラウザからのリダイレクトを受け取れないため、このコピーの手順が必要です。コードは1回だけ、2分間、それを求めたプラグインでのみ有効です。

プラグインのキーは「開発者 → APIキー」に「Figma … (connected)」という項目で表示され、プラグインの⋯メニューにあるDisconnect（接続解除）で取り消せます。

プロンプトから

Imageタブでプロンプトを書き、モデルとフォーマット（1:1、3:4、4:3、9:16、16:9）を選んで、Generate（生成）を押します。ボタンにはクリックする前に料金が表示されます。Krea 2なら10クレジット、Eroq Oneなら20クレジットです。

レンダリング結果は、その画像自体の縦横比（長辺1024 px）で、画像の塗りが入った長方形として届きます。名前はプロンプトから付けられ、選択された状態で表示位置までスクロールされます。置かれる場所は選択範囲の隣（何も選択していなければ画面の中央）で、ほかのレイヤーの上に重なることはありません。そのため、続けてレンダリングした結果がきれいに並び、見比べやすくなります。

選択したレイヤーから

ここが、このプラグインを単なる画像の取得ツールではなく、デザインツールにしている部分です。Use selection as reference（選択範囲を参照に使う）にチェックを入れると、選択した最初の4つのレイヤーが、参照画像としてプロンプトと一緒に送られます。

• ワイヤーフレームやラフスケッチ：レンダリングがあなたのレイアウトに沿います。被写体の位置も、見出しのスペースも。
• 商品写真：商品はそのままに、周りをすべて変えられます。「同じボトルを大理石のカウンターに、朝の光で」。
• ムードフレーム：色と質感のための参照画像のコラージュです。

レイヤーは適切なサイズ（長辺1024〜1536 px）で書き出され、そのままエンジンに渡されます。eroq側には何も保存されません。画像を読み込まないエンジンは、それらを単に無視します。

動画の塗り

Videoタブも同じ仕組みで、エンジン本来のフォーマットと最大10秒の長さに対応します。Use selection as first frame（選択範囲を開始フレームに使う）にチェックを入れると、選択したレイヤーがクリップの開始フレームになります。静止したキービジュアルが動き出すわけです。動画APIは画像をリンクで受け取るので、そのフレームはまずあなたのeroqストレージ（フォルダFigma）にアップロードされます。クレジットはかかりませんが、ストレージの容量にはカウントされます。表示される料金は、APIの課金と同じ方法で計算した見積もりです。Seedance 2.0 Miniの5秒のクリップなら45クレジットです。

Figmaで動画の塗りが使えるのは有料チーム（Professional、Organization、Education）で、1クリップ100 MBまでです。それ以外のプランでは、プラグインがクリップの最初のフレームを画像として配置し、その理由を伝えたうえで、クリップのリンクを渡します。クリップ自体は、いつでもeroqのライブラリにあります。

作業のリズム

• 最大4つのレンダリングを同時に実行でき、それぞれRecent（最近）の下にタイルが表示されます。レンダリング中にプラグインを閉じても、戻ってきたときに結果がそこで待っています。
• プラグインが配置したレンダリング結果を選択してReuse its prompt（そのプロンプトを再利用）を押せば、それをもとに改良を重ねられます。
• ⌘/Ctrl + Enter：プロンプトの入力中に押すと生成します。
• エラーはeroq自身のわかりやすい言葉で表示されます（クレジット不足、拒否されたプロンプト、プランで制限されたエンジンなど）。失敗したレンダリングは自動で返金されます。

よくある質問

ブラウザ版のFigmaでも使えますか？

実行はできますが、ベータ版はマニフェストから読み込む必要があり、それができるのはデスクトップアプリだけです。Communityで公開されれば、ほかのプラグインと同じようにブラウザでも使えるようになります。

FigJamでも使えますか？

対象はFigmaのデザインファイルです。

デザインがどこかに送られることはありますか？

送られるのは、参照としてチェックを入れたレイヤーだけで、そのレンダリングのためだけです。画像の場合はエンジンにそのまま渡され、どこにも保存されません。動画の開始フレームは、あなた自身のeroqストレージに保存されます。

料金はいくらですか？

スタジオと同じクレジット料金で、毎回レンダリングの前にGenerateボタンに表示されます。新しいeroqアカウントには、最初に無料の50クレジットが付きます。

eroq for Figmaから入手できます。