FigmaがAIエージェントによるデザイン自動化を強化！「use_figma」と「Skills」でデザインシステムがAI開発の基盤に

FigmaがAIエージェントによるデザイン自動化を強化！「use_figma」と「Skills」でデザインシステムがAI開発の基盤に

デザインツールの世界に革命をもたらしてきたFigmaが、また新たな一歩を踏み出しました。この度、FigmaはAIエージェントがFigmaキャンバス上でデザインを直接作成・編集できる新機能を発表。これにより、デザインシステムがプロダクト開発における共通AI連携の基盤となります。今回は、新ツール「use_figma」と「Skills」機能を中心に、Figmaが提供するデザインとAIの新たな可能性について、AI初心者の方にも分かりやすく詳しくご紹介します。

Figma AIエージェントによるデザイン自動化

FigmaとAIエージェントの革新的な連携

Figmaは、ブラウザベースで共同デザイン・プロダクト開発ができるプラットフォームとして、世界中のデザイナーや開発者に利用されています。今回発表されたのは、FigmaのMCPサーバー（Figma MCPサーバー: https://www.figma.com/blog/introducing-figma-mcp-server/）を通じて、AIエージェントがFigmaキャンバスに直接デザインを書き込んだり、編集したりできるようになったという画期的な機能です。

AIエージェントとは、特定のタスクを自律的に実行するAIプログラムのこと。これまでは、AIが生成したデザイン案を人間がFigmaに取り込み、修正する必要がありました。しかし、この新機能により、AIエージェントが直接Figmaキャンバス上で作業できるようになるため、デザインプロセスが大幅に効率化され、自動化の可能性が広がります。

デザインシステムがAI開発の信頼できる基盤に

この機能の最大のポイントは、「デザインシステム」を信頼できる唯一の情報源として活用できる点です。デザインシステムとは、デザインに関するルール、コンポーネント（ボタンや入力フォームなど再利用可能な部品）、ガイドラインなどをまとめたものです。これにより、デザインの一貫性を保ち、効率的な開発を可能にします。

Figma Japanのカントリーマネージャーである川延 浩彰氏は、「プロダクトの作り方は今、大きな転換点を迎えています。エージェントを活用したワークフローがあらゆる工程を加速させ、より多くの人が開発に携われる扉を開きます」と述べています。FigmaキャンバスをClaude CodeやCodexのようなAIエージェントに開放することで、デザインシステムがAIと共に開発するための強固な基盤となるのです。その結果、単に作業が速くなるだけでなく、企業やブランドの個性（ブランド）と、デザインの決まり事（基準）をより忠実に反映したプロダクトが実現できると期待されています。

OpenAIのCodexデザインリードであるEd Bayes氏も、「CodexがFigma内の重要なデザインコンテキスト（デザインの背景情報や文脈）を参照・活用できるようになったことで、より高品質なプロダクトをより効率的に開発できるようになりました」と語っており、この連携の有効性を強調しています。

新ツール「use_figma」がデザインと開発のギャップを埋める

これまでのAIを活用したデザインワークフローでは、AIエージェントが生成したUI（ユーザーインターフェース）と、チームが定めたデザインシステムとの間にズレが生じることが課題でした。AIが独自に生成したデザインが、既存のデザインルールやコンポーネントと合わない、という状況です。

この課題を解決するのが、新ツール「use_figma」です。use_figmaを介することで、Claude Code、CodexといったAIエージェントは、デザインシステムに紐づいたデザインアセット（デザイン素材）を生成・編集できるようになります。これにより、デザインチームと開発チームは、AIエージェントと同じ共有された文脈の中で、コードとキャンバスをスムーズに行き来できるようになります。

具体的には、デザインチームが長年かけて積み重ねてきた、命名規則（各要素の名前の付け方）、コンポーネントの構造（ボタンなどの部品の作り方）、ライブラリの整理方法（デザイン素材の管理方法）といった意思決定が、AIエージェントによる開発に直接反映されます。つまり、AIがデザインを生成する際に、チームのルールを自動的に守ってくれるようになるため、手戻りや修正の必要が減り、デザインの一貫性が保たれるのです。

OpenAI CodexとFigmaの連携

AIエージェントの動作をカスタマイズする新機能「Skills」

さらに、FigmaはAIエージェントの動作を自由に定義できる新機能「Skills」を導入しました。Skillsは、AIエージェントがFigmaキャンバス上でどのように操作するかをガイドする、マークダウン形式の指示セットです。マークダウン形式とは、簡単に書けるテキスト形式で、特別なプログラミング知識がなくても記述できるのが特徴です。

Skillsは、Figma内でのワークフロー（作業手順）の実行手順、順序、そして従うべき規則を具体的に規定します。これにより、耐久性が高く、ブランドの基準に準拠したデザインを生成するために必要な専門知識や文脈をAIエージェントに提供します。企業固有のワークフローに合わせて、AIエージェントのFigma内での作業方法を細かく指示し、知識のギャップを埋める役割を果たします。

