公開日: 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のリンク（URL）を取得します。以下は、セクションのリンクを直接コピーした例です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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