デザインシステムをプロダクト開発の共通AI連携の基盤に -- 新ツール「use_figma」と「Skills」機能をベータ提供
ブラウザベースの共同デザイン・プロダクト開発プラットフォームを提供するFigma, Inc.（本社：米国サンフランシスコ）は、Figma MCPサーバーを通じてAIエージェントがFigmaキャンバス上でデザインを直接作成・編集できるようになったことを発表しました。これにより、デザインシステムを信頼できる唯一の情報源として活用し、デザインチームが長年にわたり定義・維持してきた基準をそのまま拡張することが可能になります。use_figmaツールを介して、Claude Code、Codex、その他のMCPクライアントは、デザインシステムに紐づいたデザインアセットの生成・編集が可能になります。
「プロダクトの作り方は今、大きな転換点を迎えています。エージェントを活用したワークフローがあらゆる工程を加速させ、より多くの人が開発に携われる扉を開いています」とFigma Japan カントリーマネージャー、川延 浩彰は述べています。「FigmaのキャンバスをClaude CodeやCodexのようなエージェントに開放することで、デザインシステムがAIと共に開発するための基盤となります。その結果は、単なる作業効率の向上にとどまらず、ブランドと基準をより忠実に反映したプロダクトの実現です。」
「OpenAIのチームはFigmaを使ってプロダクトのあり方を繰り返し検討し、意思決定を行っています」とCodexのデザインリード、Ed Bayes氏は述べています。「CodexがFigma内の重要なデザインコンテキストを参照・活用できるようになったことで、より高品質なプロダクトをより効率的に開発できるようになりました。」
デザインシステムがAIエージェントの開発の基盤になる
これまでのAI活用ワークフローでは、AIエージェントが生成したUIとチームのデザインシステムの間に乖離が生じてしまうことが課題でした。新ツール「use_figma」により、デザインチームと開発チームは、エージェントと同じ共有コンテキストの中で、コードとキャンバスをシームレスに行き来できるようになります。命名規則、コンポーネントの構造、ライブラリの整理方法など、デザインチームが長年かけて積み重ねてきた意思決定が、エージェントの開発を直接形作ります。
「Skills」で、AIエージェントの動作を自在にカスタマイズ
さらに、AIエージェントの動作を定義する新機能「Skills」を導入します。Skillsは、AIエージェントがデザインキャンバス上でどのように操作するかをガイドする、マークダウン形式の指示セットです。Figma内でのワークフローの実行手順・順序・準拠すべき規則を規定するとともに、耐久性の高いブランド準拠のデザインを生成するために必要な専門知識とコンテキストをエージェントに提供します。各社固有のワークフローに合わせてエージェントのFigma内での作業方法を伝え、知識のギャップを埋めます。「最高のプロダクトは、細部にまで真摯に向き合うチームから生まれます」とClaude Codeのプロダクト責任者、Cat Wu氏は述べています。「多くのデザインチームはFigmaで作業を形にし、Claude Codeでプロダクトを実現しています。SkillsはClaude Codeにデザインキャンバス上での作業方法を教えることで、チームの意図と判断を忠実に反映した開発を可能にします。」
Skillsの作成にはプラグイン開発やコーディングは不要で、誰でも記述できます。基盤となるのが、他のすべてのSkillsの土台となる「/use-figma」です。Figmaの構造から基本原則まで、エージェントに共通の理解を与えます。
ローンチ時点で利用可能なSkillsの例は以下のとおりです。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は具体的な手順・ガイドライン・コードを組み込むことで、その出力を予測可能なものにします。Skillsは企業のルールや慣習をAIエージェントが作業中に従うルールへと変換し、デザインチームがすでに定義したコンポーネント・変数・構造を通じて適用されます。
提供開始について
この機能はFigma MCPサーバーにネイティブに実装されているため、Figmaのセキュリティと信頼性の恩恵を受けながら、Plugin APIを通じてCode Connect、Figma Draw、FigJamといった各機能へのアクセスも提供します。またSkillsは、Figmaコミュニティがこれまでの成果を共有したり、チーム固有のワークフローに合わせたソリューションを手軽に作成・発信したりするための、より迅速でアクセスしやすい手段となります。今後Figmaは、ネイティブAI機能によるキャンバスの強化と、Skillsのより使いやすい共有・活用を推進していきます。また、今日のPlugin APIで実現可能な機能との同等性を目指し、ツールへの機能追加を継続します。Figma MCPサーバーのセットアップガイドを参照して利用を開始するか、デベロッパードキュメントでSkillsの作成方法をご確認ください。
本機能は有料APIとなりますが、ベータ期間中は無償で提供します。現在、Augment、Claude Code、Codex、Copilot CLI、Copilot in VS Code、Cursor、Factory、Firebender、WarpなどのMCPクライアントで利用可能です。
Figmaについて
Figmaは、チームが集まり、アイデアを世界最高のデジタルプロダクトや体験へと形にするための場所です。2012年の設立以来、Figmaは単なるデザインツールから進化を遂げ、アイデアの創出からプロダクトのリリースまでを一貫して支援する、接続性の高いAI搭載プラットフォームへと発展しました。アイデアを考え、デザインし、構築し、リリースするあらゆるプロセスにおいて、Figmaはチームのコラボレーションをよりスムーズで効率的、そして楽しいものにします。どんな工程においても、チーム全員が同じページを共有できる--それがFigmaの強みです。企業プレスリリース詳細へ
PR TIMESトップへ
