2025年5月に開催されたFigma Config 2025で、新たにFigma Drawが発表されました。Figma Drawはイラスト制作等に特化した機能群です。これによりFigmaでイラストやバナー制作に活かせる表現の幅がぐっと広がりました。
本記事では、Figma Drawの以下機能を使用した表現を順番に試していきます。
- ブラシツール
- ダイナミックストローク
- パターン
- 線形リピート
- パス上のテキスト
※ほかにも様々な面白い機能がありますが、今回は抜粋して紹介します。
Figma Drawはどこで使える？
機能紹介の前に、Figma Drawはどこから使用できるのか簡単に説明します。Figma Designでファイルを開いたあと、下部のツールバーにある右端のボタンからFigma Drawモードに切り替えると使用できます。
左側にペンツール、ブラシツール、鉛筆ツールのリッチな見た目のアイコンが増えています。機能によっては必ずしもツールバーのモード切り替えが必要ではないですが、特にブラシや鉛筆を初めから使用する場合は切り替えておくとよいでしょう。
ブラシツール
ツールバーからブラシを選択して、フリーハンドで線を描けます。描いたストロークは自動でパスになり、アンカーポイントがつくので、あとから編集も可能です。
10種類以上のブラシが初めから登録されています。線として編集可能なので、後から別のブラシに変えたりパスへの適用もできます。
MacとiPadだとSidecarが有効活用できます。FigmaのウィンドウをiPadに移してApple Pencilを使用するとお絵描きソフトに近いような使用感が得られます。※「元に戻す・やり直す」といった操作はキーボードが必要で、現状では若干操作に難がある状態ですので改善に期待しています。
ダイナミックストローク
ブラシほど抑揚やテクスチャー感をつけなくてよい場合は、ダイナミックストロークもオススメです。でこぼこした手書き感を出しつつもブラシよりも均一な線を描けます。
線パネルから［ダイナミックなストローク］を選択して適用できます。
ダイナミックストロークは、線の詳細設定から［動的］を選択し、上から［頻度］［ウィグル］［スムーズ化］の３つの設定項目を調整しながら設定します。
- 頻度：線がでこぼこする数
- ウィグル：でこぼこの大きさ
- スムーズ化：でこぼこの滑らかさ。数値が低いほどとがる。
同じ太さの線でも、上記の設定項目を変えると次のイラストのように少し異なる印象になります。
パターン
任意のオブジェクトを選択して、そのオブジェクトを塗りや線としてレイヤーに敷き詰められるようになりました。
繰り返すオブジェクトの大きさ、オブジェクト同士の間隔、並び方など様々に設定できます。同じオブジェクトを元にしたパターンでも、いろいろな見た目を作成できそうですね。
パターン参照元のオブジェクトを編集すると、適用している箇所も自動的に変化します。次の図では、参照元オブジェクトの色を変化させています。
ドットなどよく使用するパターンも、次のように単純なオブジェクトをひとつ用意するだけでパターン化できます。
今までオブジェクトを繰り返して配置する際は、オートレイアウトや画像のタイル状配置などやや手間のかかる方法を試したりプラグインを活用する人も多かったと思います。
パターンの参照元には、シェイプはもちろんのことテキストやベクター、画像なども設定できます。パターン塗りが設定されているオブジェクト自体も、別のレイヤーの塗りの参照元として設定できるので使い方次第で様々な表現ができそうですね。
パフォーマンス観点のメリット
パターンの機能を利用した制作は、便利なだけでなくパフォーマンス面での利点もあります。次の図は、同じ円のオブジェクトをパターンで配置した場合と、オートレイアウトで配置した場合でのメモリー使用率の比較です。
比較にあたって用意した環境は次のとおりです。
- ページを2つ用意して、両方にメモリー使用率が1%になるようにレイヤーを配置
- 使用率が少なすぎる場合、パーセンテージの数値が表示されないため
- 片方のページに、
20000×20000px のフレームに100×100pxの円オブジェクトをパターン機能で敷き詰める。 - もう片方は円オブジェクトを1枚ずつオートレイアウトで敷き詰める。
結果は、パターンを使用したページは、パターンのフレーム追加後も変化はなく1%を保っています。一方で、オートレイアウトで1枚ずつ配置したページは4.9%に増えています。
オートレイアウト側はレイヤー数が4万ほどにもなるため極端なサンプルではありますが、チリツモで重くならないよう改善しやすいポイントだと思います。
実際に2つのフレームを動かす際も、パターン側は軽快ですがオートレイアウトのほうは、ややぎこちない動きになります。
※Figmaのメモリー使用率は、メニューバーの［閲覧］→［メモリー使用率］にチェックを入れて表示できます。図にあるレイヤーごとの使用率を出すには、メモリー使用率パネルから［メモリーを管理］をクリックし、［メモリーの使用率をレイヤーパネルに表示］トグルをオンにしてください。
線形リピート
線にもパターンを適用できますが、オブジェクトを横一行や縦一列に繰り返したい場合は［線形リピート］が便利です。次のようなフチの飾りに使えるような表現が手軽に作成できます。
手順は簡単で、Figma Drawモードにした状態でオブジェクトを選択し、右上のメニューから［線形リピート］をクリックして作成完了です。
パターンと同様、レイヤーはひとつなので軽い状態を保てます。次の図では、横方向に26個並べて間隔を1に指定することでぴったり隣り合うように設定しています。
また、先ほどの［線形リピート］ボタンの隣にある［選択範囲にトランスフォームを適用する］にチェックを入れると、繰り返しているオブジェクトを個別のレイヤーに分割できます。
パス上のテキスト
バナーなどで、テキストがアーチ状に並んだデザインを見かける方も多いのではないでしょうか？ このデザインを実現するために、たとえばAdobe Illustratorでは以前からパスにテキストを沿わせられましたが、今回Figmaでも類似の機能が使えるようになりました。
線のあるパスやシェイプに対して、テキストツールのカーソルを合わせて入力するだけで簡単にパスに沿ったテキストができます。
▲テキストを配置した後は、開始地点にある「◯」マークをつまんで位置を調整できます。
通常のテキストと同様、画面右側のタイポグラフィパネルからテキスト均等配置にしたり、パスの内側への配置も可能です。
まとめ
Figma Drawの機能や使い方を紹介しました。これまで別のデザインツールやプラグインを使用していた表現が、Figma Drawの標準機能で代替可能になってきていますね。プラグインを使用しない、標準機能での作業は次のようなメリットがあります。
- プラグイン起動の手間なくスピーディに作業できる
- ファイルを軽く保ちやすい
- 既存機能と組み合わせがしやすい
グラフィカルな表現を得意とするデザインツールにはまだまだ及ばない点もありますが、ちょっとしたものであればFigmaで手軽に作れるようになりました。
以前のFigmaでできるデザイン表現を紹介した記事『Figmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS』から約1年でこのように機能が充実したので、これからの進化にも期待大ですね！
Figma Drawでは今回紹介した以外にもいろいろな機能があります。詳しくは、公式サイトや公式が提供するプレイグラウンドのデザインデータもご覧ください。
