NotionとFigmaを連携してできる4つのこと | 方法や注意すべきポイントを解説

「NotionにFigmaのデザインを貼って、チームで確認したい」「貼ってみたけれど、デスクトップアプリだと表示されない」

デザインの依頼や確認のやり取りをNotionで進めたいとき、Figmaとの連携は役立つ機能です。一方で、貼り方の種類や、誰に見えるのかの条件が分かりにくく、つまずきやすい機能でもあります。

結論から言うと、FigmaのリンクをNotionに「プレビュー」として貼ると、デザインがページの中に表示され、Figmaで直した内容も自動で反映されます。ただし、表示されるのはブラウザ版のNotionで、見られる人はFigmaのファイルの共有設定にも左右されます。

本記事では、連携してできる4つのこと、リンクを貼る3つの形式の違い、連携の4ステップ、注意すべき3つのポイント、Metooの支援現場でのデザイン依頼の進め方を解説します（2026年10月時点の情報です）。

なお、合同会社Metooでは、デザインの依頼や案件の管理など、業務の情報をNotionに集め、チームで使われ続ける状態まで定着させる支援を行っています。

Notion導入・定着支援（Purpose Engine）を見る

Notionを初めて使う方に向けて、基本の使い方を動画でも解説しています。あわせてご覧ください。

     

NotionとFigmaを連携してできる4つのこと

NotionとFigmaを連携すると、Figmaのデザインを、Notionのページの中でそのまま見られるようになります。Figmaの公式ヘルプで紹介されている使い方をもとに、できることを4つに分けて説明します。

Figmaを開かなくてもNotionの中でデザインを見られる

Figmaの公式ヘルプは、Notionへの埋め込みを、Figmaにアクセスできないチームメンバーとデザインを共有する方法として紹介しています。デザインを見る人は、Figmaのファイルを探して開かなくても、ふだん使っているNotionのページの中でデザインを確認できます。

Figmaのファイルを開くと、Figmaの画面でデザインを見ることになります。Notionに埋め込んでおけば、議事録や依頼の文章と同じページの中でデザインを見られます。ただし、Figmaにログインしていない人は、埋め込みを見るときにログインを求められる場合があり、実際に誰が見られるかはFigmaのファイルの共有設定にも左右されます。

Figmaでの変更が自動でNotionに反映される

Notionに貼ったプレビューはFigmaと自動で同期され、Figmaで直した最新の状態がNotionにも表示されます（Figma公式ヘルプ）。Notionの公式ヘルプでも、埋め込みの元に変更があった場合、その変更はNotionにも表示されると案内されています。

そのため、デザインを直すたびに画像を書き出して、Notionに貼り直す必要はありません。Notionのページで見えるデザインは、Figmaのファイルの今の状態です。

議事録や仕様書とデザインを1つのページにまとめられる

Figmaの公式ヘルプは、議事録、プロジェクトの資料、デザインの仕様書の中でFigmaのファイルを見る使い方を挙げています。Notionのページには、文章、チェックリスト、表、データベースなどと一緒に、Figmaのデザインを並べて置けます。

例えば、Webサイトの改修のページに、目的や要件の文章、関係者とのやり取り、Figmaのデザインをまとめておけば、デザインと、その目的や要件の文章を、同じページの中で見られます。

デザインへの意見をNotionのコメントに集められる

Figmaの公式ヘルプは、Notionへの埋め込みの用途として、共同作業者からデザインへの意見を集めることも挙げています。Notionでは、ブロックにカーソルを合わせて表示される「💬」や、「⋮⋮」のメニューの「コメント」から、ブロックごとにコメントを付けられます。

埋め込んだFigmaもNotionのブロックの1つなので、そのブロックにコメントを付けて、デザインについての意見を残せます。コメントには「@」で相手を指定して知らせることもできます。

Figmaのリンクを貼る3つの形式の違い

FigmaのリンクをNotionに貼るときは、デザインそのものを見せたいなら「プレビュー」、文章の中でファイルを示すなら「メンション」かリンクを選びます。Figmaの公式ヘルプが案内している3つの形式は次のとおりです（2026年10月時点）。

形式	Notionでの見え方	向いている場面
プレビュー （プレビューとして貼り付け）	デザインがページの中に表示される	確認してほしいデザインを見せる
メンション （メンションとして貼り付け）	ファイルを示す、装飾されたリンクになる	文章の途中でファイルを示す
リンク	ふつうのURLとして表示される	参照先を残すだけでよい

どれを選ぶかは、そのページを開いた人に、まず何を見てほしいかで決めます。デザインの確認が目的のページならプレビュー、議事録のように文章が主役で、Figmaは参照先として示せばよいページならメンションかリンクです。

「/figma」などのコマンドで埋め込む方法は、連携の手順のSTEP2で説明します。

参考：Notion and Figma（Figma Learn）／リンクプレビュー（Notionヘルプセンター）

