Figma Drawを使ってみた！ Illustratorユーザー目線で機能を紹介

MaromaroでWebデザインやUI/UX制作ツールをFigmaに切り替えて何年か経ちました。導入しやすく複数人同時共同編集でもデータが軽い、コーディング時の連携に強いなどのメリットから、Figmaユーザーの規模は拡大しています。

Figmaといえば、WebサイトやアプリのUIデザインを作るためのツールというイメージがあります。印刷物や映像の制作には向かないですし、イラストやグラフィックにはやはり従来のAdobeのツールが必須です。しかし、実は「Draw」というイラストやグラフィックの作成に使える機能も用意されています。

今回は、「Draw」を実際に使ってみて、普段Illustratorを使っているデザイナー目線で、基本的な使い方や、操作して感じたことを紹介します。

Figmaの「Draw」とは？

Figma Drawは、2025年5月に登場したFigma Designの中でイラストや図形を描画するための機能です。ブラシやペンなどの描画ツールを使って線を描いたり、図形を組み合わせたりというところから徐々にアップデートを重ね、グラフィック系の制作も最近はできることが増えて、使いやすくもなっています。

現在Figma Drawでできること

Illustratorユーザーであれば、名称から何をする機能かすぐわかるのではないでしょうか。（〈〉に、Illustratorの同機能の名称入れてみました）

ブラシツール　〈同名〉
ダイナミックストローク　〈アウトライン→パスの変形〉
パターン　〈同名〉
リピート（線形・放射状）　〈同名〉
パス上のテキスト　〈パス上文字ツール〉
ベクトル簡略化　〈スムース〉
オフセットベクトル　〈パスのオフセット〉
画像のベクター化（Vectorized）〈画像トレース〉
など

（抜粋。2026年8月現在）

いつの間にか、Illustratorでしかできなかった機能がどんどん追加されている印象です。（どこまで増えるのか…）

例えば、ブラシの質感が欲しい時は、バリエーション豊かなIllustrator（またはPhotoshop）の出番！…というように一択なはずなのですが、最近はFigmaにも基本的なブラシが用意されている…。時代の流れが早くて驚きです。

下記の機能はイラレユーザーに馴染みが無く、figma独自かと思われます。　

バリアブル幅の線…一つのパスに複数の線幅を指定できる
ラッソ…ベクターレイヤーの特定の点とパスをドラッグで選択できる

使い方

Figma Drawは、デザインモードとは別のモードになります。下部のツールバーの右のデザインモードボタンの左にある、うねうねマークのボタンを押すと、Figma Drawモードに切り替わります。

↓Figma Drawモードにすると、ツールバーにペンツール、ブラシツール、鉛筆ツールが出てくる

しっかりビジュアル化されたボタンは、ドローイングソフトっぽさが一気に出る素敵な演出ですね。

まずはブラシを使って、ざっくりと線を描いてみます。
イラレと違ってブラシで描画中、線がぬるぬる動きます。描画時のパスずれなど、挙動に私は若干違和感がありましたが、すぐ慣れるレベルと言って良さそうです。

ペンは、通常のペンツール。ポイントとパスで描画します。

ブラシは、現在標準で20種以上の質感が選べました。結構ありますね〜。

鉛筆は、ドラッグで描画します。

ダイナミックストロークは、線の設定の中の「動的」タブにあります。線に揺れの表現を入れられます。

フォントに施せば、チョークのような質感の表現もFigmaで完結。

これらで描いた線はベクターとして編集できるため、あとから形を調整することもできます。Illustratorとほとんど同じような操作方法でできます。

他にもじっくり紹介したいですが、主なもののみで今回は割愛します。

実際に使ってみると、Figmaのデザイン画面の中でそのままイラストを作れるので、Webデザインとの相性が良さそうです。

Illustratorと比べてみた

普段Illustratorを使っているので、実際にDrawを触ってみて気になったのが「Illustratorの代わりになるのか？」というところ。

筆者は普段グラフィックもWebもデザインを担当しているので、ここではWeb制作において、で述べます。

結論としては、Illustratorの代わりというより、FigmaでWebデザインをしている途中に、必要なグラフィックを作るとなった場合、そのまま意図するサイズと場所で作れることが便利だと感じました。

例えば、
「ここにちょっとしたイラストを入れたい」
「オリジナルのアイコンを作りたい」
「手描き風の装飾を加えたい」
といったときに、わざわざIllustratorを開いて素材を作り、書き出してFigmaに配置する……という工程を減らせます。

もちろん、複雑なイラスト制作や細かなパス編集など、Illustratorのほうが向いている作業もあります。

画像のベクター化（Vectorized）は、境目がはっきりした単純なロゴマークなどは綺麗にできました。

実際に使ってみた感想

Figmaを使い始めた当初は、日々のサイト制作において、IllustratorやPhotoshopでデザインパーツを作り込んでからFigmaに貼り付けるという流れは当たり前でした。なぜなら、Figma上で制作できるデザインがシンプルになりがちで、装飾の自由度が低かったからです。

しかし、往年のイラレの歴史を早送りしているようなスピードでFigmaに機能が増えてきた今、実際に使ってみて感じたのは、Figmaの中で、ちょっとしたグラフィックをちゃんと作れるようになって、Web制作との相性が良いということです。

操作性は、細かいところはIllustratorの方が良いなと思う場面もあり、描画時の挙動など気になるところはありますが、動きも軽いですし、シンプルで直感的な操作性はかなり意識されている設計だと思いました。

Illustratorのように本格的なイラストを制作するというより、Webサイトのデザインを作っている途中で必要になった素材を、その場で作れるのがFigma Drawの魅力だと思います。ベクター編集、ブラシ、パターン、パス上テキスト、リピート、テクスチャ表現など、Illustrator（またはPhotoshop）でやっていたことの一部ができるようになってきているので、Illustratorが使えるデザイナーとしては、基本的なグラフィック操作はFigma上で行い、複雑な表現などは引き続きIllustratorで対応し、使い分けて共存させるのが良さそうです。

「Illustratorを開くほどではないけど、ちょっと描きたい」という場面では、かなり使いやすい機能だと感じました。

比較的高価なAdobeのアプリケーションでできる機能を、無料から始められるFigmaにじわじわと搭載しているのは、画期的なことが起きているなあ、とも思います。