ナレッジベース

Page Builder Sandwich を使用して Figma フレームを WordPress にインポートする

ご自身の Figma アカウントを連携して、フレームを編集可能なページに変換できます。オートレイアウト、テキストスタイル、カラー、画像が含まれます。

Page Builder Sandwich Pro は、Figma フレームを編集可能な WordPress ページに変換します。サイトはお客様が作成したパーソナルアクセストークンを使用し、お客様自身の Figma アカウントで Figma と通信します。デザインやトークンが Zinn Digital®を通過することはありません。

Figma を接続する (管理者として一度だけ実行)

Figma で、設定 → セキュリティ → パーソナルアクセストークンを開き、ファイルコンテンツ: 読み取りスコープを持つトークンを生成します。
wp-admin でPage Builder Sandwich → 他のビルダーおよび Figma からインポート → Figma からインポートに移動し、トークンを貼り付けてFigma を接続を押します。

トークンは Figma で検証され、暗号化されて保存され、二度と表示されません (末尾の4文字のみ表示されます)。切断すると削除されます。コマンドラインの場合: echo <token> | wp pbs importers figma-token set (トークンは標準入力から読み取られるため、シェルの履歴には保存されません)。

フレームをインポートする

Figma で1つのフレームをクリックし、右クリックしてコピー/貼り付け → 選択範囲のリンクをコピーを選択します。
そのリンクをFigma フレームリンクに貼り付け、フレームをインポートを押します。フレームの名前が付けられた新しい下書きページが作成されます。

デザインの変換方法

オートレイアウトは、同じ間隔、パディング、配置を持つ flex の行と列 (グリッドオートレイアウトの場合はグリッド) に変換されます。自由に配置されたフレームは読み取り順に積み重ねられ、レイヤーが重なっている場合はレポートにその旨が記載されます。
全幅の帯で構成されたページフレームは、帯ごとに1つの全幅セクションになります。
テキストは、フォント、サイズ、ウェイト、行の高さ、文字間隔、大文字/小文字、配置、色を保持します。大きなテキストは見出しになり、太字、斜体、リンクは保持されます。
塗り、線、角の半径、ドロップシャドウはグラデーションを含めて引き継がれます。
画像はメディアライブラリにコピーされ、ベクターアート (アイコン、イラスト) は Figma によってレンダリングされ、画像としてコピーされます (1回のインポートにつき最大200個の描画)。同じフレームを再度インポートすると、そのコピーが再利用されます。
塗りと角丸があり、短いラベルが1つある小さなフレーム (または「button」という名前のレイヤー) は、ボタンブロックになります。

Figma フレームは単一の幅で描画されるため、スマートフォンでは固定幅アイテムの行が1列に積み重なります。

コマンドラインから: wp pbs importers figma <frame link>。