Claude Codeのプロダクト責任者であるCat Wu氏は、「最高のプロダクトは、細部にまで真摯に向き合うチームから生まれます。多くのデザインチームはFigmaで作業を形にし、Claude Codeでプロダクトを実現しています。SkillsはClaude Codeにデザインキャンバス上での作業方法を教えることで、チームの意図と判断を忠実に反映した開発を可能にします」と述べています。この言葉からも、Skillsがチームの意図をAIに正確に伝え、より質の高いアウトプットを引き出すための重要な機能であることが分かります。

プラグイン開発不要で誰でもSkillsを作成可能

Skillsの作成には、特別なプラグイン開発やコーディングの知識は不要です。誰でも簡単に記述できるため、デザインチームや開発チームが自分たちのニーズに合わせてAIエージェントをカスタマイズできる柔軟性を提供します。Skillsの基盤となるのは、他のすべてのSkillsの土台となる「/use-figma」です。これは、Figmaの構造から基本的な原則まで、AIエージェントに共通の理解を与える役割を担います。

ローンチ時点で利用可能なSkillsの例（ローンチ時点で利用可能な Skillsの例: https://www.figma.com/community/skills）は以下の通りです。これらのSkillsは今後も随時追加される予定です。

  • /figma-generate-library：コードベースからFigmaの新規コンポーネントを作成します。

  • /figma-generate-design：既存のコンポーネントと変数を使ってFigmaで新規デザインを作成します。

  • /create-voice：UI仕様書（UI specs: https://docs.uspec.design/）からスクリーンリーダー仕様（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）。複数のAIエージェントが同時に異なるタスクを実行できるようになります。

自己修正ループでAIの出力を改善

Skillsは、AIエージェントの出力を改善するための「自己修正ループ」という仕組みも形成します。AIエージェントが画面を生成した後、そのスクリーンショットを撮影し、実行中のコードと比較します。もし一致しない部分があれば、AIエージェントはそれを繰り返し修正していくことが可能です。

AIモデルは本来、ランダム性を持つため、同じ指示（プロンプト）を与えても異なる結果が生じることがあります。しかし、Skillsは具体的な手順、ガイドライン、コードを組み込むことで、その出力をより予測可能なものにします。Skillsは、企業内のルールや慣習を、AIエージェントが作業中に従うべきルールへと変換し、デザインチームがすでに定義したコンポーネント、変数、構造を通じて適用されます。これにより、視覚的な出力だけでなく、デザインシステム全体が調整され、常に一貫した高品質なデザインが維持されるでしょう。

提供開始と今後の展望

この革新的な機能は、Figma MCPサーバーにネイティブに実装されています。そのため、Figmaが誇る高いセキュリティと信頼性の恩恵を受けながら、以下の機能へのアクセスも提供します。

Skillsは、Figmaコミュニティがこれまでの成果を共有したり、チーム固有のワークフローに合わせたソリューションを簡単に作成・発信したりするための、より迅速でアクセスしやすい手段となるでしょう。Figmaは今後も、ネイティブAI機能によるキャンバスの強化と、Skillsのより使いやすい共有・活用を推進していく方針です。また、現在のPlugin APIで実現可能な機能との同等性を目指し、ツールへの機能追加を継続していくとのことです。

利用を開始するには、Figma MCPサーバーのセットアップガイド（Figma MCPサーバーのセットアップガイド: https://help.figma.com/hc/en-us/articles/35281350665623-Figma-MCP-collection-How-to-set-up-the-Figma-remote-MCP-server-preferred）を参照するか、デベロッパードキュメント（デベロッパードキュメント: https://developers.figma.com/docs/figma-mcp-server/create-skills/）でSkillsの作成方法を確認できます。

この機能は有料APIとなりますが、ベータ期間中は無償で提供されます。現在、Augment、Claude Code、Codex、Copilot CLI、Copilot in VS Code、Cursor、Factory、Firebender、WarpなどのMCPクライアントで利用可能です。

Figmaについて

Figmaは、チームが集まってアイデアを世界最高のデジタルプロダクトや体験へと形にするためのプラットフォームです。2012年の設立以来、Figmaは単なるデザインツールにとどまらず、アイデアの創出からプロダクトのリリースまでを一貫して支援する、接続性の高いAI搭載プラットフォームへと進化を遂げてきました。アイデアを考え、デザインし、構築し、リリースするあらゆるプロセスにおいて、Figmaはチームのコラボレーションをよりスムーズで効率的、そして楽しいものにします。どんな工程においても、チーム全員が同じページを共有できる——それがFigmaの強みです。

まとめ

Figmaが提供するAIエージェントによる直接書き込み機能と、新ツール「use_figma」、そして「Skills」機能は、デザインと開発のワークフローに大きな変革をもたらすでしょう。デザインシステムをAI開発の基盤とすることで、これまで以上に一貫性のある、高品質なプロダクトを効率的に生み出すことが可能になります。AI初心者の方にとっても、Skills機能を使えば、コーディングなしでAIエージェントをカスタマイズできるため、AIを活用したデザイン自動化への敷居が大きく下がるはずです。Figmaの今後の進化に、ますます注目が集まります。

タイトルとURLをコピーしました