notion-figma-figjam-integration
公開日: 2023.01.06  | 更新日: 2023.01.06

NotionでFigma/FigJamを連携する方法

今回は、NotionにFigma/FigJamを連携する方法を紹介します。連携することで、Notionのページ内にFigma/FigJamのファイルをプレビューしたり、iframeの埋め込みが表示できるようになります。

なお、この記事ではmacOSのデスクトップ版Notionアプリでの設定方法になります。

この記事のターゲット

  • NotionでFigma/FigJamの連携をしたい方

  • NotionのページにFigma/FigJamのファイルのプレビューや埋め込みを表示したい方

  • NotionでFigma/FigJamの連携を解除したい方


NotionにFigma/FigJamの連携を設定する

NotionでFigma/FigJamのファイルのプレビューを表示させる方法と合わせて、連携の設定方法を2ステップで説明します。

1. Notionで表示したいFigma/FigJamのファイルのリンク(URL)を取得する

まず、Notionのページにプレビューを表示させたいFigma/FigJamのリンク(URL)を取得します。以下は、セクションのリンクを直接コピーした例です。

notion-figma1

以下のように、ファイル全体のリンクを取得しても問題ありません。

notion-figma6

2. Notionのページに取得したFigma/Figmaのファイルのリンク(URL)を貼り付ける

先ほど取得したFigma/FigJamのファイルのリンク(URL)をNotionのページに貼り付けます。

すると、ポップアップで以下のメニューが表示されるので、「プレビューとして貼り付け」を選択します。この時、表示されるバナーの右側に「Figmaに接続して更新」というボタンが表示されるので、クリックしてください。

notion-figma2

すると、ブラウザが起動しFigmaでNotionを連携するための承認画面が表示されるので、内容を確認して「アクセスを許可」をクリックします。

notion-figma3

ブラウザのダイアログでアプリに戻る旨の確認が表示されるので「Notionを開く」をクリックすると、Notionアプリに戻ります。

notion-figma4

これで、連携は完了です。以下はFigJamのセクションのリンクをコピーした例です。ファイル内のセクション領域のみプレビューで表示されています。

notion-figma5

ファイル全体のリンクを挿入すると、ファイル全体に存在するオブジェクト全体をプレビューしますが、横幅がNotionのページ幅に固定されるため、大きなファイルの場合は縮小して表示されます。

notion-figma8

NotionのページにFigma/FigJamのファイルを埋め込み表示する

上記はサムネイルのプレビューの設定方法でしたが、Figma/FigJamはiframeでの埋め込みに対応しており、これをNotion内に表示することで、Notion上でFigma/FigJamのファイル内を拡大・縮小しながら閲覧したり、コメントを書き込むことができます。

詳しいやり方は以下の記事で解説していますので、参考にしてください。

Figmaのデザインデータを外部ツール上でプレビューする方法

今回はFigmaのデザインデータのプレビューを外部ツール上で表示する方法の紹介です。デザインデータをチームやクライアントに共有する際に、タスク管理ツール上で直接プレビューを表示させることで、チケットを見分けたり、スコープを明確化するのに役立ちます。 ... 続きを読む

figma-how-to-emmbed-preview-at-external-site

NotionからFigmaの連携を解除する

左メニューの「設定 >コネクト」から「Figma」の右端にある「…」ボタンから連携を削除できます。

notion-figma9

この記事を読んだ方におすすめの記事

Figmaで簡単にフローチャートや画面遷移図をつくる方法

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 ... 続きを読む

figma-connect-with-arrows

FigmaとNotionで会議をなめらかに進行するための議事録Tips

今回は、チームでのデザイン業務を円滑にするためにFigmaとNotionを活用して効率的な議事録によって円滑な合意形成をサポートするためのテクニックを紹介したいと思います。 ... 続きを読む

figma-notioin-efficiency-of-meeting-minutes

Notionで定期的なTodoや議事録を繰り返し自動生成する方法

今回は、NotionでTodoや議事録といった定期的に作成・記録するドキュメントを、繰り返し自動生成する方法を紹介します。デイリーミーティングの議事録から、毎週行うプライベートタスクのチェックリストの作成におすすめです。 ... 続きを読む

notion-how-to-automatically-generate-recurring-notes

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
広告