NotionとFigmaを連携する方法【4STEP】

NotionとFigmaの連携に、事前の特別な設定はいりません。Figmaでリンクをコピーし、Notionに貼り付け、初回だけFigmaとの接続を許可するという流れです。手順はFigmaとNotionの公式ヘルプにもとづいています（2026年10月時点）。

1. Figmaで、見せたいフレームのリンクをコピーする

Figmaでファイルを開き、Notionに表示したいページや最上位のフレーム（1画面分のまとまり）を選びます（選ばずにファイル全体のリンクにすることもできます）。右側のサイドバーにある「共有」（英語表示では「Share」）をクリックし、「リンクをコピー」（「Copy link」）を選びます。

フレームを選んだ状態でコピーすると、そのフレームを開くリンクになります。フレームが別のフレームの中にある場合は、外側の親のフレームへのリンクになります。1つのファイルに多くの画面がある場合は、確認してほしいフレームを選んでからコピーすると、見る人が目的の画面を探さずに済みます。

2. Notionのページに貼り付ける

Figmaのデザインを置きたいNotionのページを開き、コピーしたリンクを貼り付けます。貼り付けると形式を選ぶメニューが表示されるので、「プレビューとして貼り付け」を選ぶと、デザインがページの中に表示されます。

先に「/figma」または「/embed」と入力して埋め込みブロックを作り、そこへリンクを貼り付ける方法でも、デザインをページに置けます（Figma公式ヘルプ）。置いたブロックは、左に表示される「⋮⋮」をつかんで、ページの中の好きな位置へ動かせます。ドラッグして横に並べれば、仕様の文章とデザインを左右に並べることもできます（Notion公式ヘルプ）。

3. 初回はFigmaとの接続を許可する

Notionで初めてFigmaのリンクを貼ると、Figmaへの接続を求めるボタンが表示されます。ボタンをクリックするとブラウザの画面に移り、NotionでFigmaの内容を表示するための認証と許可を求められます。Figmaにログインしたうえで、許可してください。Figmaの公式ヘルプでも、ファイルにアクセスするために、NotionがFigmaでの認証を求める場合があると案内されています。

認証が終わると、Notionにデザインのプレビューが表示されます。認証が求められるのは、そのアプリのリンクを初めて貼るときです。

4. ブラウザ版のNotionで表示を確かめる

貼り付けたら、ブラウザ版のNotionでページを開き、デザインが表示されているかを確かめます（使える環境は注意点の章で説明します）。表示されれば、連携は完了です。

表示されないときは、Figmaにログインしているかを確認します。Figmaの公式ヘルプによると、初めて埋め込みを表示するときに、Cookieの使用の許可を求められることがあり、許可しないと埋め込みを読み込めません。Figmaにログインしていない場合は、ログインを求められます。ファイルを見る権限がない場合は「File not found」などの表示が出るため、ファイルの持ち主に共有を頼みます。

参考：Interact with embeds（Figma Learn）

NotionとFigmaを連携する際に注意すべき3つのポイント

注意したいのは、ブラウザ版のNotionでしか表示されないこと、見られる人がFigmaの共有設定で決まること、埋め込みは見るためのもので編集はできないことの3つです。

ブラウザ版のNotionでしか表示されない

Figmaの公式ヘルプでは、埋め込んだFigmaのファイルはブラウザで動くアプリでのみ使え、Notionで使う場合はデスクトップアプリではなく、ブラウザ版のNotionを使う必要があると案内されています。Notionの公式ヘルプでも、外部サイトへのログインが必要な埋め込みは、デスクトップアプリやモバイルアプリでは機能しないとされています。

デスクトップアプリで開いた場合、ページにFigmaのデザインは表示されません。ふだんデスクトップアプリを使っている人に確認を頼むときは、ブラウザ版で開く必要があることを伝えておきます。

見られる人は、Figmaの共有設定に左右される

Figmaの埋め込みは、Figmaのファイルの共有設定に従います。Figmaの「共有」の画面では、ファイルにアクセスできる人を「全員」「招待されたユーザーのみ」「組織内のユーザー」（組織向けのプランの場合）などから選び、権限を「閲覧」か「編集」で設定します。組織内だけで共有しているファイルは、見る人がFigmaにログインしている必要があります。リンクでの共有をオフにしたファイルは、閲覧か編集の権限を持つ人しか見られません。

一方で、Notionの公式ヘルプには、接続したアプリを認証すると、Notionのページを見られる人は誰でも、プレビューとして貼った内容を見られるという案内もあります。公式ヘルプの説明だけでは、Figmaの共有の制限がNotionのプレビューにどう適用されるかを確認できません。Metooの実例では、FigmaのファイルをWeb上で公開していれば、Notionのページを共有した相手の側でもデザインが表示されています。貼る前にFigmaの共有設定を確認し、共有先で表示を確かめてください。社外の人にNotionのページを共有する方法は、Notionでページを共有する方法で解説しています。

