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 layoutDesignモードに切り替えずにオートレイアウトを適用モード切り替えなしでレスポンシブイラストモード切り替えが必要
インラインレイヤーラベルレイヤーパネルにコンポーネント/インスタンス/テキストタイプを表示複雑なファイルでのナビゲーションが簡単汎用的なレイヤー名
パス上のテキストパスにテキストを追加、または円上のテキストを作成曲線テキストをネイティブで(プラグイン不要)プラグインが必要
豊富なブラシコントロールより多くの筆圧、傾き、テクスチャオプションより表現豊かな手描きスタイル限定的なブラシオプション
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がこの構造を自動的に追加します。

📬 この記事は役に立ちましたか?

週1回、実用的なAIインサイトをお届け。購読時に無料プロンプトパックをプレゼント。

無料で購読 →

よくある質問

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内に留まり、デザインシステムトークンを使用し、レスポンシブにオートレイアウトされます。

開示:この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。