Figmaからページ全体・セクションを取り込む

ルート直下にセクションを整理する

ページのルート直下の第一階層がセクションの基準になります。Hero、特徴、比較、FAQなどを直下に置き、ページと同じ幅で縦に並べます。左右の余白はフレームを細くせず、内部に設けてください。

大きなセクションを上下に重ねず、背景は各セクション内に配置します。境界をまたぐ装飾も分けて整理します。レイヤー名には内容がわかる名前を付けると、取り込み後に探しやすくなります。

全体の取り込みは新規ページを作る

1. FigmaでPtengine Landing Pageプラグインを起動し、アカウントを接続します。
2. 素材や説明を含めず、ページ本体のルートフレームを1つ選びます。
3. ページ全体を書き出し、取り込み用の内容をコピーします。
4. プラグインの案内に沿ってページ一覧へ貼り付け、作成結果を確認します。

セクション数、名前、画像、フォントを確認します。全体の再取り込みは新規ページで、既存の編集は自動で統合されません。

部分変更にはセクション追加を使う

1. Figmaで変更したいセクションを1つ選び、プラグインのセクション書き出しで作成したコードをコピーします。
2. 既存のFigma取り込みページを編集画面で開き、挿入したい位置の直前のセクションを選びます。
3. MacはCommand+V、WindowsはCtrl+Vで貼り付けます。挿入の確認画面が出たら内容を確認し、挿入を実行します。
4. 選択したセクションの後に追加されたことを確認します。未選択の場合はフッターの前、フッターがなければ末尾に入ります。

自動置換ではありません。新しい内容を確認してから旧版を整理します。幅は自動変換されないためPC・モバイルをそろえ、他のページ種別を同じ貼り付け先と考えないでください。

コードに期限や利用状態が表示された場合は、その案内に従います。期限切れ・使用済み・無効などのエラーはFigmaから新しいコードを発行してやり直します。生成中や挿入中は処理の完了を待ち、ページやデバイスを切り替えずに操作してください。

デバイスとフォントを確認する

取り込み時はPCまたはMobileを明示し、デザインとの対応を確認します。フォントにはWebで利用できる読み込み元と必要なウェイトが必要です。デザイナーの端末で見えることと、訪問者に見えることは別です。

取り込み後にフォントチェックを行い、Adobe Fontsは専用入口など適切な方法で接続します。端末からファイルを取り出してアップロードせず、フォントのガイドで対応範囲を確認してください。

分割されない・追加できない場合

全体が1つになる場合は、選択した外側のフレーム、全内容を包む子フレーム、複数セクションをまたぐ背景、上下の重なりを確認します。名前だけを変えず、構造を修正して取り込み直してください。

貼り付け失敗ではコードの期限・使用済み、ページ種別、生成・挿入処理中でないかを確認します。無効なコードはFigmaから再発行し、大きな素材でタイムアウトする場合は範囲を小さくして試します。

取り込み後に動作を設定する

カルーセル、選択肢、ボタンは、取り込み直後は静的要素の場合があります。リンクや部品を設定し、PCとモバイルで操作してください。描かれたフォームだけで送信が記録されるとは限りません。構造確認後は動的コンポーネントを追加し、公開前の確認に進みます。