Figmaのデザインやプロトタイプを埋め込むときは、Notionに貼る共有URLと、Webサイトに貼るiframeコードを使い分けます。埋め込み先のページを閲覧できても、Figma側の共有設定を満たしているとは限りません。貼り付け後は、実際の閲覧者と同じ条件で確認してください。
貼り付け先に合う形式を選ぶ
| 貼り付け先・目的 | 使うもの | 確認すること |
|---|---|---|
| Notionのページ | Figmaの共有URL | 埋め込みブロック、対象ページ・フレーム |
| iframeを使えるWebページ | Get embed codeで取得するコード | HTMLの扱い、表示領域、閲覧権限 |
| 動作を見せるプロトタイプ | プロトタイプの共有・埋め込み | 起点のフローと対象ページ |
| プログラムでプロトタイプを操作 | Embed API | OAuthアプリと許可するorigin |
ここでは公式資料に沿った手順を案内します。個別のNotionページや社内Wikiでの表示確認は、貼り付け先の環境で行ってください。
NotionへFigmaの共有URLを貼る
- Figmaで表示したいページを開きます。必要ならトップレベルのフレームを選択します。
- Shareで共有範囲を確認し、Copy linkでURLをコピーします。
- ブラウザー版Notionで、URLを貼り付けて埋め込みを選ぶか、
/figmaまたは/embedを使います。 - ページ・フレームと、閲覧者が表示できるかを確認します。
Figma公式のNotion案内はブラウザー版を対象にしています。コード全体を通常のテキスト欄へ貼る方法と、共有URLを埋め込みブロックへ渡す方法を混同しないでください。公式：NotionとFigma
Webサイトへiframeコードを貼る
デザイン・FigJamは、対象ファイルを開いてShareから「Get embed code」へ進み、Copyでコードを取得します。コードを取得するにはファイルのcan viewまたはcan edit権限が必要です。埋め込み先では、iframeを扱えるHTML欄や機能を使います。公式：ファイルとプロトタイプの埋め込み
WordPressなどでは、HTMLを保存できる権限やエディターの制限でiframeが削除される場合があります。コードの取得に成功したことと、貼り付け先で保存・表示できることを分けて確認してください。公開ページのURLから表示領域とPC・スマホの幅を確認します。
プロトタイプは、見せるフローを確認する
プロトタイプを含むページでPresentを開き、左サイドバーからフローを選択します。「Share prototype」で対象の共有範囲と権限を確認し、「Get embed code」で取得します。ページには複数フローがある場合があるため、リンク先の開始画面を確認してください。
埋め込みで見られる人の条件
| Figma側の状態 | 確認すること |
|---|---|
| リンク共有 | 現在のリンク共有設定で閲覧できるか |
| 組織内に限定 | 閲覧者が対象組織の条件を満たし、ログインしているか |
| パスワード保護 | 公式では埋め込みからアクセス不可。元ファイルへの案内を検討する |
| ブラウザーが認証情報へのアクセスを制限 | 埋め込み内の案内と、ブラウザーでの認証状態 |
埋め込みのために、意図していない公開範囲へ広げる必要はありません。元ファイルの共有条件に従って表示するか、許可された閲覧者へ通常のリンクを案内します。
表示できない場合の確認順
- 同じ閲覧者・ブラウザーで元の共有URLを開き、Figma側のアクセスを確認します。
- NotionならURLを埋め込みとして扱っているか、Webページならiframeが保存されているか確認します。
- 埋め込み内でログインや認証情報へのアクセスの案内が出ていないか確認します。
- 対象ページ・フロー、表示領域の幅と高さを確認します。
- 更新後の状態を確認する場合は、埋め込みを再表示し、元ファイルと比較します。
Embed Kit 2.0は、ブラウザーがサードパーティCookieを利用できない場合にStorage Access APIを使う設計です。一律にブラウザーの保護機能を無効化するのではなく、公式の埋め込み・認証の案内で接続状態を確認してください。公式：Embed Kit 2.0、公式：埋め込みのトラブルシューティング
開発者向け：Embed Kit 2.0とEmbed API
Embed Kit 2.0はembed.figma.comを使う埋め込みです。デザイン・FigJam・プロトタイプ・Slides等では対象形式に合うURLを使用します。URLを手作業で書き換える前に、取得したコードと公式の埋め込み資料を確認してください。
Embed APIは埋め込んだプロトタイプへのメッセージとイベントを扱います。フレーム移動や再スタート、読み込み等のイベントに連携する場合は、OAuthアプリに許可するoriginを登録し、埋め込みURLへclient-idを設定します。共有URLをNotionへ貼るだけの操作とは別の開発手順です。公式：Embed API
閲覧用の埋め込みと、Figmaのデータを取得・変更するAPIの違いはREST API・Plugin APIの比較で確認できます。