Figma Canvas (AI agent canvas)

Figma Canvasとは？

Figma Canvasは、このFigmaブログ投稿で説明されているように、FigmaのキャンバスワークフローをAIエージェントに開放し、Figmaファイル内で直接デザインできるようにしたものです。主な目的は、エージェントがFigmaでチームが維持する同じデザインコンテキスト（デザインシステム、コンポーネント、変数、チームの慣習など）を使用しながら、デザインアセットを作成・更新することです。

投稿では、Figmaを開発者ワークフローに接続するベータ版Figma MCPサーバーも紹介されており、LLM駆動のツールが既存のデザイン構造にリンクしたままデザイン作業を生成・修正できるようにします。

主な機能

• AIエージェントがキャンバス上のFigmaファイルに直接書き込み可能で、生成された作業をチームがデザインを反復する同じ場所で作成・修正できます。
• ベータ版Figma MCPサーバーにより、Figmaを開発者/LLMワークフローに統合し、デザインを考慮したコード生成とデザインアセット操作をサポート。
• キャンバス操作のためのuse_figmaツールにより、MCPクライアント（投稿で言及のClaude CodeやCodexを含む）がデザインシステムに紐づくデザインアセットを生成・修正。
• コードとキャンバスの共有コンテキストで、エージェントがコード由来のUI更新とFigmaでのデザイン洗練を流動的に行き来。
• Markdown指示によるスキルでエージェントの動作をガイドし、Figma内でのワークフロー手順、シーケンス、慣習を定義。

Figma Canvasの使い方

1. FigmaのMCPサーバーをサポートするMCPクライアントを使用（投稿でClaude CodeやCodexなどのツールを言及）し、MCP経由でFigma機能にアクセス。
2. use_figmaツールを使用し、エージェントにデザインシステムコンテキストを使ってFigma内でコンポーネントやその他のデザインアセットを作成・更新させる。
3. スキルでガイダンスを追加し、Markdownベースの指示を提供してFigma内タスクの実行方法をエージェントに指示（投稿で言及の基礎スキル/figma-useを含む）。
4. オプションでHTML/コードからgenerate_figma_designでライブUIを同期し、その後use_figmaに切り替えて既存コンポーネントと変数でデザインを編集。

ユースケース

• コードベースを初期Figmaコンポーネントに変換: /figma-generate-libraryのようなスキルを使ってコードベースからFigmaに新規コンポーネントを作成。
• 既存コンポーネントと変数を使って新規画面を生成: /figma-generate-designを使用し、エージェントがフリーフォームレイアウトではなくコンポーネント/変数に依存してFigmaでデザイン構築。
• UI記述からアクセシビリティ仕様を適用: create-voiceでUI仕様からスクリーンリーダー仕様（VoiceOver、TalkBack、ARIA）を生成。
• システム認識ルールでスペーシング慣習を強制: rad-spacingでFigmaに階層的スペーシングパターンを適用。
• 既存デザインをシステムコンポーネントに接続/再マップ: apply-design-systemでデザインを切断されたレイヤーではなくシステムコンポーネントに整合。

FAQ

有料機能ですか？

ブログ投稿によると、Figmaキャンバス上のAIエージェントサポートは最終的に使用量ベースの有料機能になりますが、ベータ期間中は無料で利用可能です。

Figmaでエージェントを動作させるツールは？

投稿では、use_figmaツールをデザインシステムコンテキストを使ってエージェントがキャンバスを操作するために説明。また、ライブアプリ/ウェブサイトのHTMLを編集可能Figmaレイヤーに変換する既存の**generate_figma_designツール**も言及。

このワークフローでの「スキル」とは？

投稿では、スキルはMarkdownファイルとして書かれた指示セットで、Figma内でのエージェント動作を形成—ワークフロー手順、シーケンス、慣習、耐久性のあるブランド整合デザインに必要なドメイン知識をカバー。

スキルを記述するにはプラグイン構築が必要？

いいえ。投稿では誰でもスキルを作成可能で、プラグイン構築やコード記述は不要と述べています。

言及ツールは特定エージェント（例: Claude Code）専用？

投稿ではClaude CodeとCodexをuse_figmaを使えるMCPクライアントとして命名し、「その他のMCPクライアント」も記述。完全な互換性マトリックスは記載なし。

代替案

• デザイン-to-コード変換ワークフロー（キャンバス上での直接エージェント編集なし）: Figma外でデザインを生成するか、Figmaを読み取り専用ターゲットとして扱い、手動でFigma内にアセットを再構築します。これにより、キャンバス内でデザインシステムに連動した直接的なエージェント編集が欠如します。
• 既存のFigma専用自動化やプラグインの使用: AIエージェントなしで一貫したコンポーネントと変数が必要な場合、Figmaプラグインやテンプレート駆動アプローチに頼れます。これにより、エージェントの自律性を決定論的動作と交換します。
• Figma外でデザインアーティファクトを生成するエージェントワークフロー: 一部のLLMツールチェーンは、デザイナーが実装するためのデザイン ファイルや仕様を出力する可能性があります。本文で説明したアプローチと比較して、エージェントはuse_figma経由で同一のFigmaコンポーネント/変数を直接変更しません。
• HTML-to-Figma変換のみ: 既存のUIをFigmaにインポートすること（generate_figma_designタイプの機能経由）に焦点を当て、エージェントキャンバス編集ループなしの場合、複雑さを減らせますが、デザインシステムとの整合でより多くの手動フォローアップが必要になる可能性があります。