Figma Draw — Figma内のイラスト・ベクター編集モード — は2026年5月に最も大きなアップデートを受けました。主要機能は以下の通りです:オートレイアウトがDrawモードで直接動作(Designモードへの切り替え不要)、パス上のテキストがネイティブ対応(プラグイン不要)、インラインレイヤータイプラベルによりナビゲーションが簡単に、そしてより豊富なブラシとテクスチャコントロールで表現力が拡張されました。FigmaのAI画像機能と組み合わせることで、Drawは「UIツール内のベクター編集」から本格的なイラスト環境へと進化しています。
重要なポイント
Figma Drawは専用イラストツールとの差を縮めています。Drawでのオートレイアウトにより、最も一般的なモード切り替えの摩擦が解消されます。パス上のテキストにより、タイポグラフィプラグインが不要になります。そしてAI統合(Make ImageがDrawモードで動作)により、純粋なベクターツールにはない生成機能が追加されます。UI作業と並行してイラストを作成するデザイナーにとって、すべてをFigma内で完結させることで、ツール切り替えの時間を大幅に節約できます。
Drawの変更点(2026年5月)
| 機能 | 機能内容 | 重要性 | アップデート前 |
|---|---|---|---|
| DrawでのAuto layout | Designモードに切り替えずにオートレイアウトを適用 | モード切り替えなしでレスポンシブイラスト | モード切り替えが必要 |
| インラインレイヤーラベル | レイヤーパネルにコンポーネント/インスタンス/テキストタイプを表示 | 複雑なファイルでのナビゲーションが簡単 | 汎用的なレイヤー名 |
| パス上のテキスト | パスにテキストを追加、または円上のテキストを作成 | 曲線テキストをネイティブで(プラグイン不要) | プラグインが必要 |
| 豊富なブラシコントロール | より多くの筆圧、傾き、テクスチャオプション | より表現豊かな手描きスタイル | 限定的なブラシオプション |
| DrawでのAI画像 | Make ImageがDrawモードで直接画像を生成 | ベクター作業と並行して参考画像 | Designモードへの切り替えが必要 |
最も影響の大きい変更:DrawでのAuto Layout
このアップデート前は、レスポンシブイラスト — 適切にスケールするアイコン、テキストの長さに適応するバッジ、コンテンツと共にリフローする装飾要素 — を作成するには、DrawとDesignモード間を常に切り替える必要がありました。イラスト作業はDraw、レスポンシブ動作はDesign、調整のためにDrawに戻り、レスポンシブ性をチェックするためにDesignに戻る、という具合に。
今やオートレイアウトはDraw内にあります。イラストを作成し、オートレイアウトを適用すれば、レスポンシブ動作が同じワークフローの一部になります。これは些細に聞こえるかもしれませんが、UI設計と並行してイラストを作成するデザイナーにとって最も一般的な摩擦点を解消します。アイコンセット、スポットイラスト、アニメーション要素の基盤、装飾的なコンポーネントすべてが恩恵を受けます。
AI + Drawワークフロー
最も興味深いワークフローは、AI生成と手動Draw改良を組み合わせたものです:
ステップ1: DrawモードでMake Imageを使用して参考イラストを生成。プロンプト:「ラップトップで作業する人のミニマルなラインイラスト、単一ウェイトストローク、紫と青のパレット」
ステップ2: 生成された画像を視覚的参考レイヤーとして使用(不透明度を20%に下げる)
ステップ3: Drawのベクターツールを使用してトレースと改良を行い、特定のスタイルを追加し、比率を調整し、ブランドのイラストガイドラインを組み込む
ステップ4: レスポンシブ動作のためにオートレイアウトを適用。一貫したカラートークンのために変数を適用。結果:AIのインスピレーションから始まったが、人間の職人技を持つブランド一貫性のあるレスポンシブイラスト。
これはより広範なAIワークフローパターンを反映しています:AIが出発点を生成し、人間が判断と技術を加える。Design AgentはこれをUI画面で行います。Draw + Make Imageはイラストで行います。原理は同じです:AIが白いキャンバス問題を処理し、あなたが品質を処理します。
Make Imageでより良い結果を得るには、ICCSSEフレームワークでプロンプトを構造化してください。「イラスト」は汎用的な出力を生成します。「ラップトップで作業する人のミニマルなラインイラスト、2pxでの単一ウェイトストローク、ブランド紫(#7C3AED)と青(#3B82F6)に限定、白背景、中央配置、シェーディングなし、SaaSダッシュボードでの200×200pxスポットイラストに適している」は使用可能なものを生成します。無料のPrompt Optimizerがこの構造を自動的に追加します。
よくある質問
Figma DrawはAdobe Illustratorに取って代わりますか?
UI関連のイラスト(アイコン、スポットイラスト、装飾コンポーネント)については:ますますそうなっています。複雑な印刷対応イラスト、高度なタイポグラフィ、プロフェッショナルなベクター編集、UIから独立して存在するイラスト作業については:Illustratorがより高機能のままです。Drawはプロダクトデザイナーにとって重要な機能で追い上げていますが、まだ汎用的なイラスト代替ツールではありません。
Design AgentはDrawでイラストを作成できますか?
Design AgentはUIコンポーネント(フレーム、ボタン、テキスト、画像)で動作し、フリーフォームのベクターイラストは作成しません。Make ImageはDrawで参考として使用できるラスター画像を生成します。AI生成ベクターイラスト専用には、RecraftやSVG専用ジェネレーターなどの専用ツールがより良い選択肢です。エージェントは設計ツールであり、イラストツールではありません。
パス上のテキストはついにネイティブになったのですか?他のツールは何年も前からこの機能がありました。
はい — そして、これがキャッチアップ機能であり、イノベーションではないと指摘するのは正しいです。Illustrator、Sketch、さらにはCanvaでさえ、何年もパス上のテキストを提供してきました。Figmaがこのギャップを埋めることは画期的ではありません;シンプルなタイポグラフィタスクでFigmaを離れる理由を取り除いているのです。ネイティブで持つことは、プラグイン依存を一つ減らし、コンテキスト切り替えを一つ減らすことを意味します。
Drawの改良はAIクレジットを消費しますか?
いいえ — オートレイアウト、パス上のテキスト、ブラシコントロール、レイヤーラベルは標準のFigma機能であり、AI駆動ではありません。Make Image(生成画像ツール)のみがAIクレジットを消費します。従来の描画およびベクターツールは、使用制限なしでベース購読に含まれています。
イラストレーターはProcreateやIllustratorからFigma Drawに切り替えるべきですか?
独立したイラスト作業にはまだ時期尚早です。Drawは製品設計内に存在するイラスト — アイコン、スポットイラスト、装飾的なUI要素 — に最適です。独立したイラスト作業には、Procreate(iPad、自然なメディア感覚)とIllustrator(デスクトップ、最大限のベクター機能)がより高機能のままです。Drawの利点はワークフロー統合です:すべてがFigma内に留まり、デザインシステムトークンを使用し、レスポンシブにオートレイアウトされます。
開示:この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。