メインコンテンツへスキップ
Figma のデザインを Kameleoon に直接インポートして、プロンプトベースの実験で使用できます。この Figma-to-prompt 連携により、手動コーディングなしで Figma フレームを機能的なウェブサイト要素に変換できます。1つのプロンプトに複数の Figma フレームを参照でき、PBX は各フレームのレイアウトと余白をピクセル単位で正確に一致するバリエーションを生成します。画像、アイコン、埋め込みメディアなどのデザインアセットも含みます。

Figma 連携にアクセス

Figma アイコンは PBX インターフェイスのプロンプトエリアに表示されます。スケッチやモックアップのインポートに使用する + アイコンの右側にあります。
Figma icon in PBX interface
PBX インターフェイスの操作に関する詳細は、プロンプトベースの実験を作成する を参照してください。

Figma アカウントをリンクする

Kameleoon を初めて Figma にリンクするときは、アクセスを承認する必要があります。
  1. プロンプトエリアの Figma アイコンをクリックするか、Figma のリンクをプロンプトエリアに貼り付けます。
  2. ポップアップで Sign in to Figma をクリックします。
  3. 新しく開いたタブで、Allow access をクリックして “PBX by Kameleoon” アプリを承認します。

デザインをプロンプトに挿入する

デザインをプロンプトに挿入するには、PBX で入力として使用したい特定の Figma ノードへのリンクを使用します。
Figma import pop-up
  1. Figma で、インポートしたいフレームを右クリックします。
  2. Copy as > Copy link to selection を選択します。
  3. Kameleoon PBX インターフェイスで、次のいずれかの操作を行います:
    • Figma リンクをプロンプトエリアに直接貼り付ける。
    • Figma アイコンをクリックし、Figma ポップアップにリンクを貼り付けて、Insert design をクリックする。
同じプロンプトに複数のフレームを含めるには、追加のフレームごとにこの手順を繰り返します。
PBX は一般的なファイル URL ではなく、特定の Figma ノード(フレームなど)へのリンクを必要とします。
デザインを挿入すると、Figma フレームが PBX プロンプティングウィンドウの上部に表示され、プロンプトを送信すると PBX がそれを視覚入力として使用します。プロンプトからフレームを削除するには、X アイコンをクリックします。

重要な考慮事項

Figma 連携を使用する際は、次の要件と制限事項を念頭に置いてください:
  • 認証: Figma アカウントにサインインし、Kameleoon がデザインファイルにアクセスできるように承認する必要があります。
  • レート制限: Kameleoon Figma 連携は Figma が適用するレート制限に従います。これはサブスクリプションプランのシートによって異なります。