デザインシステムをAIエージェント開発の基盤に
これまでのAI活用ワークフローでは、AIエージェントが生成したUIとチームのデザインシステムの間に乖離が生じることが課題でした。新ツール「use_figma」により、デザインチームと開発チームは、エージェントと同じ共有コンテキストの中で、コードとキャンバスをシームレスに行き来できるようになります。デザインチームが積み重ねてきた命名規則、コンポーネントの構造、ライブラリの整理方法といった意思決定が、エージェントの開発を直接形作ります。
「Skills」でAIエージェントの動作をカスタマイズ
Figmaは、AIエージェントの動作を定義する新機能「Skills」も導入します。Skillsは、AIエージェントがデザインキャンバス上でどのように操作するかをガイドする、マークダウン形式の指示セットです。Figma内でのワークフローの実行手順、順序、準拠すべき規則を規定し、耐久性の高いブランド準拠のデザインを生成するために必要な専門知識とコンテキストをエージェントに提供します。これにより、各社固有のワークフローに合わせてエージェントのFigma内での作業方法を伝えることができ、知識のギャップを埋めます。
Claude Codeのプロダクト責任者であるCat Wu氏は、「SkillsはClaude Codeにデザインキャンバス上での作業方法を教えることで、チームの意図と判断を忠実に反映した開発を可能にします」と述べています。
Skillsの作成にはプラグイン開発やコーディングは不要であり、誰でも記述可能です。基盤となる「/use-figma」は、Figmaの構造から基本原則まで、エージェントに共通の理解を与えます。
ローンチ時点で利用可能なSkillsの例は以下の通りです。
-
/figma-generate-library：コードベースからFigmaの新規コンポーネントを作成 -
/figma-generate-design：既存のコンポーネントと変数を使ってFigmaで新規デザインを作成 -
/create-voice：UI specsからスクリーンリーダー仕様（VoiceOver、TalkBack、ARIA）を生成（Ian Guisard, Uber） -
/cc-figma-component：構造化されたJSONコントラクトからFigmaコンポーネントを生成（Nick Villapiano, One North） -
/apply-design-system：既存デザインをシステムコンポーネントに接続（Chris Goebel, Edenspiekermann） -
/rad-spacing：変数とフォールバックを使ってレベル別のスペーシングを適用（Nolan Perkins, Rad Collab） -
/edit-figma-design：WarpとOzを連携させてFigmaのデザインワークフローを実行 -
/sync-figma-token：ドリフト検出機能付きでデザイントークンをコードとFigma変数間で同期（Firebender） -
/multi-agent：並行ワークフローの実行とAugmentへのデザイン実装（Augment Code）
Skillsは、AIエージェントの出力を改善するための「自己修正ループ」を通じてアウトプットを形成します。エージェントが画面を生成した後、そのスクリーンショットを撮影して実行中のコードと比較し、一致しない部分を繰り返し修正していくことが可能です。AIモデルは本質的にランダム性を持つため、同じプロンプトでも異なる結果が生じる場合がありますが、Skillsは具体的な手順、ガイドライン、コードを組み込むことで、その出力を予測可能なものにします。
提供開始について
この機能はFigma MCPサーバーにネイティブに実装されており、Figmaのセキュリティと信頼性の恩恵を受けながら、Plugin APIを通じて、Code Connect、Figma Draw、FigJamといった各機能へのアクセスも提供します。
Skillsは、Figmaコミュニティが成果を共有したり、チーム固有のワークフローに合わせたソリューションを容易に作成・発信したりするための、迅速でアクセスしやすい手段となります。Figmaは今後、ネイティブAI機能によるキャンバスの強化と、Skillsのより使いやすい共有・活用を推進していく方針です。
利用を開始するには、Figma MCPサーバーのセットアップガイドを参照するか、デベロッパードキュメントでSkillsの作成方法を確認できます。本機能は有料APIですが、ベータ期間中は無償で提供されます。現在、Augment、Claude Code、Codex、Copilot CLI、Copilot in VS Code、Cursor、Factory、Firebender、WarpなどのMCPクライアントで利用可能です。
コメント