AdaptyのFigmaプラグインを使うと、デザインファイルのフレームをフローに変換できます。Figmaでフレームを選択してAdaptyに送信すると、インポートによってドラフトフローが作成され、他のフローと同じようにフロービルダーで編集できます。

インポートの仕組み

このプラグインは選択した Figma フレームを読み取り、Adapty にアップロードします。Adapty はそれらを新しいドラフトフローの画面に変換します。プラグインが Figma ファイルを変更することはなく、Export to Adapty をクリックするまで Figma からデータが送信されることもありません。結果はデザインと同じ見た目になり、基本的なフローとして機能します。ボタンは次の画面に遷移し、クイズの選択肢は選択可能で、ペイウォールはプロダクトをリンクする準備ができています。

手動で調整が必要な箇所については、インポートの制限事項をご覧ください。

始める前に

デザインをインポートするには、以下が必要です：

• Figma デザインファイル: プラグインはデザインファイルでのみ動作します。FigJam ボードや Figma Slides はサポートされていません。
• ファイルへの編集アクセス権: 閲覧のみ可能なファイルではプラグインを実行できません。自分のドラフトであれば問題なく使用できます。
• Adapty 内のアプリ（フロー編集権限付き）: インポートすると、アプリのいずれかの中にフローが作成されます。対象の Adapty アプリ内でフローを編集できることを確認してください。

1. プラグインをインストールする

プラグインをインストールするには：

1. Import to Adapty プラグインページを開きます。
2. Save をクリックします。これでプラグインが Figma の Plugins メニューに追加されます。
   

Figma は公開済みプラグインを自動的にアップデートするため、常に最新バージョンが実行されます。

2. デザインをAdaptyに送信する

スクリーンをAdaptyに送信するには:

1. Figmaで、インポートするフレームを選択します。複数のフレームを一度に選択することで、スクリーンのシーケンス全体を送信できます。
2. Plugins > Import to Adapty に進みます。
3. プラグインが一覧表示する選択内容を確認し、Export to Adapty をクリックします。
4. Open in Adapty をクリックします。

プラグインは選択した要素の名前を表示し、生成されるスクリーンの数をカウントします。続行する前に確認してください。

アップロードが完了すると、プラグインに Done 画面が表示されます。次の手順に進んでください：

1. Adapty にログインします。未認証のブラウザでインポートリンクを開いても、インポートは機能しません。
2. ブラウザでインポートリンクを開きます：
   • Open in Adapty をクリックして、デフォルトのブラウザでインポートを開く
   • Copy link をクリックしてリンクをクリップボードにコピーし、別のブラウザまたはプロファイルでインポートを開始する

フレームが画面になる仕組み

何を選択するかによって、作成される画面の数が決まります。

• 複数のフレーム: 各フレームがそれぞれ1つの画面になります。
• セクション: セクション内の各フレームが1つの画面になります。
• 単一のフレーム: 内部にフレームが含まれていても、フレーム全体が1つの画面になります。内部フレームを個別の画面としてインポートするには、Split into separate screens をオンにしてください。

Layersパネルのフレームの順番（下から上）でスクリーンの順序が決まります。キャンバス上の位置やクリックした順番ではありません。ナビゲーションも同じ順序に従うため、エクスポート前にLayersパネルでフレームを整理するか、ビルダーでスクリーンを並べ替えてください。ページ全体ではなく、個別のフレームまたはセクションを選択してください。そうしないと、そのページ上のすべてのフレームもインポートされてしまいます。

エクスポート設定

エクスポート内容を変更するには、Customize export をクリックしてください:

• Export images: 画像およびフォトアセットを含めます。デフォルトでオンです。
• Image resolution: 画像を 1×、2×、または 3× でエクスポートします。解像度が高いほど鮮明になりますが、ファイルサイズも大きくなります。デフォルトは 2× です。
• Split into separate screens: 選択範囲内の各フレームを個別のスクリーンとしてインポートします。デフォルトでオフです。

3. Adapty でインポートを完了する

Open in Adapty をクリックすると、Adapty ダッシュボードがブラウザの新しいタブで開きます。変換処理は Adapty のサーバー上で実行され、タブには進捗が表示され、完了するとフローが作成されます。

