Contents
1. 前提条件と全体像
| 項目 | 必要な設定 |
|---|---|
| Notion 側 | 管理者権限で「Figma」インテグレーションを有効化し、チーム全員に閲覧/編集権限を付与する。 |
| Figma／FigJam 側 | 対象ファイル（またはボード）を Anyone with the link can view に公開し、共有リンクを取得する。 |
| 埋め込み URL の形 | https://www.figma.com/embed?... という形式に変換したものを Notion に貼り付ける。 |
この二つの設定が揃うと、Notion 上でデザインプレビューがリアルタイムに表示され、Figma 側の更新も自動的に反映されます。
2. Notion のインテグレーションを有効化する手順
-
設定画面へ
左サイドバー → Settings & members → Integrations を開く。 -
Figma インテグレーションの許可
「Figma」カードの Allow access ボタンをクリックし、表示される認証ダイアログで Notion に Figma の閲覧権限（必要に応じて編集権限）を付与する。 -
チーム全体への展開
「All workspace members」オプションを選択すれば、個別に許可を求める手間が省けます。
3. Figma／FigJam の共有リンク取得と embed URL への変換
3‑1. 共有設定を確認する
- 対象ファイル（または FigJam ボード）を開く。
- 右上の Share アイコン → Copy link を選択。
- ポップアップで Link sharing が Anyone with the link can view になっていることを確認し、必要なら Can edit に変更する。
Figma の公式ヘルプ: https://help.figma.com/hc/en-us/articles/360040450373-Share-files-and-prototypes
3‑2. embed URL を作る
取得した共有リンクのベース部分（/file/ または /project/）を /embed/ に置換し、さらに Notion 用クエリパラメータ embed_host=notion を付与します。
| 例 | 変換前 | 変換後 |
|---|---|---|
| デザインファイル | https://www.figma.com/file/AbC12345/My-Design?node-id=0%3A1 |
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FAbC12345%2FMy-Design%3Fnode-id%3D0%253A1 |
| FigJam ボード | https://www.figma.com/file/XYZ9876/Brainstorm?node-id=5%3A2 |
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FXYZ9876%2FBrainstorm%3Fnode-id%3D5%253A2 |
URL エンコードは自動的に行われるので、変換後の文字列をそのままコピーすれば問題ありません。
4. Notion ページへ埋め込む具体的手順
4‑1. /figma コマンドで簡単埋め込み
- 任意のページにカーソルを置き、スラッシュメニューから /figma と入力。
- 表示された「Figma プレビュー」ブロックに embed URL を貼り付けて Insert をクリック。
- 初回は Notion が Figma へのアクセス許可を求めるので Allow を選択。
4‑2. Embed ブロックから手動埋め込み
/embedと入力し、Embed ブロックを作成。- 同様に embed URL を貼り付けて Enter。
- 「Create preview」ボタンが自動で表示され、クリックするとプレビューが生成されます。
どちらの方法でも内部的に同じ API が呼び出されるため、機能面で差はありません。好みや作業フローに合わせて選んでください。
5. デザイン更新の自動反映とキャッシュ対策
5‑1. 自動リフレッシュの仕組み
Notion は embed URL に対して Cache-Control: no-store ヘッダーを付与し、Figma 側で変更が検知されるたびに即座に再取得します。実際の反映時間は数秒程度ですが、ネットワーク遅延やブラウザキャッシュが残っている場合は若干遅れることがあります。
5‑2. 手動リロードの手順
- 埋め込みブロック右上の … メニューをクリック。
- Refresh（または Reload）を選択すると、現在の URL を再取得し最新状態が表示されます。
5‑3. 「?v=timestamp」パラメータは不要
過去にキャッシュ回避策として ?v=1654321234 のようなタイムスタンプを付与する方法が紹介されましたが、公式ドキュメントにはその効果の根拠が示されていません。実際の HTTP ヘッダーは no‑store が設定されているため、パラメータ追加によるキャッシュバイパスは不要です。代わりに リロード または ブロック削除後の再貼り付け を推奨します。
6. 大量ページへの一括埋め込みテクニック
6‑1. ページテンプレート化
- 埋め込み済みデザインを含むページ（例：
Design Overview）を作成。 - 右上の … → Save as template を選択し、名前を
Figma Embed Templateとする。 - 新規プロジェクトページ作成時にこのテンプレートを指定すれば、埋め込みブロックが自動で配置されます。
6‑2. データベースと Rollup を活用した自動生成
| カラム | 種類・設定 |
|---|---|
| Name | タイトル |
| Figma URL | URL（embed 用） |
| Preview | Formula: if(empty(prop("Figma URL")), "", concat("<iframe src='", prop("Figma URL"), "' style='width:100%;height:400px;'></iframe>")) |
- データベースに各デザインの embed URL を入力すると、Formula カラムが自動で iframe タグを生成。
- ページビューで Preview カラムを表示すれば、一覧上でも即座にプレビューが確認でき、URL を更新するだけで全ページが自動的にリフレッシュされます。
7. トラブルシューティング（よくあるエラーと対処法）
| エラー | 原因 | 解決策 |
|---|---|---|
| リンク切れ / 404 | 共有設定が「Anyone with the link can view」になっていない、または embed URL の /embed/ が抜けている。 |
Figma 側の共有設定を確認し、URL を正しい形式に修正して Notion ブロックをリロードする。 |
| 権限エラー | Notion インテグレーションが閲覧のみで、Figma では編集権限が要求されている等、権限レベルの不一致。 | 両側の権限を同一（閲覧 ↔︎ 閲覧、編集 ↔︎ 編集）に統一する。必要なら Notion のインテグレーション設定で Can edit に変更。 |
| プレビューが更新されない | ブラウザキャッシュが残っているか、Figma 側の保存が完了していない。 | 埋め込みブロックの … → Refresh を実行し、それでも解決しなければ一度ブロックを削除・再作成する。 |
| FigJam がインタラクティブにならない | embed URL の変換ミス、または FigJam ボードが「Viewer only」設定になっている。 | /file/ → /embed/ に正しく置換し、共有設定で Anyone with the link can view を選択する（インタラクション自体は閲覧者でも可能）。 |
FigJam の公式埋め込みガイド: https://help.figma.com/hc/en-us/articles/360040514274-Embed-FigJam-files
8. ベストプラクティスまとめ
| 項目 | 推奨アクション |
|---|---|
| インテグレーション | 管理者が一括で Figma を許可し、全員に閲覧権限を付与。 |
| 共有リンク | 常に Anyone with the link can view に設定し、URL は /embed/ へ置換。 |
| 埋め込み方法 | /figma コマンドか Embed ブロックのどちらでも OK。作業者は好みで選択。 |
| 更新管理 | 自動リフレッシュを信頼し、手動リロードは「キャッシュ疑惑」時のみ実行。 |
| 大量展開 | テンプレート＋データベース（Rollup）で一括管理。URL 変更だけで全ページが更新される。 |
| トラブル回避 | エラー発生時は権限・URL 形式・ブロックリロードの３点を順にチェック。 |
9. 次のステップ
- 本ガイド通りに Notion の Figma インテグレーション と Figma／FigJam の共有設定 を行う。
- 任意のページで
/figmaコマンドを試し、プレビューが正しく表示されるか確認する。 - チーム全体に向けてテンプレートとデータベースの作成手順を共有し、運用フローに組み込む。
以上の手順とポイントを抑えておけば、Notion と Figma／FigJam の連携はスムーズに実装でき、デザインレビューやブレインストーミングが一層効率化します。ぜひプロジェクトで活用してみてください。