Contents
AI ブラシとは何か ― 概要と主な特徴
Figma Draw に 2026 年に搭載された AI ブラシ は、テキストプロンプトだけでベクターベースの筆跡を自動生成できるツールです。デザイン作業の「描く」工程を大幅に短縮しつつ、出力は SVG パスとして保持されるため拡大縮小やレイヤー編集が自由に行えます。
- ベクターベース：生成結果はすべて SVG パスで保存（無限スケール）。
- マルチレイヤー対応：ストロークごとに独立したレイヤーが作成され、個別編集が可能。
- リアルタイムプレビュー：プロンプト変更を即座にキャンバス上で確認できるウィンドウを搭載。
これらの特長は、従来のラスタ生成ツールと比べて「拡大しても劣化しない」点と「チーム全員が同時に結果を見る」点で優位です。
AI ブラシの有効化手順と UI の位置
AI ブラシはデフォルトでは無効化されていますので、まず設定画面から機能をオンにします。以下の流れで数クリック完了です。
- 右上メニュー → Settings（設定） を開く。
- 左サイドバーの Plugins（プラグイン） タブへ移動。
- AI Brush のスイッチを ON にする。
有効化後、ツールバー左側に新しい筆先アイコンが表示されます。このアイコンをクリックするとプロンプト入力パネルが展開し、すぐに描画モードへ切り替えられます。
UI の位置は Figma 2026 バージョン 2.14 に統一されています（[1]）。
プロンプト作成と主要パラメータの使い方
3 要素で構築するプロンプト構造
| 要素 | 説明 | 記述例 |
|---|---|---|
| 対象 | 描きたいオブジェクトや形状 | 「丸いボタン」 |
| スタイル | デザインテイストや雰囲気 | 「フラットデザイン」 |
| ディテール | 線幅・色・滑らかさなど具体的指示 | 「線幅 2 px、カラー #0055FF」 |
ポイント：日本語でも英語キーワードでも構いませんが、できるだけ具体的に記述すると生成精度が向上します。
用語解説（日本語読者向け）
| パラメータ | 意味・効果 |
|---|---|
strokeWidth |
線の太さ。単位は px で、ベクターパスのストローク幅を直接指定します。 |
smoothness |
曲線の滑らかさ（0.0〜1.0）。数値が低いほど手書き感が強く、高いほど直線的・均一になります。 |
colorPalette |
使用する色セット。HEX 形式や CSS カラー名で複数指定可能です。 |
実際の入力例
|
1 2 |
"丸みを帯びた通知アイコン, フラット, 線幅 2px, カラー #007AFF, smoothness 0.8" |
上記プロンプトを入力すると、リアルタイムプレビュー ウィンドウに即座にベクターレイヤーが表示されます。必要に応じて Apply ボタンでキャンバスに確定してください。
AI クレジットの消費モデルとコスト最適化
AI ブラシは AI クレジット を消費して動作します。クレジットはプランごとに月額で付与され、超過分は従量課金となります（[2]）。
| プラン | 月間付与クレジット | 超過時単価 |
|---|---|---|
| Free | 500 クレジット | $0.02 / クレジット |
| Professional | 5,000 クレジット | $0.015 / クレジット |
| Enterprise | 30,000 クレジット（実質無制限） | カスタム割引あり |
消費の目安
- 1 回の生成：平均 2 〜 5 クレジット（ストローク数・解像度に依存）。
根拠：Figma ヘルプセンターの「AI Credit Consumption」ページに掲載された統計データ。
コスト削減テクニック
- バッチ生成：同一スタイルのアイコンやシンボルは 1 回のプロンプトで複数出力し、クレジットあたりの生成数を最大化。
- プロンプトテンプレート保存：頻繁に使う構文はテンプレートとして保存し、微調整だけで再利用することで無駄な生成を回避。
- プレビュー活用：
Apply前にプレビューで確認し、不要な確定操作を防止。
クレジット残高は左サイドバーの Account → AI Dashboard からリアルタイムで確認できます。
共同編集時のデータ同期とバージョン管理
AI ブラシは Figma の既存コラボレーションエンジンに統合されているため、生成したベクターレイヤーは即座に全参加者のビューへ反映されます。
同期フロー（概要）
- ローカルプレビュー：作業中はブラウザ側で一時的に結果を保持。
- 確定リクエスト：
Applyを押すとサーバーへ生成リクエストが送信され、完了後に全クライアントへブロードキャスト。
コンフリクト回避のベストプラクティス
| 操作 | 推奨方法 |
|---|---|
| 同一レイヤーへの同時編集 | アイコン左側の ロック をクリックして排他制御（ロック中は他ユーザーが編集不可）。 |
| 変更履歴の確認 | History パネル から任意のステップを選択し、復元または比較が可能。 |
| バージョン保存 | 重要なマイルストーンでは File → Version History → Create New Version を実行しスナップショット取得。 |
この仕組みにより、複数デザイナーが同時に AI ブラシを利用してもデータの衝突や情報ロスを防げます。
従来ツールとの比較と実務活用シナリオ
機能比較表（Figma AI ブラシ vs. Adobe Illustrator AI ブラシ）
| 項目 | Figma AI ブラシ (2026) | Adobe Illustrator AI ブラシ |
|---|---|---|
| 出力形式 | 純粋な SVG パス（ベクター） | ラスタ + ベクトル混在 |
| リアルタイムプレビュー | あり（入力即時表示） | なし（生成後確認） |
| 共同編集 | ネイティブで同期可能 | 別ファイル共有が必要 |
| 課金モデル | AI クレジット制（従量課金） | サブスクリプションに含む |
| カスタムパラメータ数 | 5 種以上（strokeWidth, smoothness 等） | 限定的（サイズ・色のみ） |
実務シナリオ別活用例
1️⃣ アイコンセットの高速生成
- 目的：デザインシステムに統一感のある 20 種類のアイコンを作成。
- 手順：共通スタイル（線幅 2 px、カラー #007AFF）をテンプレート化し、対象名だけ差し替えてバッチ生成。
- 効果：従来手動で描く場合の約 30 % 時間短縮＋クレジットは 1 バッチあたり約 40 クレジットに抑制。
2️⃣ マイクロインタラクション用ベクターアート
- 目的：ホバー時に出現する波紋エフェクトをベクターパスで実装。
- 手順：「波紋、円形、線幅 1 px、smoothness 0.7」 と指示し、生成後に Figma のプロトタイピング機能と組み合わせる。
- 効果：ラスタ画像を別途用意する必要がなく、ベクターデータだけで軽量なインタラクションが実現。
3️⃣ ブランドガイドラインへの自動適用
- 目的：社内ブランドカラーとフォント情報を統一したロゴバリエーションを作成。
- 手順：ブランドカラーパレット（HEX 配列）とフォント名を
colorPaletteとして保存し、プロンプトで呼び出すだけで即座に適用。 - 効果：デザイナー間のカラーずれがなくなり、コンポーネント化されたロゴを全プロジェクトで再利用可能。
まとめ
- AI ブラシはベクターベースのテキスト指示生成ツールであり、拡大縮小やレイヤー編集が自由にできる点が最大の強みです。
- 有効化は設定メニューから数クリックで完了し、ツールバー左側に新アイコンが表示されます。
- プロンプトは「対象・スタイル・ディテール」の 3 要素で構成し、
strokeWidthやsmoothnessといったパラメータで細部を調整できます（用語は上記表参照）。 - AI クレジットはプラン別に月間付与され、1 回の生成は概ね 2 〜 5 クレジットです。バッチ処理・テンプレート活用でコストを抑えましょう（公式料金ページ[2]）。
- 複数デザイナーが同時に使用しても リアルタイム同期と履歴管理 が自動的に行われ、ロックやバージョン保存で安全に共同作業できます。
- 従来のベクターブラシや Illustrator の AI ブラシと比べて、出力形式・プレビュー・チーム連携が優れているため、アイコンセット作成・マイクロインタラクション・ブランドガイドラインへの統合など、幅広い実務シーンで即戦力となります。
本記事は 2026 年 3 月に公開された Figma 公式ブログとヘルプセンター情報を基に執筆しています。最新の機能追加や料金改定がある場合は、公式サイトをご確認ください。