Figma AI

概要

Figma AI は Figma に統合された AI 機能群。Figma Make（デザイン→コード変換）、キャンバス常駐の Figma エージェント、MCP サーバーによる外部コーディングツール連携などで、デザインと実装の境界を曖昧にする統合が特徴です。

主な特徴

Figma Make（デザイン→コード）

デザインを AI で HTML/CSS/JavaScript に変換し、Figma を離れずに調整・テスト・エクスポートできます。ローカルのコードベースに接続して、キャンバス上の要素に注釈を付けたり、間隔調整やコンポーネント差し替えを行い、そのまま PR を作成することも可能です。生成モデルとして GPT-5.6 が全プランで利用できます。

Figma エージェント

デザインシステムのガードレール内で、デザインの生成・リミックス・反復作業の自動化を行うキャンバス常駐エージェント。チーム独自のスキルとワークフローを定義でき、Web 検索・外部ファイルの添付・MCP 経由の外部ツール接続に対応します。Professional 以上の Full シートが対象で、ベータ期間中はクレジットを消費しません。

Figma Motion（オープンベータ）

キーフレーム・イージング・スプリングを備えたネイティブのタイムラインアニメーション機能。3D トランスフォームとコードエクスポートに対応し、エージェントに動きを説明して初稿を生成させられます。全プランで利用可能（アニメーション付きコンポーネントの公開は Full シートが必要）。

カスタムシェーダー（オープンベータ）

プロンプトから WebGPU でネイティブ描画されるカスタムエフェクトと塗りを生成できます。有料プランの Full シート向け。

Code Layers（クローズドベータ）

動作するコードをレイヤー種別としてキャンバスに載せ、コードとデザインレイヤーを相互変換できます。

Figma MCP サーバー

Figma デザインのコンテキストを Cursor、VS Code、Windsurf、Claude 等のエージェント型コーディングツールに直接提供します。AI エージェントは既存のコンポーネント・変数・トークンを使って、実際の Figma ファイルに書き込むこともできます。

生成プラグイン（オープンベータ）

エージェントに指示して、独自ワークフロー用の再利用可能なプラグインをファイル内に作成できます。有料プラン向け。

プラン・料金

シートは Full / Dev / Collab の 3 種で、AI クレジットの月間枠がプランごとに設定されています（Full シート以外は一律 500 クレジット/月）。

プラン	Full シート（月・年払い）	Dev シート	AI クレジット（Full）
Starter	$0	—	1 日 150・月 500 まで
Professional	$16	$12	3,000/月
Organization	$55	$25	3,500/月
Enterprise	$90	$35	4,250/月

Collab シートは Professional で $3、Organization / Enterprise で $5。クレジットはアドオンで追加購入できます。

代表的な活用例

• デザイン→コードの自動変換
• Cursor や Claude Code との連携（MCP 経由）
• AI エージェントによる Figma ファイルの自動編集
• プロトタイプ・アニメーションの高速作成
• デザインシステム準拠の AI 生成

強み

• ✅ Figma Make でデザイン→コード変換、PR 作成まで
• ✅ MCP サーバーで他の AI ツールと連携
• ✅ AI エージェントが Figma に書き込める
• ✅ チーム独自スキルでエージェントをカスタマイズ可能
• ✅ Motion / シェーダーで表現の幅が広い
• ✅ 既存 Figma ユーザーに追加学習不要

弱み

• ❌ AI クレジットに月間上限があり、重い生成では追加購入が必要
• ❌ シェーダー・生成プラグインは有料プラン限定
• ❌ Canva に比べるとデザイン初心者には敷居が高い
• ❌ MCP 統合は技術者向け

公式情報

• 公式サイト: https://www.figma.com
• Figma Make: https://www.figma.com/make
• Figma AI: https://www.figma.com/ai