メインコンテンツまでスキップ

スキルを活用してFigmaエージェントを優れたコラボレーターにする

Sachi ShahProduct Manager, Figma
Sean LeeProduct Manager, Figma
黒い背景の上に、矢印、文字、スマイルマーク、花、四角形といったカラフルなインターフェース要素が、曲がりくねった縞模様の線でつながれた抽象的なイラスト。黒い背景の上に、矢印、文字、スマイルマーク、花、四角形といったカラフルなインターフェース要素が、曲がりくねった縞模様の線でつながれた抽象的なイラスト。

自身の最高のアイデアを共有することから、チームの定番プロンプトから学ぶことまで、Figmaエージェントでどのようなスキルが発揮できるのかを紹介します。

スキルを活用してFigmaエージェントを優れたコラボレーターにするを共有

どのチームにも自分たちなりの作業方法があります。

それは、製品名の大文字の使い方かもしれませんし、PMが仕様をフォーマットする方法かもしれません。または、デザインフィードバックのためにチームが信頼するプロンプトかもしれません。これらは誰もが頼りにするワークフローです。使いやすく、説明しにくく、しばしば誰かの頭の中に存在します。

そこでスキルの出番です。スキルとは、平易な英語で書かれた再利用可能な一連の指示であり、Figmaエージェントに一度教えるだけで、どのチャットでもスラッシュ(/)を使ってトリガーできます。同じプロンプトを書き直したり、同じ手順を繰り返し説明したりする代わりに、スキルをチームや組織に公開することで、エージェントがそれを利用できるようになります。

ConfigでFigmaエージェントのスキルをローンチして以来、私たちは自分たちのスキルを実際に活用しています。ここでは、その過程で得られた知見と、実際の活用例を紹介します。

セカンドオピニオンをオンデマンドで

/ヒント

スキルとデザインシステムは相互に補完し合う関係にあります。デザインシステムはエージェントに、構築を行う上で必要なコンポーネント、パターン、UIエレメントを提供します。スキルは、ブランドボイスやコンプライアンスガイドラインの適用から、作業の批評、レビュープロセスの遵守、さらにはより大規模なワークフローの一環としてデザインシステムを呼び出すことまで、チームの専門知識をさらに強化する役割を果たします。

スキルは、仕事をより鋭い視点から捉えるのに役立ちます。アイデアをさらに深めたり、より良い質問を投げかけたり、特定の視点からデザインを批評したりすることができます。また、UXライティングのガイドラインからアクセシビリティチェック、プロダクト原則に至るまで、チームが共通の基準を適用・維持する上でも役立ちます。ここでは、私たちがどのようにしてスキルを作り、仕事のレベルを引き上げたかを紹介します。

  • ステークホルダーのフィードバックスタイルをシミュレート: 公開コメント、過去の批評、ファイル内のメモなどのフィードバック例をエージェントに提供し、そのスキルをあなたの作業に適用するようプロンプトします。私たちはCEOのDylanのコメントに基づいてスキルを構築しました。これにより、デザイナーはレビューに臨む前に、自分の仕事をプレッシャーの下でテストすることができます。
  • UXライティングの基準を維持: スタイルガイドをエージェントに提供することで、不整合を初期段階で検出させることができます。FigmaのUXライティングチームは、大文字の使用や句読点などに関する当社の基準に従ったエージェントを構築しました。これにより、ライターはより本質的な作業に集中できるようになります。
  • 新規ユーザーの視点を得る: スキルを実行して、初めてのユーザーとしてエクスペリエンスをレビューし、プロダクトデザイナーなど製品を深く理解している人には見えにくいつまずきや不足しているコンテキストを明らかにすることができます。
当社のCEO、Dylanの視点をシミュレートするためのスキル
UXライティングスタイルガイドを維持するためのスキル

一度作れば、どこでも使える

