GenStudio for Performance Marketing用 Figma プラグイン

GenStudio for Performance Marketing Figma プラグインを使用すると、Figma アプリケーションに新しいパネルが追加され、オンブランドのコンテンツを生成できるようになります。
Figma コミュニティマーケットプレイス ​ からプラグインを検索してインストールします。

このページでは、プラグインの設定方法および使用方法を説明します。

このプラグインの機能は次のとおりです。

  • Figma テキスト要素をGenStudio for Performance Marketing フィールド(headlinebodyon_image_text など)にマッピングします。
  • ブランド、ペルソナ、商品、テキストプロンプトに基づいて、新しいオンブランドMeta、LinkedIn またはディスプレイ広告 Experiences を生成します。
  • マッピングされた Figma 要素のテキストをGenStudio for Performance Marketingで生成された値に置き換えることで、Figma ドキュメント内に Experiences を直接作成します。
  • プロンプトに基づいて、既存のコンテンツをリフレーズ、短縮、延長または翻訳します。
  • 生成された Experiences を複数の言語に翻訳します。
  • 生成された Experiences を、統合された画像としてローカルソースに書き出します。
  • 生成された Experiences をGenStudio for Performance Marketingに書き出します。
  • Figma キャンバスで選択した要素に適応するプラグインオプションを使用します。

テンプレートの作成

この規則に従うには、プラグインに Figma ドキュメントの最初の 2 つのレベルが必要です。

  • セクション – 親プロジェクトを表します。親プロジェクトには複数のテンプレートを含めることができます。
  • フレーム - プロジェクト内のテンプレートを表します。 テンプレートには、テキスト、画像、コンポーネント、その他の要素を入力できます。

Meta テンプレート

次のテンプレートサイズがサポートされています。

Instagram や Facebook の投稿の場合:

  • 幅:1080 px (固定)
  • 高さ:1080 ピクセルまたは 1350 ピクセル

Instagram や Facebook のストーリーの場合:

  • 幅:1080 px (固定)
  • 高さ:1920 ピクセル

プラグインは、テンプレートの高さに基づいて、生成されるエクスペリエンスのクロムを決定します。

表示テンプレート

固定サイズの要件はありません。 表示テンプレートは、任意のサイズをサポートします。

LinkedIn テンプレート

  • 幅:1200 px (固定)
  • 高さ:1200 ピクセル、628 ピクセル、2292 ピクセル、1800 ピクセル、または 1500 ピクセル

フィールドの役割マッピング

プラグインは、ヘッドライン、本文、画像など、テンプレートの様々な要素を理解する必要があります。

要素役割を割り当てるには、次の手順に従います。

  1. テンプレート内の要素(テキスト、画像など)を選択します。
  2. ドロップダウンメニューを使用して役割を割り当てます。

プラグインは、生成されたコンテンツに使用するためのこれらのマッピングを記憶しています。 1 つのフィールド role\は複数のテンプレート要素にマッピングできます。

​ フィールドの役割のマッピング ​{width="60%"}

フィールドマッピングの例外

source-git-commit: 66aa508298f897c4a239f1b3e13a31ff20b8a944
workflow-type: tm+mt
source-wordcount: ‘40’
ht-degree: 5%

字段映射例外

某些渠道仅支持替换特定字段。 例如:

  • Meta和LinkedIn广告取代了周围Chrome中的标题、正文和介绍性文本,而不是广告本身。 考虑将图像上的文本映射为on_image_text

新しいコンテンツを生成

GenStudio for Performance Marketing AI を使用して、Figma テンプレート内の要素を生成したり、バリエーションを作成したりします。

  1. GenStudio Plugin Playground または既に用意されているテンプレートを使用する場合は、広告テンプレートを含むセクションノードを選択します。 これは、レイヤー パネルから実行するか、キャンバスのセクションを直接クリックして実行できます。
    ​ セクションの選択またはバリエーション ​{width="50%" modal="regular"}
  2. プラグインウィンドウで、バリエーションのプロジェクト名を入力し、コンテンツのプラットフォームを選択して、その他の必要な情報を入力します。 次に、「セットアップを完了」ボタンをクリックします。
    ​ プロジェクトを設定ウィンドウ ​{width="30%" modal="regular"}
  3. コンテンツ生成に使用する Brand、Persona、Product を選択します。
  4. 作成するバリエーションの数を選択します(最大 8 つ)。
  5. コンテンツを選択 の下にあるボタンを使用して、アセットから画像を参照して選択します。 最近追加された 40 個のアセットが最初に表示され、他のアセットを検索できます。 選択した画像は、テンプレートに合わせて自動的にサイズ変更されます。
  6. テキストプロンプトを入力します。 フィールド リストの各フィールドでは、新しいコンテンツの アクション オプションが 生成 に設定されています。
  7. すべてのフィールドの役割をマッピングします。 ​ フィールドロールマッピング ​ を参照してください。
  8. 生成 ボタンをクリックします。

