Figmaデザインエージェントが登場

デザイナーには、探索、実験、コラボレーション、精度といった基本をサポートする目的に応じたツールが必要です。Figmaは、それらすべてを可能にするためのマルチプレイヤーキャンバスとして作られました。チームが製品開発を迅速化するためにエージェント型ツールを導入するにつれ、「スピードか、それとも精度か?」「AI生成か、それとも直接操作か?」といった、偽りの二者択一が浮上しています。しかし、どちらかを選ぶ必要などないはずです。

だからこそ、私たちはFigmaエージェントを開発しました。私たちの目標は、Figmaに精通し、チームの働き方に自然に溶け込むエージェントを作成することでした。そのためには、コンポーネント、トークン、標準、ベストプラクティスに関する詳細なコンテキストを把握し、サードパーティ製ツールでは不可能な方法で、Figmaそのものをモデルが理解できるようにする必要がありました。

その結果、チームと同じファイル内のキャンバス上で、常にあなたの隣で作業する、専用のデザインエージェントが誕生しました。まさに真のコラボレーターです。エージェントはFigmaファイルの編集に特化しているため、出力はデザインのコンテキストに合わせて調整され、直接操作できるように作られているので、常にコントロールを維持できます。MCPサーバーとは異なり、このエージェントはキャンバス上に直接存在するため、別途の設定やコンテキストの切り替えが不要で、次のような操作を簡単に行うことができます。

• 任意のデザインレイヤーからプロンプトを開始する
• 複数のアイデアを同時に展開する並行プロンプト
• エージェントが反復するのと同時に、編集を加えて反復

新しい方向性の探求から、一括編集やフィードバックの実装まで、Figmaのエージェントが現在のデザインワークフローにどのように組み込まれるかを紹介します。

さらに方向性を探る

最高のデザインは、最初のアイデアや最初のプロンプトから生まれることはめったにありません。方向性を探り、アプローチを比較し、反復することは、すでにデザイナーの働き方の基本になっています。Figmaのエージェントが、より短時間でより多くの可能性を追求できるようサポートします。

視野を広げる: 同じ課題に対して、異なるアプローチをすばやく考案し、複数の方向性を同時に検討することができます。異なるビジネスゴールに合わせて最適化された複数のチェックアウトフローを比較してみましょう。エージェントに3つの異なる情報アーキテクチャを依頼してもらうのもいいでしょう。

あるいは、さらに踏み込んでみる: 方向性を決め、エージェントに反復させたり、実装を比較させたり、既存のデザインを見直させたりしながら、デザインシステムとの整合性を保つことができます。エージェントは、最も頻繁に使用されているコンポーネントや最近使用されたコンポーネントを出発点として使用しますが、特定のライブラリを選択したり、特定のトークン、バリアブル、コンポーネントに@メンションを付けたりすることで、必要な結果に正確に導くことも可能です。これは、デザインシステムのためのキーコマンドのようなものだと考えてください。

生成AIによってデザインの生成が容易になる一方で、平凡な作品をリリースするリスクも高まっています。Figmaのエージェントは、より多くの方向性を模索し、最適なものを選べるよう特別に設計されています。そして、最適なものを選んだ後は、理想的な出力を得るためにプロンプトし続けるよりも、実際に手を動かして調整する方が、多くの場合、より迅速で自然であり、トークンの消費も抑えられます。また、コンテキストを失うことなく、同じワークスペース内でチームと共同で作業を進めることも可能です。

スタイルをリミックスして、デザインシステムを使用した画面を生成:

雑務を自動化する

Figmaのエージェントがキャンバス上であなたと協力して作業を行うことで、作業効率が向上するだけでなく、AIアシスタントと手動での操作をシームレスに行き来できるようになります。これにより、文脈の理解や正確さが求められる面倒な作業も、スムーズに進めることができます。一貫性を保つためにバリアブルを手動で名前変更したり、同じコンポーネントを多数の画面間で入れ替えたり、フロー全体でパディングの変更を繰り返したり、大量のフレームにリアルなコンテンツを配置したりする手間が省けたら、すばらしいと思いませんか?まさにそれがエージェントの役割です。一括編集の自動化、デザインシステムの適用、そして大規模なデザインへのリアルなコンテンツの配置といった、通常は作業の足を引っ張るような処理をエージェントが処理します。

Figmaとチャットして、ファイル全体のタイポグラフィを更新したり、グリッド内の「lorem ipsum」テキストや画像を置き換えたり、すべてのチップコンポーネントをアクティブ化したり、手動で塗りつぶしやコントラストを調整することなく画面をダークモードに変換したりできます。デザインシステムを維持する場合、エージェントは特に強力な味方となります。ライブラリ全体の説明文、タグ、ユースケースを一括更新したり、命名規則を統一したり、コンポーネントのすべての状態やバリアントをドキュメント化したり、チームの作業例を共有して品質管理を行ったりすることができます。

一括で精密な編集を行い、デザインシステムをドキュメント化する:

フィードバックを活用する

デザイン作業では、批評のメモやステークホルダーの反応、未解決の課題など、コメントやファイルのあちこちに散らばりがちなフィードバックが蓄積されます。Figmaのエージェントがそのフィードバックを活用するお手伝いをします。

チーム全員が同じファイルで作業しているため、エージェントはすでにそのコンテキストを把握しています。そのため、フィードバックを通じて作業を進めるよう依頼することは、新しいコラボレーターに説明するというよりも、すでにその場にいる誰かと一緒に考えを整理していくような感覚に近いものがあります。

Figmaにフィードバックの要約やテーマの抽出を依頼し、得られた意見を次のステップに変換します。エージェントを使用して、さまざまな視点からデザインを検証することもできます。収益重視のVPがどう反応するか知りたければ、Figmaのエージェントはその視点をモデル化できます。長いコメントスレッドを把握したければ、エージェントが議論のやり取りを整理し、実行可能なプランへとまとめ上げます。レビューの前にアイデアを整理したければ、チームと共有する前に、Figmaのエージェントを使って方向性を明確にします。

リアルタイムでフィードバックを受け取り、整理し、適用する:

Figmaのエージェントは、実際に作業が行われている場所に組み込まれています。切り替えの手間も、コンテキスト切り替えも、学習曲線もありません。Figma内で作業を続けながら、チーム全体で情報を共有できます。私たちがエージェントを開発した目的はただ一つ。それは、品質とクラフトを損なうことなく、作業のスピードアップを実現することです。

今後数か月間は、デザインシステムのサポート強化、ユーザーエクスペリエンスの洗練、ファイル横断検索機能の拡張、そしてカスタマイズ機能の追加に注力していきます。これはまだ始まりに過ぎません。

Figmaエージェントは、今後数週間にわたってベータ版で段階的に展開されます。ベータ期間中、エージェントはクレジットを消費しません。AI クレジットは一般提供時に適用されます。早期アクセスをリクエストするには、こちらからサインアップしてください。ベータ版に参加する資格があり選ばれた場合、参加できた時点でメールをお送りします。リストに参加しても、アクセスが保証されるわけではありません。エージェントは、プロフェッショナル、組織、エンタープライズプランのフルシートユーザー向けに利用可能になります。コラボとDevシートはドラフトでエージェントを使用できます。スターター、エデュケーション、および政府プランは含まれていません。ヘルプセンターで詳細を見る。