1. このフローが属するアプリを選択してください。選択するとすぐに変換が開始されます。
2. インポートが完了するまでタブを開いたままにしてください（数分かかる場合があります）。タブを閉じてしまった場合は、同じリンクを再度開くと再開できます。

Adapty はデザインを変換し、進行状況を表示します。

変換が完了すると、フローはドラフトとしてフロービルダーで開きます。フロー名は Figma ファイルの名前が付けられ、各画面には説明的な名前が設定されます。デザインの一部を見直す必要がある場合は、Adapty が通知します。

インポートの制限事項

インポートでは、デザインの見た目を再現し、基本的な機能（ナビゲーション、選択可能なグループ、入力フィールド、購入アクション）を接続します。ただし、以下の部分はインポートされません:

• プロダクト: インポートするとプロダクトカードが作成され、購入アクションが追加され、プロダクト変数のプレースホルダーが挿入されます。実際のプロダクトをリンクし、プレースホルダーは自分で置き換える必要があります。購入を設定するを参照してください。
• フォント: インポート時にテキストへのフォントは割り当てられません。フォントを復元するには、フォントファイルをアップロードして、該当するテキストに選択してください。
• 動画: 動画はプレースホルダーとしてエクスポートされます。ビルダーで後から動画を追加してください。
• 非表示レイヤー: 非表示レイヤーはエクスポートされません。

1回のエクスポートには、最大50スクリーンと20 MBのデザインデータが含まれます。ファイルサイズは画像解像度が大きく影響するため、Image resolutionを1×に設定すると大きなエクスポートのサイズを小さくできます。

各エクスポートで1つのフローが生成されます。同じデザインを再度インポートするには、Figmaから再エクスポートしてください。

インポートリンクはエクスポートから1時間有効です。インポートは一度で完了するか、最初からやり直してください。

トラブルシューティング

エクスポートエラー

メッセージ	対処方法
Too many screens to export	選択範囲を50スクリーン以下の小さなバッチに分割してください。
Export data is too large	Image resolution を下げるか、スクリーン内のレイヤー数を減らしてください。
This frame is too large to export	デザインの小さなセクションをエクスポートしてください。
Upload didn’t complete	アップロード中にデザインが変更されました。再度エクスポートしてください。
This import link has expired	インポートリンクの有効期限は1時間です。Figmaからデザインを再度エクスポートしてください。
This design was already imported	そのエクスポートはすでにフローを生成しています。Figmaからデザインを再度エクスポートしてください。

インポート後

表示内容	原因と対処法
画面全体がかすんで見える	背景画像がコンテンツの上に通常の要素として読み込まれています。他の要素の背面に移動してください。
Products パネルが空で、価格が {{figma_import_…}} プレースホルダーになっている	インポート時にプロダクトは紐付けられません。Products パネルでプロダクトを追加し、各プロダクトカードと購入アクションで選択して、プレースホルダーを置き換えてください。
画面の順序がおかしい、またはボタンが誤った画面を開く	画面とナビゲーションは Figma の Layers パネルのフレーム順に従います。ビルダーで画面を並べ替え、各ボタンの Navigate to screen アクションを確認してください。
画像が表示されず、背景だけが残っている	そのレイヤーが動画だった、非表示になっていた、またはシェイプ操作で作成されていました。ビルダーで画像を置き換えてください。
単一選択グループで2つの選択肢が同時に選択された状態に見える	デフォルトオプションの非選択状態に正しいスタイルが適用されていません。スタイルを手動で変更してください。
カウントダウンが固定時間を表示し、カウントダウンしない	カウントダウンがテキストとして読み込まれています。カウントダウンタイマーに置き換えてください。
フォントコントロールに Select font と表示される	そのフォントはビルダーで使用できません。フォントファイルをアップロードして選択してください。

次のステップ

インポートされたフローはドラフト状態であり、ユーザーには公開されていません。ビルダーでフローを改善し、以下の手順に従ってリリースしてください：

1. フローを保存して公開する。
2. 実機でフローをプレビューする。
3. フロープレースメントを作成し、フローを追加する。
4. Adapty SDK v4.0以降を使用してアプリでそのプレースメントを取得する。それより古いSDKバージョンはフローをレンダリングできません。