既存のコンテンツからバリエーションを翻訳または生成してコピーする

GenStudio for Performance Marketing AI を使用して、広告コピーのバリエーションを生成したり、Figma テンプレートを翻訳したりします。

  1. 広告テンプレートを含むセクション ノードを選択します。 これは、レイヤー パネルから実行するか、キャンバスのセクションを直接クリックして実行できます。
    ​ セクションの選択またはバリエーション ​{width="50%" modal="regular"}
  2. プラグインウィンドウで、バリエーションのプロジェクト名を入力し、コンテンツのプラットフォームを選択します。
  3. 目標は何ですか?バリエーションを生成 または 翻訳 を選択し、設定を完了 ボタンをクリックします。
    ​ プロジェクトを設定ウィンドウ ​{width="30%" modal="regular"}
  4. コンテンツ生成に使用する Brand、Persona、Product を選択します。
  5. 作成するバリエーションの数を選択します。
  6. コンテンツを選択 の下にあるボタンを使用して、アセットから画像を参照して選択します。 最近追加された 40 個のアセットが最初に表示され、他のアセットを検索できます。 選択した画像は、テンプレートに合わせて自動的にサイズ変更されます。
  7. テキストプロンプトを入力します。 フィールド リストの各フィールドでは、新しいコンテンツの アクション オプションが 生成 に設定されています。
  8. すべてのフィールドの役割をマッピングします。 ​ フィールドロールマッピング ​ を参照してください。
  9. 各フィールドタイプを選択してバリエーションを生成するか、プラグインの左側のパネルで翻訳し、初期コンテンツを各 初期コンテンツ ボックスに貼り付けます。
    ​ 「初期コンテンツ」ボックスのサンプルテキスト ​{width="60%" modal="regular"}
  10. 生成 ボタンをクリックします。

生成後にコンテンツを翻訳

  1. 翻訳する世代を選択します。
    ​ 生成を選択 ​{width="20%" modal="regular"}
  2. 翻訳」を選択し、「翻訳」をクリックします。
  3. ターゲット言語(複数可)を選択します。
  4. 選択」をクリックします。

翻訳結果には、次のものが含まれます。

  • 新しいページが翻訳済みコンテンツと共に表示されます。
  • 各翻訳はターゲット言語またはロケールを示します。
  • 元のページの元のコンテンツは変更されません。

​ 翻訳結果 ​{width="60%" modal="regular"}

生成後のコンテンツフィールドでのその他のアクション

フィールド内の既存のコンテンツを編集する場合は、プラグイン パネルに便利なオプションが表示されます。

​ プラグインアクションオプション ​{width="30%" modal="regular"}

オプションには、以下が含まれます。

  • Value を変更して、テキストを直接変更します。 このコンテンツを変更すると、選択したすべてのバリエーションに自動的に適用されます。
  • AI は、次のような多くの アクション オプションを実行できます。
アクション
説明
生成
新しいテキストバリエーションを生成します。
フレーズの変更
新しいテキストバリエーションを生成します。
短縮
テキストの短いバリエーションを生成します。
延長
長いバリエーションのテキストを生成します。

アクション オプションを選択した後、「再生成 ボタンを使用してコンテンツを再生成します。

エクスペリエンスの書き出し

バリエーションは、Figma からGenStudio for Performance Marketing Experiences として書き出すことができます。

  1. 次のいずれかの操作を行って、Figma キャンバスに書き出すコンテンツを選択します。

    • キャンバスで生成セクションを選択し、プラグインパネルの エクスポート用にすべてマーク をクリックします。
      ​ 生成セクションの選択 ​{width="20%" modal="regular"}
    • キャンバスで個々の世代を選択し、プラグインパネルの エクスポート用にマーク をクリックします。
      ​ 個々の世代の選択 ​{width="20%" modal="regular"}
  2. サイドバーメニューから書き出し項目を選択します。
    Meta広告に表示された「書き出し用にマーク」ボタン ​{width="60%" modal="regular"}

  3. 宛先を選択します。

  4. 書き出し をクリックして、コンテンツを書き出します。

プラグインパネルに ZIP ファイルが作成されるか、「GenStudioで開く へのリンクが表示さ ます。 ZIP リンクを使用してファイルの保存場所を選択するか、「GenStudioで開く」を選択します。

Figma フレームのPhotoshopへの変換

NOTE
このタスクを実行するには、Figma プラグインと GenStudio for Performance Marketing用Photoshop プラグイン ​ の両方が必要です。

Figma プラグインを使用して、Figma フレーム、複数フレームまたはドキュメント全体をPhotoshop形式に変換し、Photoshop プラグイン ​ で使用するために書き出すことができます。 現在、表示/非表示、フォントサイズ、基本レイヤー属性などの主要なプロパティのみが、変換時にサポートされます。 取り消し線、上付き文字、下付き文字、不透明度(割合)、グラデーションなどの機能は、まだサポートされていません。

