NotionとFigmaを連携してできる4つのこと | 方法や注意すべきポイントを解説
「NotionとFigmaを連携させたいけれど、具体的に何ができるかわからない」
「連携の手順や、気をつけるべき点を知りたい」
上記のような悩みを抱えている方は多いのではないでしょうか。
NotionとFigmaは、どちらもプロジェクト管理やデザイン制作のツールであり、連携させるとチームの作業効率を大きく向上させる可能性があります。
本記事では、NotionとFigmaを連携して実現できることや連携手順、連携時に注意すべき3つのポイントなどを解説します。
NotionとFigmaを有効活用したい方は、ぜひご参考ください。
なお、合同会社Metooでは、本質的な課題の可視化・分析を行った上で、組織に関わる情報（ヒト・モノ・カネ）が円滑に回る仕組みをNotionで構築するサポートを展開しています。Notionの導入やFigmaとの連携でお悩みの場合、ぜひお気軽にご相談ください。
また、以下の動画は1時間ありますが、Notionの使い方を日本一分かりやすく解説しています。Notionを使いこなせるようになりたい方は、ぜひご覧ください。
Contents
NotionとFigmaを連携してできる4つのこと
NotionとFigmaを連携してできることは、主に以下の4つです。
- デザインの共有が簡単にできる
- デザインや関連情報を一元管理できる
- Figmaのデザイン変更がNotionにリアルタイムで反映される
- 画像差し替えなどの作業を効率化できる
これらにより、チーム内での情報共有が円滑になり、デザイン修正の手間も削減されます。
ここでは、それぞれの項目を詳しく見ていきましょう。
デザインの共有が簡単にできる
NotionとFigmaを連携させることで、Figmaのアカウントを持っていないメンバーや、デザインツールを使い慣れていない方でも、Notion上でデザインをプレビューできます。
さらに、Notionのページ上で、埋め込まれたFigmaのデザインに対してコメントを残すことが可能です。
フィードバックや修正指示がNotionの1箇所に集約されるため、デザイナーと他のメンバーとのやり取りがスムーズになります。
デザインや関連情報を一元管理できる
プロジェクトを進める際、デザインデータはFigmaや仕様書、議事録、タスクリストはNotion、と情報が別々のツールに保存されがちです。また、情報が分散してしまうと、必要なファイルを探すのに時間がかかってしまいます。
しかし、Fimgaと連携することで、Notionで作成したプロジェクトの管理ページにFigmaのデザインデータを直接埋め込み、一元化させることが可能です。
デザインと仕様書のような関連情報が1つのページにまとまり、チーム内の誰もが最新の情報にアクセスしやすくなるため、情報の検索性が向上するでしょう。
Figmaのデザイン変更がNotionにリアルタイムで反映される
NotionとFimgaを連携することで、デザインを修正するごとに、新しい画像として書き出して、Notionに貼り直すといった面倒な作業は一切必要ありません。
Figmaでデザインを更新すると、Notionを見ている他のメンバーの画面にも、自動で最新のデザインが表示されます。そのため、チームメンバーは常に最新版のデザインを確認しながら、フィードバックやレビューが可能です。
さらに、修正の確認漏れや、古いデザインを元にした議論を防ぐことにもつながります。
画像差し替えなどの作業を効率化できる
FigmaのデザインがNotionに反映されるため、デザインの一部を修正した場合でも、Notion側で画像の差し替え作業を行う必要がありません。
例えば、WebサイトのバナーデザインをNotionで管理している場合、Figma側でデザインを更新するだけで、Notion上の表示も自動で切り替わります。また、デザインの修正や、新しく作成したデザインをすぐにチームへ共有できます。
その結果、デザインの更新作業にかかる手間を削減し、デザイナーが本来のデザイン業務に集中する時間を生み出すことが可能です。
Figmaを利用する4つのメリット
Figmaを利用するメリットは、主に以下の4つです。
- 直感的なUIで扱いやすい
- 複数人で同時に作業ができる
- 作業中のファイルはクラウドに自動保存される
- 無料で利用でき動作が軽い
上記の特徴が、Notionと組み合わせた際の作業効率化をさらに後押しします。
これからNotionとFigmaを連携させる場合は、Figma自体のメリットも理解しておきましょう。
直感的なUIで扱いやすい
Figmaは、直感的なUI（ユーザーインターフェース、画面の表示や操作方法）で扱いやすいことが大きなメリットです。
デザインツールの使用経験がない初心者でも、操作をすぐに理解しやすいように設計されています。
例えば、要素を「ドラッグ＆ドロップ」や「ショートカットキー」による操作が可能であるため、学習にかかる時間が短く済みます。
そのため、デザイナー以外の職種の人でも、簡単な確認や修正であれば対応しやすいツールです。
複数人で同時に作業ができる
Figmaはブラウザ上で動作するツールであるため、インターネット環境さえあれば場所や使用するパソコンを選ばずにアクセスできます。また、チームメンバーが同じデザインファイルに入り、リアルタイムで共同編集が可能です。
誰かが編集した内容は、他のメンバーの画面にも反映されるため、オンライン会議をしながら、その場でデザインの修正が可能です。
作業中のファイルはクラウドに自動保存される
Figmaで作業中のファイルは、すべてクラウド上に自動で保存されます 。そのため、作業の途中で「保存ボタン」を押す必要は一切ありません。
編集中にパソコンがフリーズしたり、通信エラーが発生したりしても、作業内容が失われる心配がありません。さらに、従来のインストール型ソフトで起こりがちだった「保存忘れによって、数時間の作業をやり直す」などの事態を避けられます。
Figmaは、自動で保存される安心感があるため、デザイナーはデザイン編集の作業そのものに集中することが可能です。
無料で利用でき動作が軽い
Figmaは無料プランであっても、デザインの編集、共有、共同作業といった中心的な機能の多くが利用可能です。また、高品質なデザイン編集を、コストをかけずに始められます。
Figmaは動作が非常に軽快なことがメリットとして挙げられ、ブラウザ上で動作するにもかかわらず、ページの読み込みやファイルの操作が重くなりにくいツールです。
そのため、複雑なデザインファイルや、多くのページを扱う場合でも、スムーズに作業を進められます。
NotionとFigmaを連携する方法【4STEP】
NotionとFigmaを連携する方法は、主に以下の4ステップです。
- Figmaのファイルのリンクを取得する
- Notionのページに取得したリンクを貼り付ける
- Figmaの承認画面で「アクセスを許可」をクリックする
- ブラウザのダイアログからNotionに戻る
ここでは、具体的な手順をステップバイステップで解説します。上記の手順に沿って進めれば連携が可能です。
1. Figmaのファイルのリンクを取得する
NotionとFigmaを連携させる際は、主に以下の手順で進めていきます。
- 最初に連携させたいFigmaのファイルを開き、Figmaで共有用のリンクを取得
- Figmaの画面右上にある「Share（共有）」ボタンをクリック
- 共有設定の画面が表示されたら、「Copy link（リンクをコピー）」を選択
- 連携用のリンクの取得できたら完了
この時、リンクの共有設定が「Anyone with the link can view（リンクを知っている全員が閲覧可）」になっているか確認しましょう 。もし「Only people invited to this file（招待された人のみ）」になっている場合は、設定を変更しておくことがおすすめです。
2. Notionのページに取得したリンクを貼り付ける
続いて、Figmaのデザインを埋め込みたいNotionのページを開きます。そして、先ほどFigmaで取得したリンクをページ上に貼り付けましょう。
Notionにリンクを貼り付けると、Notionが自動的にFigmaのリンクであると検出します。すると、以下3つの選択肢が提示されます。
- 「Paste as link（リンクとして表示）」
- 「Paste as preview（プレビューとして表示）」
- 「Paste as embed（埋め込みとして表示）」
ここで「Paste as embed（埋め込みとして表示）」を選択すると、Notionのページ上でFigmaのデザインを直接プレビューすることが可能です。
3. Figmaの承認画面で「アクセスを許可」をクリックする
NotionにFigmaのリンクを初めて埋め込む際には、Figmaの承認画面が表示されます。
画面には、「Notion wants to access your Figma account（NotionがあなたのFigmaアカウントへのアクセスを求めています）」といった内容が表示されます。案内に従い、「Allow access（アクセスを許可）」と書かれたボタンをクリックしましょう。
この操作によって、NotionがFigmaのデータを正しく取得できるようになります。ただ、この承認作業が必要なのは、Notionのアカウントごとの最初の連携時のみです。
4. ブラウザのダイアログからNotionに戻る
Figmaでのアクセス許可が完了すると、ブラウザが自動的にNotionのページへ戻ります。
場合によっては、ブラウザのダイアログ（確認画面）で「Notionを開きますか？」といった確認を求められる場合があるため、その際は許可をしましょう。
Notionのページに戻り、先ほどリンクを貼り付けたエリアにFigmaのデザインが正しく表示されていれば、連携は成功です。
最後に、Figmaのデザインを拡大・縮小したり、ページを移動したりする操作がNotion上で可能になっているか、確認してみましょう。
NotionとFigmaを連携する際に注意すべき3つのポイント
NotionとFigmaを連携する際に注意すべきポイントは、主に以下の3つです。
- Notionのバージョンによっては機能制限がある
- 大規模なプロジェクトでは管理が複雑になる
- クラウド上でエラーが起きると連携が適切に動作しない場合がある
上記の注意点を事前に理解しておかなければ、期待していた通りに動作しない場合があります。そのため、あらかじめ対策を把握しておきましょう。
Notionのバージョンによっては機能制限がある
NotionとFigmaを連携させる際は、Notionのバージョンによって機能制限があるため、アップデートしておくことが大切です。
なお、パソコンにインストールして使用するデスクトップアプリ版のNotionでは、埋め込んだFigmaの一部の機能が正しく動作しない場合があるため、Google Chromeなどのブラウザ版Notionでページを開き直し、プレビューで動作を確認する必要があります。
また、利用しているNotionがフリープランの場合、連携機能や一度に埋め込める数に制限が設けられている可能性があります。そのため、本格的に活用する前に、自分の利用環境で問題なく動作するかをテストしておくことがおすすめです。
大規模なプロジェクトでは管理が複雑になる
プロジェクトが大きくなるにつれて、Notionに埋め込むFigmaのファイルやリンクの数が膨大になります。
その結果、「どのリンクが最新版のデザインなのか」「このページに埋め込まれているFigmaファイルはどれか」などの情報がわからなくなる状況が発生しがちです。さらに、作成したデザインの管理が難しくなるため、あらかじめファイル名の付け方にチーム内でのルールを設けたり、古くなったリンクは定期的に削除したりする対策を講じましょう。
また、Notionのデータベース機能を活用し、リンクとステータスを一覧で管理すると、データを管理しやすくなります。
クラウド上でエラーが起きると連携が適切に動作しない場合がある
NotionとFigmaは、どちらもクラウド上で提供されているサービスです。そのため、NotionかFigmaのどちらかのサービスでシステムエラーや通信障害が発生すると、埋め込んだデザインが正しく表示されない、更新が反映されないなどの問題が起きます。
これはツールの連携において避けられないリスクの1つです。
万が一に備え、特に重要なデザインやファイルは、ローカル環境（自分のPC）にもバックアップ（予備のデータ）を残しておくことをおすすめします。また、オフラインでも作業や確認ができるように準備しておくと安心です。
NotionとFigmaの連携でお悩みなら「合同会社Metoo」にご相談ください
本記事では、NotionとFigmaを連携してできること、連携方法、そして注意すべきポイントについて解説しました。
NotionとFigmaを連携させることで、デザインの共有やプロジェクト情報の一元管理が簡単になります。また、Figmaのデザイン修正がリアルタイムでNotionに反映されるため、作業の効率化にも大きく貢献することでしょう。
ただ、Notionのバージョンによる機能制限や、クラウドサービス特有のエラーには、あらかじめ動作確認やプラン変更などの対策を行うことが大切です。
なお、合同会社Metooでは、本質的な課題の可視化・分析を行った上で、組織に関わる情報（ヒト・モノ・カネ）が円滑に回る仕組みをNotionで構築するサポートを展開しています。Notionの導入やFigmaとの連携でお悩みの場合、ぜひお気軽にご相談ください。