一部のスキルは、チームで定期的に行うルーティンをより簡単に実施するのを助けます。新しいチームメイトをオンボードしたり、プロジェクトスペースを用意したり、新しいプロジェクトに一貫性のある出発点を与えたりするのに役立ちます。パターンは単純です。チームが毎回同じ方法で何かを行う場合、それをスキルにする価値があるかもしれません。ここでは、試してみる価値のあるものをいくつか紹介します。

  • 最近の進捗まとめ: ファイルやプロジェクトの最近の活動を要約し、しばらく離れていたメンバーが復帰した際、コメントスレッドをくまなく探すことなく、すぐに状況を把握できるようにします。
  • 批評会準備チェックリスト: エージェントがプロジェクトについてあなたにインタビューし、ペルソナ、作業範囲、批評会の聴衆といった背景情報を収集した後、議論を導くプロンプトを含む批評会用ページを作成します。私たちは、Nielsen Norman Groupの調査質問に関するベストプラクティスを参照するようにこのスキルを構築し、議論の質問がより深い対話を促すようにしています。
  • 批評のまとめ: 批評で得られたフィードバックを、決定事項、アクションアイテム、先送り事項など、テーマごとに分類してフォローアッププランとして整理します。私たちのスキルでは、キャンバス上に表示される、あるいはSlackのスレッドに貼り付けることができる要約カードを作成するため、情報が失われることなく、会議終了後も適切な場所に情報が流れ続けます。
私たちの/最近の進捗まとめスキルの実演

点と点を結びつける

/ヒント

スキルは、チームがすでに使用しているツールから引き出せると、さらに有用になります。スキルはMCPコネクターと連携し、FigmaエージェントがSlack、Notion、Asanaなどのアプリとやり取りできるようにします。これにより、Figmaエージェントは、あなたと一緒に作業しながら、PRD、製品データ、リサーチノート、プロジェクトディスカッションなどのコンテキストを取り込むことができます。

スキルは、FigmaエージェントとFigma Makeの両方で機能するため、どこで作業していても常に同じ再利用可能なワークフローを利用できます。また、コネクターを使用すると、スキルはすでにチームが使用しているツールからコンテキストを引き出すこともできます。これにより、情報を取り込み、意思決定を記録し、手動のハンドオフなしで外部システムを更新できます。まもなく、FigmaのMCPサーバーを通じてFigmaスキルが利用可能になるため、MCP対応のクライアントならどこからでもスキルを使用できるようになり、Figma内で構築したワークフローをFigmaの枠を超えて拡張できるようになります。ツールキットを連携させるためのパターンをいくつか紹介します。

  • フィードバックを記録して追跡する: レビュー後、スキルがコメントやフィードバックを取得し、プロジェクト管理ツールのタスクに変換することで、デザインとエンジニアリングの間のギャップから情報が漏れるのを防ぎます。
  • リサーチ結果を取り込む: スキルはHeyMarvinやNotionのようなリサーチライブラリから関連するユーザーインサイトを引き出し、デザインを裏付ける根拠を提示することで、デザインを強化できます。
  • データで方向性を裏付ける: スキルに適切なデータソースをフィードすることで、デザインの方向性を裏付けたり、ストーリーを明確化したり、ステークホルダーに提示する前に主張の事実確認を行うために、関連する数値データを引き出すことができます。
私たちの/タスクを作成スキルを使用して、フィードバックをAsanaのタスクとして記録
/ヒント

すべての会話が共有されるべきとは限りません。機密性の高い案件に取り組んでいる場合は、エージェントとのチャットをいつでも非公開に切り替えることができます。

Figmaエージェントのアップデートの中で、私たちが特に気に入っている機能の1つは、共同編集ファイル内でチャットがデフォルトで共有されるようになったことです。エージェントによる作業が別枠で行われるのではなく、チームメイトがどのように問題に取り組んでいるか、どのスキルを使用しているか、そして解決に至るまでにどのようなプロンプトを出しているかを確認できます。

これにより、人々の学び方が変わります。「どうやってやったの?」と尋ねる代わりに、チャットを開いて、相手の思考プロセスを追体験し、自分自身の作業でアプローチを試すことができます。

コラボレーターのプロンプト履歴を見る

チームのコンテキストや創造性を拡張することが、これまでよりも容易になりました。独自のスキルの作成方法について詳しくは、ヘルプセンターをご確認ください。

Figmaのデザインエージェントは、プロフェッショナル、組織、エンタープライズプランのフルシートユーザー向けにオープンベータ版としてご利用可能です。コラボ、Dev、閲覧シートはドラフトでエージェントを使用できます。エージェントはベータ版の間、無料で利用できます。エージェントのプレイグラウンドファイルで実験し、デザインワークフローでのAIの効果的な使い方をご覧ください。

Figmaを使った制作とコラボレーション

無料で始める