このプラグインは、変換用に次の Figma レイヤータイプをサポートしています。

  • フレーム
  • グループ
  • インスタンス
  • テキスト
  • ベクトル
  • 画像

PSDに変換すると、サポートされているレイヤーは次のようにPhotoshopにマッピングされます。

Figma レイヤータイプ
Photoshopに変換
メモ
フレーム
画層グループ
  • Figma フレームは、Photoshop レイヤーグループに変換されます。
  • ネストされたフレームはネストされたグループになります。
  • フレームサイズは、(選択範囲に応じて)PSD アートボードまたはグループの範囲になります。
グループ
画層グループ
  • Figma グループは、Photoshop レイヤーグループに直接変換されます。
  • レイヤーの階層と重ね順は保持されます。
インスタンス
画層グループ
  • コンポーネントとインスタンスは、標準のPhotoshop レイヤーグループに統合されます。 コンポーネントのメタデータとバリアントロジックは保持されません。
  • すべての子レイヤーはグループ内に残ります。
テキスト
テキストレイヤー
  • Figma テキストレイヤーは、編集可能なPhotoshop テキストレイヤーに変換されます。
  • テキストの階層と位置は保持されます。
ベクトル
シェイプレイヤー
  • Figma ベクターレイヤーはPhotoshop シェイプレイヤーに変換されます。
  • 可能な場合、パスは保持されます。
  • サポートされていないエフェクトが適用されている場合、複雑なベクトルがラスタライズされることがあります。
画像
ラスター画層
  • Figma イメージレイヤーはPhotoshop ラスターレイヤーに変換されます。
  • 画像の拡大/縮小と配置は維持されます。

フレームの変換方法

フレームを変換するには:

  1. Figma でFirefly Enterprise およびGenStudio プラグインを開き、プラグイン UI で「書き出し」タブをクリックします。

  2. キャンバスで、書き出す 1 つまたは複数のフレームを選択します。 1 つまたは複数のフレームを選択できます。

  3. 次のいずれかの操作を行います。

    • エクスポート」をクリックして、変換したファイルを選択した場所にエクスポートするか、
    • Photoshop プラグインに転送 をクリックして、変換されたファイルをキャッシュし、Photoshop プラグインですぐに使用できます。
      ​ 「Photoshop プラグインに転送」ボタン ​ {width="60%"}
  4. ファイルキーが必要 ダイアログが表示されたら、プラグインは変換を完了するために Figma ファイル URL を必要とします。 ドキュメントの URL を追加します。

    1. Figma で、キャンバスの右上隅にある「共有」をクリックします。
    2. このファイルを共有 で、「リンクをコピー」をクリックします。
    3. コピーしたリンクを、プラグインダイアログの「Figma ファイル URL」フィールドに貼り付けます。
  5. 送信」をクリックします。 プラグインは、選択されたフレームを Figma で読み取り、JSON ドキュメントに変換します。JSON ドキュメントは、ファイルデータの仲介形式です。
    File Key Required ダイアログ ​ {width="40%"}

  6. Photoshopで、GenStudio プラグインを開いて「読み込み」タブをクリックします。

  7. 次のいずれかの操作を行います。

    • プラグインから」をクリックして、Photoshop プラグインに転送 で変換されたファイルを「キャッシュされたファイル」リストから選択します。または
    • JSON をアップロード」をクリックし、アップロードする JSON ファイルを参照して選択します。
      ​ 「JSON をアップロード」ボタン ​ {width="40%"}
  8. PhotoshopのGenStudio プラグインは、JSON ドキュメントの情報を、開いているPhotoshop ドキュメントに変換します。

  9. 完了」をクリックします。 新しいファイルがPhotoshopで開き、使用する準備が整います。 または、「名前を付けて保存…」をクリックして、ファイルを保存する場所を選択します。
    ​ 完了ボタンダイアログボックス ​ {width="40%"}

世代履歴

プラグインは、各フィールドの変更履歴を保持します。 テンプレートページで、プラグインのサイドバーの 生成履歴 を選択します。

Meta広告に表示される「世代履歴」オプション ​{width="80%" modal="regular"}

トラブルシューティング

生成されたバリエーションでテキストや画像が置き換えられない場合は、次のベストプラクティスとヒントを考慮してください。

マッピングされたフィールド

テキストまたは画像が置き換えられていない場合は、プラグイン UI でフィールドがGenStudio フィールドロールにマッピングされていることを確認してください。 ​ フィールドロールマッピング ​ を参照してください。

使用可能なフォントの確認

生成時に置換を行うには、テキストフィールドのフォントがマシン上で使用可能である必要があります。 ファイルで使用されているすべてのフォントがお使いのマシンで使用できることを確認します(特に、ファイルが他のユーザーのマシンで作成された場合)。

フィールドの役割のサポートを検討

特定のチャネルでは、特定のフィールドでの置換のみがサポートされます。 ​ フィールドの役割のマッピング ​ に対する例外に注意してください。

recommendation-more-help
genstudio-for-performance-marketing-help-user-guide