・
ClaudeとFigmaの連携方法とは？自動生成の精度やメリットを徹底解説
Figmaで作成したデザインをいかに素早く、かつ正確にコードへ落とし込めるかは、現代のWeb開発において重要な課題です。
近年、AIモデルと各種ツールをつなぐ「MCP（Model Context Protocol）」技術の登場により、ClaudeとFigmaを連携させた双方向のデータフローが実用レベルで実現できるようになりました。
本記事では、ClaudeとFigmaを連携させてデザインとコードをシームレスに同期させる具体的な手順や活用フローを詳しく解説します。実際にClaudeを用いてデザインからコードを自動生成する検証も交えながら、開発プロセスを飛躍的に効率化する連携の全貌をご紹介します。
🔍検証の前に：ClaudeとFigmaの連携に関する基本情報(メリット・連携方法)をチェック
デザインとエンジニアリングの距離を縮める画期的なアプローチとして、ClaudeとFigmaの連携に大きな注目が集まっています。
まずは連携作業を始める前に、基本となる知識やメリット、必要な準備物について確認しておきましょう。
※以降の内容は、2026年7月時点の情報です。
本記事の想定読者
- Figmaで作成したデザインモックアップからHTML/CSSやReactなどのフロントエンドコードへの書き出し作業を効率化したいエンジニア
- 開発チームとのコミュニケーションを円滑にし、デザインの意図を正確に実装コードへ落とし込みたいデザイナーやプロジェクトマネージャー
- 組織全体の開発プロセスの自動化を模索している社内システム担当者
ClaudeとFigmaを連携するメリット
ClaudeとFigmaを連携させることで、主に以下の3つのメリットが得られます。
- UIの一貫性の保持
- 修正対応の高速化
- 本質的業務への集中
Figma上の変数やコンポーネント構造をClaudeが直接読み込むことで、デザインガイドラインに沿ったコードを自動生成でき、見た目や余白の調整コストを削減できます。
また、急なデザイン変更が発生した場合でも、Claudeが変更背景や差分を理解してコード修正を提案するため、確認の手間を減らして迅速なアップデートが可能です。
さらに、スタイル値の転記などのルーティン作業を自動化することで転記ミスを防ぎ、エンジニアはロジック構築などの高度な業務に集中できます。
連携方法
連携を開始するには、ClaudeにFigma用のプラグインをインストールする必要があります。
1.Claudeにログイン後、左側メニュー「カスタマイズ」から「コネクタ」を選択します。
右上の「追加」をクリックして表示されるプルダウンから「コネクタを参照」を選択します。
2.検索バーで「Figma」と入力して、Figmaを検索します。
3.「連携させる」をクリックして、Figmaアカウントへのアクセス許可を行い、認証を完了させます。
🚀YoomはClaudeやFigmaの連携業務を自動化できます
Figmaとの情報連携は非常に便利ですが、AI単体で利用する場合、更新内容やコメントのチェックを手動で行う手間がどうしても残ってしまいます。そんな「あと一歩手作業が残る」悩みも、Yoomなら自動化して解決できます！
[Yoomとは]
たとえば、YoomとFigma、精度高く連携できるSlackなどの社内チャットツールを組み合わせることで、デザインファイルの更新を検知したときに指定のチャネルへ自動で通知を配信できます。共有漏れを防ぎ、チーム全員が常に最新のデザインデータを手元に置く環境を、手間をかけずに実現します。
ぜひ、以下のテンプレートからお試しください！
■概要Googleフォームで受け付けたデザイン依頼を、Canvaで制作する際の構成案作成やフォルダ準備に手間を感じていませんか。手作業での転記や準備は、時間もかかり本来集中すべきクリエイティブな業務を圧迫してしまいます。 このワークフローは、フォームへの回答を起点に、まるでCanva専属のAIエージェントのようにデザイン構成案の生成から専用フォルダの作成、関係者への通知までを自動化し、デザイン制作の初動を円滑にします。■このテンプレートをおすすめする方- GoogleフォームとCanvaを連携させ、デザイン依頼の受付業務を効率化したい方
- AIを活用してデザイン構成案の作成を自動化し、制作準備の手間を削減したいチーム
- Canva AIエージェントのような仕組みを構築し、制作フローの自動化に関心がある方
■このテンプレートを使うメリット- フォーム回答からCanvaのフォルダ作成、構成案作成までが自動処理されるため、手作業の時間を削減し、より創造的な業務に集中できます。
- デザイン依頼から制作準備までの流れが標準化されるため、担当者によるバラつきが減り、業務の属人化を防ぐことに繋がります。
■フローボットの流れ- はじめに、Googleフォーム、Canva、SlackをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。
- 最後に、オペレーションでAIワーカーを設定し、フォームの回答内容をもとに、デザインの構成案を生成し、Canvaに専用フォルダを作成、Slackに通知を行うためのマニュアル（指示）を作成します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- Googleフォームのトリガー設定では、起動のきっかけとしたいフォームを任意で設定可能です。
- AIワーカーに与える指示（プロンプト）や、連携するCanva、Slackのアカウント、通知先のチャンネルなどは、業務内容に合わせて任意で設定できます。
■注意事項- Googleフォーム、Canva、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
■概要名刺デザインの依頼を受ける際、ヒアリングやアイデア出しに多くの時間を費やしていませんか。また、細かな要望の伝達ミスや認識齟齬が発生することもあるかもしれません。このワークフローを活用すれば、Googleフォームで受け付けた要望をもとに、AIエージェント（AIワーカー）が自律的に名刺デザイン案を生成して記録・通知します。クリエイティブ業務の初期段階を自動化し、デザイン制作のプロセスを効率化することが可能です。■このテンプレートをおすすめする方- AIエージェントを活用し、名刺デザインのアイデア出しや作成業務を効率化したいと考えている方
- Googleフォームで受けた依頼内容をもとに、デザイン案を作成する手間を削減したい担当者の方
- クリエイティブ業務の定型部分を自動化し、より創造的な作業に集中したいデザイナーの方
■このテンプレートを使うメリット- フォーム回答を起点にAIが自律的に名刺デザイン案を作成するため、アイデア出しやドラフト作成にかかる時間を短縮できます。
- 要件定義から初稿作成までを自動化することで、担当者のスキルに依存しない安定した品質の初期案を生成し、業務の属人化を防ぎます。
■フローボットの流れ- はじめに、Googleフォーム、Notion、SlackをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。
- 最後に、オペレーションでAIワーカーを選択し、フォームの回答内容をもとに名刺デザイン案を自律的に生成し、Notionへの記録とSlack通知を行うためのマニュアル（指示）を作成します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Googleフォームのトリガー設定では、デザイン依頼を受け付ける対象のフォームを任意で設定してください。
- AIワーカーへの指示内容は、生成したい名刺デザインのテイストや要件に合わせて自由にカスタマイズが可能です。また、デザイン案の出力先となるNotionのデータベースや通知先のSlackのチャンネルなども任意で設定してください。
■注意事項- Googleフォーム、Notion、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- GoogleフォームとCanvaを連携させ、デザイン依頼の受付業務を効率化したい方
- AIを活用してデザイン構成案の作成を自動化し、制作準備の手間を削減したいチーム
- Canva AIエージェントのような仕組みを構築し、制作フローの自動化に関心がある方
- フォーム回答からCanvaのフォルダ作成、構成案作成までが自動処理されるため、手作業の時間を削減し、より創造的な業務に集中できます。
- デザイン依頼から制作準備までの流れが標準化されるため、担当者によるバラつきが減り、業務の属人化を防ぐことに繋がります。
- はじめに、Googleフォーム、Canva、SlackをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。
- 最後に、オペレーションでAIワーカーを設定し、フォームの回答内容をもとに、デザインの構成案を生成し、Canvaに専用フォルダを作成、Slackに通知を行うためのマニュアル（指示）を作成します。
■このワークフローのカスタムポイント
- Googleフォームのトリガー設定では、起動のきっかけとしたいフォームを任意で設定可能です。
- AIワーカーに与える指示（プロンプト）や、連携するCanva、Slackのアカウント、通知先のチャンネルなどは、業務内容に合わせて任意で設定できます。
- Googleフォーム、Canva、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- AIエージェントを活用し、名刺デザインのアイデア出しや作成業務を効率化したいと考えている方
- Googleフォームで受けた依頼内容をもとに、デザイン案を作成する手間を削減したい担当者の方
- クリエイティブ業務の定型部分を自動化し、より創造的な作業に集中したいデザイナーの方
- フォーム回答を起点にAIが自律的に名刺デザイン案を作成するため、アイデア出しやドラフト作成にかかる時間を短縮できます。
- 要件定義から初稿作成までを自動化することで、担当者のスキルに依存しない安定した品質の初期案を生成し、業務の属人化を防ぎます。
- はじめに、Googleフォーム、Notion、SlackをYoomと連携します。
- 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します。
- 最後に、オペレーションでAIワーカーを選択し、フォームの回答内容をもとに名刺デザイン案を自律的に生成し、Notionへの記録とSlack通知を行うためのマニュアル（指示）を作成します。
- Googleフォームのトリガー設定では、デザイン依頼を受け付ける対象のフォームを任意で設定してください。
- AIワーカーへの指示内容は、生成したい名刺デザインのテイストや要件に合わせて自由にカスタマイズが可能です。また、デザイン案の出力先となるNotionのデータベースや通知先のSlackのチャンネルなども任意で設定してください。
- Googleフォーム、Notion、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
🛠️Claude Figma連携でコードからデザインへ逆変換・同期する方法
実際にFigmaとClaudeの連携を行い、効率的にデザインからコンポーネントコードを生成したり、逆にコードからデザインへ同期させたりする手順について、それぞれの具体的なフローを詳しく見ていきましょう。
デザインからReactやNext.jsのコードを自動生成する手順
Figmaで完成したUIデザインから、フロントエンド用の実装コードを自動出力する手順は非常にシンプルです。
コードからFigmaデザインへ逆変換して同期するフロー
連携の強みは、デザインからコードへの変換だけでなく、逆方向へのアプローチも可能である点です。
具体的ワークフロー（3ステップ）
1.コード・画面からFigmaへデザインを取り込む
- 操作する画面: Claude Code（ターミナル画面）およびブラウザ
- 手順:
ターミナルでClaude Codeを起動した状態から、Figma MCP serverのキャプチャコマンドを実行し、ブラウザ上でレンダリングされているライブUIを指定します。
※既存のFigmaファイルにキャプチャする場合のプロンプト - 結果:
実行したコードの見た目がFigma上に転送され、編集可能な「フレーム/デザインレイヤー」として自動生成されます。
2.Figma上でデザイナーがレイアウト・表現を微調整する
- 操作する画面: Figma（デザイン編集画面）
- 手順:取り込まれたフレームを選択し、キャンバス上で余白やカラーパレット、コンポーネント構造などを直感的に編集・調整します。
- 結果:コード由来のUIが、デザインシステム上の規定ルールに則った最新のデザイン状態にアップデートされます。
3.Figmaの変更内容をClaudeに渡し、実装コードへ再反映する
- 操作する画面: FigmaおよびClaude Code（ターミナル画面）
- 手順:修正したFigmaフレームの「URL（リンク）」またはデザインコンテキスト（CSS/Node情報）をコピーし、Claude Codeに「このFigmaフレームの変更に合わせてコードを更新して」と指示（プロンプト入力）します。
- 結果:Claudeが差分を解析し、実装コード（React/HTML/CSSなど）が最新のデザインに基づいて自動書き換えされます。
この双方向の往復ステップにより、デザインと実コードの乖離が起こらない持続可能なデザインシステムが完成します。
🧪ClaudeとFigmaを連携して、デザインのURLを指定したコード自動生成を試してみた
実際に一般ユーザーでもすぐに試せる環境として、Claudeの無料プランを使って、Figmaの特定デザインからレスポンシブコードをどこまで正確に実装できるか検証を行いました。
今回は、問い合わせフォームのFigmaデザインURLをそのままAIに読み込ませてReactコードを出力させるというアプローチを試しました。
外部ツールや有料オプションを介さず、デザインURLとプロンプトだけでAIがどこまで意図を汲み取り、実務に耐えうる高精度なコンポーネントコードを出力してくれるのかを厳しい目線でチェックしていきます。
検証項目
以下の項目で、検証していきます！
使用モデル
Claude Sonnet 5
※今回は、無料プランの範囲で検証しました。
想定シーン
Web UIのデザインデータから初期実装（コーディング）への移行作業を自動化し、フロントエンド開発の初期構築スピードを大幅に向上させたい場面。
検証方法
本検証では、Claude Sonnet 5を使用して、コードを生成します。
プロンプト：
※元の問い合わせフォームは、以下の通りです。
検証手順
※ログイン後、表示された画面で、入力したプロンプト
検証結果
1分ほどで完了しました！結果は以下のものとなりました。
以下のような、問い合わせフォーム画面が作成されました。
元のフォームの入力欄は角ばった角でしたが、丸い角の入力欄になり、やわらかく親しみやすい、今風の印象になりました。
📊検証結果
検証を通じて得られた結果を、画像と共にまとめています。
※本評価は、多数のAIツールを実務に導入してきた著者の知見に基づき、実用性の観点から相対的に算出したものです。
検証により、主に以下の3つのメリット・成果が確認できました。
- デザイン再現度の高さ
- コード品質の高さ
- 実装の即時性
配色（#D9D9D9、#0066FFなど）や余白・パディングの精度が極めて高く、SP画面用のレスポンシブ調整まで網羅されているため、視覚的なズレがほぼありません。
また、Flexboxを活用したモダンなCSS手法や直感的なクラス命名規則が採用されており、そのままプロジェクトへ組み込めるレベルの綺麗なコード品質を実現しています。
さらに、構文エラーやスタイル崩れがなくコピー＆ペーストですぐに動作するほか、エラー表示やアニメーション効果も最初から実装されているため、手作業での調整時間削減が期待できます。
✅まとめ
ClaudeとFigmaの連携は、MCPの登場によって実務レベルでの強力なワークフローへと進化しました。
デザインからコードの生成、そしてコードからデザインへの逆同期により、デザイナーとエンジニアの境界線をなくし、開発のスピードを何倍にも引き上げることが可能です。
無料プランの回数制約や編集制限に注意しつつ、最適な開発環境を整えましょう。
🤖Yoomでできること
👉 Yoomの登録はこちら。30秒で簡単に登録できます！
Figmaの連携業務にAIを活用しても、プロジェクトが大きくなるほど「AIの出力を手動で共有・転記する」といった進行管理や調整コストが跳ね上がってしまいますよね。そんなAI単体ではどうしても残ってしまう手作業の問題も、Yoomなら自動化して解決できます！
Yoomをプロジェクトのインフラに加えることで、Figma内の細かな情報変更や関係メンバーからのフィードバックを、手作業を挟むことなく自動で適切な管理ツールへと連携させることができます。
エンジニアやデザイナー自身が「連絡の橋渡し」に時間を割く必要はなくなり、自動的に業務の受け渡しが完了する快適な運用環境を手に入れることができます。
■概要Figmaのデザインレビューで付いたコメントを、後からNotionに手作業で転記する作業に手間を感じていませんか。この作業は単純ですが、コメントの見落としや転記ミスが発生しやすい業務の一つです。このワークフローを活用すれば、FigmaとNotionを連携させ、新しいコメントを自動でNotionのデータベースに追加できます。手作業による転記の手間をなくし、デザインのフィードバック管理を効率化します。■このテンプレートをおすすめする方- Figmaのデザインレビューで付いたコメントを、Notionで管理しているデザイナーやPMの方
- FigmaとNotionを連携させ、フィードバック管理の工数を削減したいと考えている方
- 手作業による情報共有でのミスや漏れを防ぎ、業務の正確性を高めたいチームリーダーの方
■このテンプレートを使うメリット- Figmaにコメントが追加されるたびに自動でNotionへ連携されるため、手作業での転記に費やしていた時間を短縮できます。
- 手動での情報転記が不要になることで、コメントの見落としや入力ミスといったヒューマンエラーの発生を防ぎます。
■フローボットの流れ- はじめに、FigmaとNotionをYoomと連携します。
- 次に、トリガーでFigmaを選択し、「新しいコメントが追加されたら」というアクションを設定します。これにより、監視対象のファイルにコメントが追加されるとフローが起動します。
- 最後に、オペレーションでNotionを選択し、「レコードを追加する」アクションを設定します。ここで、トリガーで取得したコメント内容などを、指定のデータベースに追加するように設定します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- Notionにレコードを追加する際、どのデータベースに追加するかを任意で指定してください。
- 追加するレコードの各項目には、トリガーで取得したFigmaのコメント内容などの値を、変数として埋め込むカスタマイズが可能です。
■注意事項- Figma、NotionのそれぞれとYoomを連携してください。
■概要クリエイティブデザインの依頼を受ける際、依頼内容の要件を正確に把握し、整理する作業に時間がかかっていませんか？ このワークフローは、フォームで受け付けた依頼内容をOpenAIが自動で分析し、要件を整理した上でGoogle スプレッドシートに登録する作業を自動化します。OpenAIを活用したクリエイティブデザインの依頼受付から管理までを効率化し、担当者の負担を軽減します。■このテンプレートをおすすめする方- クライアントや他部署からのクリエイティブデザイン依頼の管理に手間を感じている方
- OpenAIを活用して、クリエイティブデザインの要件定義を効率化したいと考えている方
- 属人化しがちなデザイン依頼の受付プロセスを標準化し、チームで管理したい方
■このテンプレートを使うメリット- フォーム送信を起点に、依頼内容の分析から転記までが自動処理されるため、手作業での確認や入力の時間を短縮できます。
- OpenAIによるクリエイティブデザインの要件分析プロセスを自動化することで、依頼受付から管理までを標準化できます。
■フローボットの流れ- はじめに、Google スプレッドシートとOpenAIをYoomと連携します。
- 次に、トリガーでフォームトリガーを選択し、クリエイティブデザインの依頼を受け付けるフォームを設定します。
- 最後に、オペレーションでAIワーカーを選択し、フォームの回答内容をもとに「要件を解析し、デザイン指示を生成してGoogle スプレッドシートに登録する」ためのマニュアル（指示）を作成します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- フォームトリガーでは、受け付けたい依頼内容に合わせて、フォームのタイトルや質問項目を任意で編集してください。
- AIワーカーオペレーションでは、利用したいOpenAIのモデルを任意で選択し、クリエイティブデザインの要件をどのように分析・整理するか、指示内容を具体的に設定してください。
■注意事項- Google スプレッドシートとYoomを連携してください。 AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- AIワーカーで大容量のデータを処理する場合、処理件数に応じて膨大なタスクを消費する可能性があるためご注意ください。
- Figmaのデザインレビューで付いたコメントを、Notionで管理しているデザイナーやPMの方
- FigmaとNotionを連携させ、フィードバック管理の工数を削減したいと考えている方
- 手作業による情報共有でのミスや漏れを防ぎ、業務の正確性を高めたいチームリーダーの方
- Figmaにコメントが追加されるたびに自動でNotionへ連携されるため、手作業での転記に費やしていた時間を短縮できます。
- 手動での情報転記が不要になることで、コメントの見落としや入力ミスといったヒューマンエラーの発生を防ぎます。
- はじめに、FigmaとNotionをYoomと連携します。
- 次に、トリガーでFigmaを選択し、「新しいコメントが追加されたら」というアクションを設定します。これにより、監視対象のファイルにコメントが追加されるとフローが起動します。
- 最後に、オペレーションでNotionを選択し、「レコードを追加する」アクションを設定します。ここで、トリガーで取得したコメント内容などを、指定のデータベースに追加するように設定します。
■このワークフローのカスタムポイント
- Notionにレコードを追加する際、どのデータベースに追加するかを任意で指定してください。
- 追加するレコードの各項目には、トリガーで取得したFigmaのコメント内容などの値を、変数として埋め込むカスタマイズが可能です。
- Figma、NotionのそれぞれとYoomを連携してください。
- クライアントや他部署からのクリエイティブデザイン依頼の管理に手間を感じている方
- OpenAIを活用して、クリエイティブデザインの要件定義を効率化したいと考えている方
- 属人化しがちなデザイン依頼の受付プロセスを標準化し、チームで管理したい方
- フォーム送信を起点に、依頼内容の分析から転記までが自動処理されるため、手作業での確認や入力の時間を短縮できます。
- OpenAIによるクリエイティブデザインの要件分析プロセスを自動化することで、依頼受付から管理までを標準化できます。
- はじめに、Google スプレッドシートとOpenAIをYoomと連携します。
- 次に、トリガーでフォームトリガーを選択し、クリエイティブデザインの依頼を受け付けるフォームを設定します。
- 最後に、オペレーションでAIワーカーを選択し、フォームの回答内容をもとに「要件を解析し、デザイン指示を生成してGoogle スプレッドシートに登録する」ためのマニュアル（指示）を作成します。
■このワークフローのカスタムポイント
- フォームトリガーでは、受け付けたい依頼内容に合わせて、フォームのタイトルや質問項目を任意で編集してください。
- AIワーカーオペレーションでは、利用したいOpenAIのモデルを任意で選択し、クリエイティブデザインの要件をどのように分析・整理するか、指示内容を具体的に設定してください。
- Google スプレッドシートとYoomを連携してください。 AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- AIワーカーで大容量のデータを処理する場合、処理件数に応じて膨大なタスクを消費する可能性があるためご注意ください。
プログラミング知識なしで手軽に構築できます。