埋め込みは閲覧専用で、編集はFigmaで行う

Figmaの公式ヘルプによると、ファイルの埋め込みは閲覧専用です。埋め込みの中でレイヤーを選んだり、デザインを直したりはできません。埋め込みの中でできるのは、表示範囲の移動、拡大・縮小、ページの切り替え、全画面表示、最終更新の日時の確認などです。

デザインを直すときは、埋め込みに表示されているファイル名をクリックして、Figmaでファイルを開きます。Notionの側には確認の結果や修正の依頼を書き、修正そのものはFigmaで行う、という流れになります。修正を頼まれた人がFigmaを開けるよう、編集する人にはFigma側で編集の権限を付けておきます。

参考：Embed files and prototypes（Figma Learn）／埋め込み、ブックマーク、リンクメンション（Notionヘルプセンター）

Metooの支援現場で：デザイン依頼はNotionの1ページにまとめる

Metoo代表の山田自身も、サムネイルのデザインをデザイナーに依頼するときに、NotionとFigmaを組み合わせています。依頼のページはNotionで共有し、そこにFigmaを埋め込み、修正の指示もそのページに書くという形です。

依頼ページにFigmaを埋め込み、修正の指示はNotionに書く

サムネイルの依頼のページはNotionで作り、デザイナーと共有しています。作ってもらったデザインは、そのページにFigmaを埋め込み、Figmaの上で確認します。そして「ここをこう直してほしい」という修正の指示は、Figmaではなく、そのNotionのページに書きます。

こうしておくと、依頼の内容、作ってもらったデザイン、修正の指示が1つのページにそろいます。依頼した側もデザイナーも、そのページを開けば、何を頼まれていて、どのデザインのどこを直すのかを確かめられます。そのNotionのページで、情報が一元化されている状態を作っています。

何を埋め込むかより、「ここを見れば分かる」状態を作る

どのページに何を埋め込むかは、会社ごとの実態に合わせて変えてかまいません。Metooが大事にしているのは、いろいろなツールを行き来しなくても、ここを見れば基本的に情報がまとまっている、という状態を作ることです。支援先には、このサムネイルの依頼の形を1つの例として伝え、それをもとに業務に合う形を勧めています。

ツールの使い分けも、同じ考え方で決めます。Metooでは、機能に大きな差がない場合、情報がNotionにたまり、ほかの情報と関連づけられるほうを選びます。依頼をNotionのフォームで受け付ける方法は、Notionのフォーム機能の使い方で解説しています。

NotionとFigmaの連携に関するよくある質問

Q. NotionやFigmaの無料プランでも連携できますか？

できます。Notionの料金ページでは、「埋め込みとリンクプレビュー」はフリープランを含むすべてのプランで使える機能になっています。Figmaの公式ヘルプでも、埋め込みはどのチーム・プランでも使えると案内されています（2026年10月時点）。

Q. プロトタイプやFigJamのボードも埋め込めますか？

埋め込めます。Figmaの公式ヘルプでは、Figma Designのファイル、FigJamのファイル、プロトタイプを埋め込めると案内されています。プロトタイプの埋め込みでは、プレゼンテーション表示と同じように、画面の中のボタンを押して動きを確かめられます。

Q. Figma以外のデザインツールも同じように貼れますか？

ツールによって貼れます。Notionの公式ヘルプでは、Notionに埋め込める一般的なアプリとして、Canva、Sketch、Framer、Miroなどが挙げられています（2026年10月時点）。表示のされ方や条件はツールごとに違うため、各ツールの公式ヘルプで確かめてください。ほかの連携先は、Notionと連携できる便利なツールで紹介しています。

Q. 接続したFigmaのアカウントを切り替えたり、解除したりするには？

Notionの「設定」から「コネクション」を開くと、リンクプレビューや埋め込みで認証したアプリが表示されます。ここから「別のアカウントを接続」を選んで追加したり、接続済みのアカウントを「接続解除」したりできます。

NotionとFigmaの連携でお悩みなら「合同会社Metoo」にご相談ください

NotionとFigmaの連携の要点をまとめます。

• Figmaのリンクを「プレビュー」として貼ると、デザインがNotionの中に表示され、変更も自動で反映される
• 貼り方はプレビュー・メンション・リンクの3つ。ページの目的で選ぶ
• Figmaの埋め込みはブラウザ版のNotionで使う
• 見られる人はFigmaの共有設定に左右される。見る人の環境で表示を確かめる
• 埋め込みは閲覧専用で、デザインの編集はFigmaで行う

合同会社Metooでは、デザインの依頼や案件の管理など、業務の流れに合わせたNotionの設計から、使い始めたあとの改善までを支援しています。自社に合う形を相談したい方は、サービスと料金をご覧のうえ、お気軽にご相談ください。