> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma からデザインをインポート

> Figma フレームのデザインを Kameleoon PBX に直接インポートして、手作業でのコーディングなしに実験バリエーション生成のための視覚入力として使用します。

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

## Figma 連携にアクセス

Figma アイコンは PBX インターフェイスのプロンプトエリアに表示されます。スケッチやモックアップのインポートに使用する **+** アイコンの右側にあります。

<Frame>
  ![Figma icon in PBX interface](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/import-designs-from-figma/figma-icon.png)
</Frame>

PBX インターフェイスの操作に関する詳細は、[プロンプトベースの実験を作成する](./create-a-prompt-based-experiment.md) を参照してください。

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

Kameleoon を初めて Figma にリンクするときは、アクセスを承認する必要があります。

1. プロンプトエリアの **Figma** アイコンをクリックするか、Figma のリンクをプロンプトエリアに貼り付けます。
2. ポップアップで **Sign in to Figma** をクリックします。
3. 新しく開いたタブで、**Allow access** をクリックして "PBX by Kameleoon" アプリを承認します。

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

デザインをプロンプトに挿入するには、PBX で入力として使用したい特定の Figma ノードへのリンクを使用します。

<Frame>
  ![Figma import pop-up](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/import-designs-from-figma/import.png)
</Frame>

1. Figma で、インポートしたいフレームを右クリックします。
2. **Copy as** > **Copy link to selection** を選択します。
3. Kameleoon PBX インターフェイスで、次のいずれかの操作を行います:
   * Figma リンクをプロンプトエリアに直接貼り付ける。
   * **Figma** アイコンをクリックし、**Figma** ポップアップにリンクを貼り付けて、**Insert design** をクリックする。

同じプロンプトに複数のフレームを含めるには、追加のフレームごとにこの手順を繰り返します。プロンプトごとに最大10個のFigmaファイルを追加できます。追加されたすべてのフレームはチャットボックスに表示されます。

<Frame>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/import-designs-from-figma/figma-multi-attach.png" alt="PBXのチャットボックスに表示された複数のFigmaフレーム" width="50%" style={{display: 'block', margin: '0 auto'}} />
</Frame>

追加したフレームにカーソルを合わせると、プレビューの表示、ファイルに関する情報の確認、または**新しいタブで開く**をクリックしてFigmaで開くことができます。

<Frame>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/import-designs-from-figma/figma%20hover.png" alt="PBXでFigmaフレームにカーソルを合わせた状態" width="40%" style={{display: 'block', margin: '0 auto'}} />
</Frame>

<Tip>
  PBX は一般的なファイル URL ではなく、特定の Figma ノード(フレームなど)へのリンクを必要とします。
</Tip>

プロンプトを送信すると、PBXは挿入されたすべてのフレームを視覚入力として使用します。プロンプトからフレームを削除するには、**X** アイコンをクリックします。

## 重要な考慮事項

Figma 連携を使用する際は、次の要件と制限事項を念頭に置いてください:

* **ファイル制限:** プロンプトごとに最大10個のFigmaファイルを追加できます。
* **認証:** Figma アカウントにサインインし、Kameleoon がデザインファイルにアクセスできるように承認する必要があります。
* **レート制限:** Kameleoon Figma 連携は Figma のレート制限に従います。レート制限はサブスクリプションプランによって異なります。