こんにちは、ハヤマです。
今回は、今年実装されたFigmaの新機能「Figma Draw」について書いていきたいと思います。
Figma Drawとは？
2025年開催の「Figma Config」で発表された新機能で、Figmaで直接高クオリティのベクターイラストが描くことができるというもの。
Figmaアカウントを持っていれば無料で利用することができます。
Figma Drawでできる表現
-
①ブラシスタイル（鉛筆＆ブラシ）
様々なスタイルのブラシの中から、イラストの雰囲気にあったブラシを選ぶことができます。 -
②ダイナミックなストローク
線の頻度・波・柔らかさを設定して、でこぼこした手書き感のある線を演出します。 -
③バリアブルな線
線幅を編集して、均一ではない自由な線を引くことができます。 -
④テクスチャとエフェクト
イラストに質感を持たせるノイズ表現やテクスチャの付与のほか、シャドウやぼかし処理などのエフェクトを追加することができます。
公式の紹介ページに「ツールの切り替えはもう不要です」と書いてありましたが、イラスト表現を豊かにするツールが思った以上に搭載されています。
案件がWEB・SNSに限られる場合に重宝しそうです。
ツールについて
ツールバーの一番右から3つ目にある曲線ラインのアイコンをクリックします。
すると、ツールバーの左側にFigma Drawツールアイコンが表示されます。
イラストの描画は、この3つのツールを使って行います。
ペンツール自体はもともとある機能ですね。
Illustratorのパスと同様にアンカーポイント（点）とセグメント（線）を、ハンドル（方向線）で調整をしながら描画していきます。
ブラシツールと鉛筆ツールは、マウスやペンタブで直感的に引いた線が自動でベクター化されます。
ブラシツールで描画
まずはブラシツールを試してみます。
ブラシツールのアイコンを選択すると、線の太さとブラシスタイルのパネルが表示されます。
思った以上に種類があって驚き。
「Heist」というブラシを使ってりんごを描いてみました。
太さの強弱と線に揺らぎがついて、アナログの雰囲気が出ますね。
作成した線をダブルクリックすると、イラストを構成するアンカーポイントとセグメントが表示されます。
ベクターなので、手直しも自由。
アンカーポイントの調整やブラシの太さ、用途に合わせてブラシのスタイルや色を変更することが可能です。
イラストを選択すると右サイドバーにFigma Drawのプロパティパネルが表示されるので、必要に応じて編集します。
今回はパスを整えつつ、ブラシスタイルと色を編集して、かわいらしい雰囲気に変更します。
ブラシスタイルの質感も良いですし、イラレとほぼ同じ操作感です。
（鉛筆ツールの操作はブラシと同様なので、割愛します。）
線に個性をつける
次は、線に対し揺れや強弱をつけて、シンプルな線に風合いをプラスしていきます。
サンプルイラストはこちら。
①ダイナミックなストロークを追加
この操作では、線に対し“揺れ”を加えていきます。
Illustratorでいう「ラフ」の効果です。
イラストを選択した状態で、「線」のプロパティパネルにある「線の詳細設定」アイコンをクリックすると、線の設定パネルが表示されます。
「基本」「動的」「ブラシ」とタブがあるので、「動的」を選びます。
- 頻度：線の揺れの間隔。数値が高いほど小刻みになる。
- ウィグル：線の揺れの大きさ。数値が高いほど大きく揺れる。
- スムーズ化：線の滑らかさ。数値が低いほどギザギザになる。
上記の数値を変更して、しっくりくるところを探していきます。
線にでこぼこがついて、手描き感が出ました。
②バリアブルな線幅に変更
この操作では、線幅に任意で強弱をつけて不均一にしていきます。
Illustratorでいう「線幅ツール」です。
イラストのアンカーポイントを表示した状態で、「バリアブル幅」アイコンをクリックします。
アンカーポイントを選択すると、ポイントの色がピンクに変わると思います。
その状態でドラッグすると、線の太さを変更できます。
線にインクだまりを感じる強弱を加えることができました。
※バリアブルな線幅は、先述のダイナミックなストローク処理との併用はできません。
イラストに質感を加える
今度は、イラストに対しエフェクトをかけて質感を加えてみたいと思います。
エフェクトは、以下のような種類があります。
・インナーシャドウ
・ドロップシャドウ
・レイヤーブラー
・背景のぼかし
・ノイズ
・テクスチャー
・ガラス
ノイズを追加
今回は、ノイズを加えていきます。
対象を選択して、エフェクトから「ノイズ」を選びます。
「モノ」「Duo」「マルチ」からノイズの種類を選んで、数値や色を調整していきます。
さいごに
実際に使ってみて、Illustratorで行っていた作業がストレスなくFigma上でも操作できるようになって驚きでした。Figmaの進化はすごいですね。
Figma Drawでの描画の操作自体はIllustratorとほぼ同じなので、同じ容量でサクサク作れました。
ブラシの種類が豊富なので作りたいテイストに合わせて色々選べるのが嬉しいし、楽しかったです。
注意点として、プロジェクトの中にDTP案件が含まれている場合は今まで通りIllustratorを活用した方が良いです。
FigmaではCMYKでの描画ができないことや、「sRGB」「Display P3」以外のカラープロファイル対応がないためです。制作内容に応じて使い分けるといいですね。
描いたイラストはSVGファイル保存ができるので、Illustratorで開くことも可能です。
（ただし、エフェクトは消えてしまうようです）
公式から、学習のしやすいプレイグラウンドも用意されています。
気になった方は遊び感覚で触ってみてください。
Figma Draw Playground
ブラシは独自のカスタムブラシを作成することも可能です。
興味のある方は以下を参照してみてください。
カスタムブラシスタイルの作成
元の記事を確認する
