FigmaのプロトタイプをPDFに埋め込む方法

FigmaのファイルやプロトタイプはFeatPaperのEMBEDタブで、PDF資料のページに埋め込めます。貼り付けたリンクはFigmaの埋め込みプレーヤーに変換されるので、閲覧者はページの上で画面を操作できます。静止画のスクリーンショットでは伝わりにくい動きも、そのまま見せられます。

こんなときに

FeatPaperが受け付けるリンクの形は次のとおりです。

https://www.figma.com/file/...
https://www.figma.com/design/...
https://www.figma.com/proto/...
https://www.figma.com/embed/...

リンクはwww.付きの形で貼り付けてください。 www.のない形は受け付けていません。

文書の「コンテンツ」タブを開く

FeatPaperで対象の文書を開き、「コンテンツ」タブを選びます。編集権限のある管理者だけが操作できます。

「動画・リンクを追加」でエディターを開く

「動画・リンクを追加」カードを押すと、全画面のモーションエディターが開きます。

ページを選んでEMBEDタブを開く

左のサイドバーでFigmaを置きたいページを選び、上部ツールバーのEMBEDタブを押します。

リンクを貼り付けて「追加」を押す

「URLを埋め込む」の入力欄にリンクを貼り付け、「追加」を押します。 iframeのコードを貼り付けても、src="…"の中のリンクだけを取り出して使います。 FeatPaperがFigmaの埋め込みプレーヤー用のリンクに変換します。

位置と大きさを整えて保存する

ドラッグで位置を動かし、四隅のハンドルで大きさを変えます。初期状態はページ幅の50%・16:9で中央に置かれ、比率は固定されていません。必要に応じて「比率固定」や「元の比率」も使えます。仕上がったらSAVE & EXITを押します。

パソコン：共有リンクを開くと、ページの中でそのまま操作できます。
スマートフォン：ぼかしのかかったカードが表示されます。タップすると下からシートが開き、全画面で表示されます。
ダウンロードしたPDF：PDFの中では再生できないため、サービスのロゴやサムネイルに置き換わります。これを押すと閲覧画面の該当ページが開き、そのページの右下にはQRコードも入ります。文書のQR設定をオフにしている場合、QRコードは入りません。

リンクを入れたら「埋め込み URL はサポートされていません。」と表示されます

受け付けていない形のリンクです。上の「リンクを用意する」にある形のリンクか確認してください。

プロトタイプが表示されず、ログイン画面になります

Figma側の共有設定で、閲覧できる人が限られている可能性があります。リンクを知っている全員が閲覧できるよう変更してください。

デザインファイルとプロトタイプのどちらも入れられますか？

はい、どちらも入れられます。 file・design・proto・embedのリンクに対応しています。

スマートフォンではどう見えますか？

ぼかしのかかったカードが表示されます。タップすると下からシートが開き、Figmaを全画面で表示できます。

PDFでダウンロードするとどうなりますか？

PDFの中では再生できないため、ロゴやサムネイルに置き換わります。押すと閲覧画面の該当ページが開き、ページ右下にQRコードも入ります。