・
【簡単設定】FigmaのコメントをDiscordに自動通知する方法
「Figma上の重要なコメントを見逃してしまった！」
「フィードバックを追加したことをDiscordで知らせるのは二度手間になる…」
デザイン制作はFigmaで、チームのコミュニケーションはDiscordで行っていると、ツール間での情報の分断に悩まされることがありますよね。
そんな時は、FigmaとDiscordの連携による通知の自動化が役立ちます！
本記事では、Figmaで新しいコメントが追加されたら、Discordの指定チャンネルに通知する仕組みをご紹介します。誰が、どんなコメントを送ったのか。わざわざFigmaを開かなくても、Discord上でキャッチできるようになりますよ。
ノーコードツールのYoomを使えば、簡単な設定だけで自動化フローを構築できます。
本記事を参考に、毎日の通知業務を効率化しましょう！
とにかく早く試したい方へ
YoomにはFigmaとDiscordを連携するためのテンプレートが用意されています。今すぐ試したい方は、以下のバナーの「試してみる」をクリックしてスタートしてください！
- Figmaでのデザインレビューを頻繁に行い、コメントの見逃しをなくしたいデザイナーやディレクターの方
- Figmaに関するコメント通知をDiscordに集約し、チームの確認漏れを防ぎたいプロジェクトチームの方
- 手動での確認作業を自動化し、デザインのフィードバックサイクルを高速化したいと考えている方
- Figmaにコメントが追加されると自動でDiscordへ通知が送信されるため、都度Figmaを確認する手間を省き、作業時間を短縮できます
- 重要なフィードバックや修正依頼のコメントを見落とすといったヒューマンエラーを防止し、プロジェクトの遅延リスクを軽減します
- はじめに、FigmaとDiscordをYoomと連携します
- 次に、トリガーでFigmaを選択し、「新しいコメントが追加されたら」というアクションを設定します
- 最後に、オペレーションでDiscordの「メッセージを送信する」アクションを設定し、Figmaから受け取ったコメント内容などを通知するように設定します
■このワークフローのカスタムポイント
- Discordへメッセージを送信するオペレーションでは、通知先のチャンネルを任意で設定することが可能です
- 通知するメッセージの本文は、固定のテキストを設定するだけでなく、トリガーで取得したFigmaのコメント内容や投稿者名などの情報を変数として埋め込み、自由にカスタマイズできます
- Figma、DiscordのそれぞれとYoomを連携してください。
FigmaとDiscordの連携フローを作ってみよう
それでは早速、FigmaとDiscordを連携したフローを作成していきます！
今回使用するテンプレートは「Figmaでコメントが追加されたらDiscordに通知する」という業務フローを自動化するものとなっています。
Yoomを使用してFigmaとDiscordの連携を進めていくので、まだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておいてください。
※今回連携するアプリの公式サイト：Figma／Discord
[Yoomとは]
フローの作成方法
フローは大きく分けて以下の手順で作成します。
- FigmaとDiscordのマイアプリ連携
- テンプレートをコピー
- トリガーとアクションの設定
- フローの起動と動作確認
- Figmaでのデザインレビューを頻繁に行い、コメントの見逃しをなくしたいデザイナーやディレクターの方
- Figmaに関するコメント通知をDiscordに集約し、チームの確認漏れを防ぎたいプロジェクトチームの方
- 手動での確認作業を自動化し、デザインのフィードバックサイクルを高速化したいと考えている方
- Figmaにコメントが追加されると自動でDiscordへ通知が送信されるため、都度Figmaを確認する手間を省き、作業時間を短縮できます
- 重要なフィードバックや修正依頼のコメントを見落とすといったヒューマンエラーを防止し、プロジェクトの遅延リスクを軽減します
- はじめに、FigmaとDiscordをYoomと連携します
- 次に、トリガーでFigmaを選択し、「新しいコメントが追加されたら」というアクションを設定します
- 最後に、オペレーションでDiscordの「メッセージを送信する」アクションを設定し、Figmaから受け取ったコメント内容などを通知するように設定します
■このワークフローのカスタムポイント
- Discordへメッセージを送信するオペレーションでは、通知先のチャンネルを任意で設定することが可能です
- 通知するメッセージの本文は、固定のテキストを設定するだけでなく、トリガーで取得したFigmaのコメント内容や投稿者名などの情報を変数として埋め込み、自由にカスタマイズできます
- Figma、DiscordのそれぞれとYoomを連携してください。
ステップ1：FigmaとDiscordのマイアプリ連携
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
左側のメニューから「マイアプリ」を開き、「新規接続」をクリック。
検索バーで連携するアプリ（FigmaとDiscord）を検索して選択。
Figmaのアカウント連携方法は、以下の解説ナビをご覧ください！
Discordのアカウント連携方法は、以下の解説ナビをご覧ください！
ヘルプページ：Discord Botのマイアプリ連携方法
Discordの連携も完了したら、次のステップに進みましょう。
ステップ2：テンプレートのコピー
続いて、今回使用するYoomのテンプレートをコピーします。
以下のバナーの「試してみる」をクリックしてください。
- Figmaでのデザインレビューを頻繁に行い、コメントの見逃しをなくしたいデザイナーやディレクターの方
- Figmaに関するコメント通知をDiscordに集約し、チームの確認漏れを防ぎたいプロジェクトチームの方
- 手動での確認作業を自動化し、デザインのフィードバックサイクルを高速化したいと考えている方
- Figmaにコメントが追加されると自動でDiscordへ通知が送信されるため、都度Figmaを確認する手間を省き、作業時間を短縮できます
- 重要なフィードバックや修正依頼のコメントを見落とすといったヒューマンエラーを防止し、プロジェクトの遅延リスクを軽減します
- はじめに、FigmaとDiscordをYoomと連携します
- 次に、トリガーでFigmaを選択し、「新しいコメントが追加されたら」というアクションを設定します
- 最後に、オペレーションでDiscordの「メッセージを送信する」アクションを設定し、Figmaから受け取ったコメント内容などを通知するように設定します
■このワークフローのカスタムポイント
- Discordへメッセージを送信するオペレーションでは、通知先のチャンネルを任意で設定することが可能です
- 通知するメッセージの本文は、固定のテキストを設定するだけでなく、トリガーで取得したFigmaのコメント内容や投稿者名などの情報を変数として埋め込み、自由にカスタマイズできます
- Figma、DiscordのそれぞれとYoomを連携してください。
以下のような画面が表示されればコピーは成功です！「OK」を押して設定を進めていきます。
※コピーしたテンプレートは、サイドメニューの「フローボット」から確認できます。
ステップ3：トリガーの設定
まずは、Figmaでコメントが追加されたことをYoomが検知したら、フローが起動するように設定していきます。
1. フローの「New Comment」をクリック。
2. 「タイトル」は任意の名称に変更可能です。
アクションの内容が分かりやすいタイトルにするとよいでしょう。
3. 連携アカウントにステップ1で連携したアカウントが設定されていることを確認。
4. 「次へ」をクリック。
5. Team IDにコメントの追加を検知したいチームのIDを設定。
IDはFigmaのURL（www.figma.com/files/team/Team ID/…）から取得できます。
6. Passcodeには任意の文字列を設定。
7. DescriptionにはWebhookを識別するための説明などを設定できます。
8. 「WebhookURLを登録」をクリック。
9. 登録に成功したら「次へ」をクリック。
10. 実際にコメントの追加を検知できるかのテストを行います。
Figmaでテスト用のコメントを行ってください。
11 「テスト」をクリック。
12. テストに成功すると、追加したコメントの情報が「取得した値」に追加されます。
これらの値は、以降のアクションで変数（フローが稼働する度に更新される値）として使用できるようになります。
ヘルプページ：取得した値について／取得した値のテスト値について
13. テスト用のコメントが取得できていれば「完了」をクリック。フローの設定画面に戻ってきます。
ステップ4：Discordへの通知設定
最後に、コメントの追加をDiscordに通知しましょう。
1. フローの「メッセージを送信」をクリック。
2. タイトルと連携アカウントとアクションを確認して「次へ」をクリック。
3. 「チャンネルID」に、メッセージを送信するチャンネルのIDを設定。
チャンネルIDはDiscordチャンネルのURL（discord.com/channels/サーバーID/チャンネルID）で確認できます。
4. 動的な値と固定テキストを組み合わせて、通知する「メッセージ内容」を設定しましょう。
入力欄クリック時に表示されるトリガーアクションメニューから、取得した商品情報を選択可能です。
項目をクリックすると、入力欄に{{項目名 取得した値}}という形で追加されます。
※動的な値を使用せずに固定テキストだけで設定してしまうと、フローが稼働する度に同じメッセージが送信されてしまうためご注意ください。
5. 設定を終えたら、「テスト」をクリック。
Discordの指定チャンネルにメッセージが投稿されます。
6. テストに成功したら、指定したチャンネルを確認しましょう。
7. 期待通りにメッセージが投稿されていれば「完了」をクリック。
ステップ5：トリガーON
全ての設定が完了すると、以下の画面が表示されます。
早速、フローを稼働させるのであれば、「トリガーをON」をクリックしましょう。
あとで稼働させる場合は、任意のタイミングで設定画面右上のトリガースイッチをONにしてください。
これで、Figmaでコメントが追加されるたびDiscordに通知されるようになりました！
まとめ
いかがでしたか？
本記事では、FigmaとDiscordを連携させて、コメントの通知を自動化する方法をご紹介しました。
デザインのフィードバックを確認するために何度もFigmaをチェックしたり、コメントしたことをわざわざDiscordで報告したりする作業は、積み重なると大きなタイムロスになります。また、報告漏れが原因で修正が遅れてしまうといったトラブルも避けたいもの。
こうしたプロセスを自動化することで、チーム全体で最新のフィードバックを共有でき、本来の業務であるデザイン制作や意思決定に専念できる環境を整えられますよ！
Yoomを使えば、画面上の操作だけで自動化フローが完成します。ぜひYoomのアカウントを登録して、FigmaとDiscordの連携による通知業務の効率化を体験してみてください！
よくあるご質問
Q：コメント連投時にDiscordの通知が制限されることはありますか？
A：
Discord APIを使用した通知には1秒あたり50リクエストの上限が設けられているので、これを超えてしまうと429エラーとなり、一部のコメントが通知されなくなる可能性があります。
コメントが追加されるたびにWebhookを起点としてフローが実行されるため、同時に50件以上のコメントが追加されなければ、通常は429エラーにはなりません。
参考：My Bot is Being Rate Limited!
Q：通知先のDiscordチャンネルをチームやプロジェクトごとに分けられますか？
A：
「進行先を切り替える」アクションを追加することで、様々な条件によって処理を分岐させることが可能です。切り替え先のアクション設定で、通知先チャンネルを変更してください。
ヘルプページ：「進行先を切り替える」の設定方法
※「進行先を切り替える」はパーソナルプラン以上のプランでご利用いただける機能です。
Q：通知が届かない場合にはどこを確認すべきですか？
A：
エラーが発生している場合、Yoomアカウントを登録したメールアドレス宛てに通知が送信されます。通知に記載されているURLからエラー内容を確認し、フローの停止や再実行といった対応を行ってください。
フローが起動しているかどうかは、左側メニュー「実行ログ」の「フローボット」で確認できます。
ヘルプページ：エラー時の対応方法について
プログラミング知識なしで手軽に構築できます。
