Figma, Inc.（本社：米国サンフランシスコ）は、AIエージェントがFigmaキャンバス上でデザインを直接作成・編集できる機能の提供を開始したことを発表しました。この機能は、Figma MCPサーバーを通じて実現されており、デザインシステムを信頼できる唯一の情報源として活用できるとしています。
AIエージェントがFigmaキャンバスに直接アクセス可能に
これまでAIエージェントが生成したUIとデザインシステムの間に乖離が生じることが課題でしたが、新ツール「use_figma」により、エージェントがFigmaキャンバスに直接書き込むことが可能になります。これにより、デザインチームが長年定義・維持してきた命名規則やコンポーネント構造などを、エージェントが直接参照・適用できるようになります。
Ms.ガジェット新ツール「use_figma」と「Skills」機能
「use_figma」ツールを介して、Claude CodeやCodexなどのMCPクライアントは、デザインシステムに紐づいたアセットの生成・編集が可能になります。さらに、AIエージェントの動作を定義する「Skills」機能を導入しました。Skillsは、エージェントがFigmaキャンバス上でどのように操作するかをガイドするマークダウン形式の指示セットです。プラグイン開発やコーディングは不要で、誰でも記述できます。
Ms.ガジェットSkillsの具体例と自己修正ループ
具体的なSkillsの例は以下のとおりです。
- /figma-generate-library：コードベースからFigmaの新規コンポーネントを作成
- /figma-generate-design：既存のコンポーネントと変数を使ってFigmaで新規デザインを作成
- /create-voice：UI specsからスクリーンリーダー仕様を生成
- /cc-figma-component：構造化されたJSONコントラクトからFigmaコンポーネントを生成
- /apply-design-system：既存デザインをシステムコンポーネントに接続
- /rad-spacing：変数とフォールバックを使ってレベル別のスペーシングを適用
- /edit-figma-design：WarpとOzを連携させてFigmaのデザインワークフローを実行
- /sync-figma-token：ドリフト検出機能付きでデザイントークンをコードとFigma変数間で同期
- /multi-agent：並行ワークフローの実行とAugmentへのデザイン実装
これらのSkillsは今後も随時追加予定です。また、Skillsは「自己修正ループ」を通じて、エージェントの出力を改善することができます。エージェントが生成した画面のスクリーンショットと実行中のコードを比較し、不一致を修正していくことで、視覚的な出力だけでなくシステム全体を調整可能です。
Ms.ガジェット提供形態と対応環境
本機能はFigma MCPサーバーにネイティブに実装されており、プラグインAPIを通じてCode ConnectやFigma Drawなどの機能へのアクセスも提供します。有料APIとなりますが、ベータ期間中は無償で提供されます。現在、Augment、Claude Code、Codex、Copilot CLI、Copilot in VS Code、Cursor、Factory、Firebender、WarpなどのMCPクライアントで利用可能です。
Ms.ガジェット
最後までお読みいただきありがとうございました！
- 本記事の評価は当サイト独自のものです。
- 特段の表示が無い限り、商品の価格や情報などは記事執筆時点での情報です。
- この情報が誤っていても当サイトでは一切の責任を負いかねますのでご了承ください。
- 当サイトに記載された商品・サービス名は各社の商標です。
- 本記事で使用している画像は、メディアユーザーとしてPR TIMESより提供されたプレスリリース素材を利用しています。