Figma Drawは、イラストやアイコン、グラフィックなどの制作に特化したFigmaの描画機能セットです。ブラシやパターンに加え、強化されたベクター編集機能も備えています。
前回の記事『ブラシやパターン作成が可能に！Figma Drawでひろがるデザイン表現』では、Figma Drawの手描き感を出せるブラシやパターン等を紹介しました。
今回は続編として、Figma Drawのベクター編集モードを中心に紹介します。また、おまけとして新たに増えた3種類のエフェクトについても紹介します。
- ベクター編集モード
- シェイプビルダー
- ペイント
- オフセットベクトル
- バリアブル幅のストローク
- エフェクト
- ガラス
- ノイズ
- テクスチャー
より高機能になったベクター編集モード
Figma Drawでは、ロゴやベクターイラスト制作に役立つ新しい機能が増えています。Figma Drawモードの状態でベクターレイヤーを選択すると、ツールバーのすぐ上に専用のサブツールバーが表示されます。
左側にマスクや結合など既存機能があるほか、右側には［オフセットベクトル］、［ベクトルを簡略化する］といった新たな機能が並んでいます。
オブジェクトを選択した状態でEnterキー（またはダブルクリック）を押すとベクター編集モードに入り、サブツールバーの内容が切り替わります。
編集モード中のサブツールバーには、パスやアンカーポイントを細かく、かつ手軽に調整できる機能が揃っています。
ここからは、新しいツールのなかでも特に便利なものを抜粋して紹介します。
シェイプビルダー
面の分割や結合が簡単にできるようになりました。編集モード中のサブツールバーにある、［シェイプビルダー］（ベン図のようなアイコン）から操作可能です。特に、シェイプビルダーツールを選択中はエリアをドラッグするだけで、複数の形状を結合できるのでとても便利です。
シェイプビルダーは選択中にoptionキー（Mac）／Altキー（Windows）を押すことで「選択した面を削除するモード」に変化します。選択範囲が赤くなるほか、カーソルの右下につくアイコンが「+」から「-」に切り替わるのが特徴です。
細かくアンカーポイントを触らなくても、直感的に操作していけるのが心地よいですね。結合して新たにできた面は、もちろん独立したオブジェクトになるので下の図のように個別に配色したり、切り抜いたりできます。図形同士を組み合わせて新しく複雑な図形を生み出したり、新たな図形をあしらいとして利用するのも楽しそうですね。
ペイント
閉じたパスに対して、ワンクリックで塗りの追加・削除ができるようになりました。編集モードのサブツールバーにある、バケツアイコンから操作可能です。操作対象の領域は事前にシェイプビルダーで分割・結合しておくと便利です。下の図では、「N」のうち左側の円に含まれる領域のみ塗りつぶすため、シェイプビルダーで選択後ペイントで塗りを変化させています。
上の図では、テキストと円形オブジェクトの組み合わせに対して、ペイント機能を使用して一部をマスクしているような表現をしています。グラデーションの円の箇所は、ペイント前にシェイプビルダーでパスを整理（すべて円に含めるようエリアをドラッグ）してから塗りつぶしを行っています。
バリアブル幅（可変幅）のストローク
線の一部だけ太さを変えて、ニュアンスや抑揚をつけられます。アイコンやロゴに動きや手描き感を出したいときに便利です。編集モード中のサブツールバーにある［バリアブル幅］から操作できます。
上の図では雪だるまのイラストのストロークを、設定してある太さからより太くしたり、逆に細くして強弱をつけています。均一なストロークとはまたひと味違う印象になりますね！
抑揚のついたストロークは、いくつかプリセットでも用意されています。線を選択状態のまま、Figma右側の［線の詳細設定］から［線の設定］パネルを開き、［幅プロファイル］から選択できるので試してみてください。
オフセットベクトル
オブジェクト選択時のサブツールバーにある［オフセットベクトル］から操作可能です。Adobe Illustratorでいう「パスのオフセット」に近い機能で、ベクターレイヤーの外側・内側に均一にフチを作れます。外側に広げたあとに内側にヘコませることで、これまで作りにくかったメタボール風の形も作れるようになりました。元に戻しにくい操作のため、作業前にレイヤーを複製しておくと安心です。
テキストと組み合わせて、ステッカー風の表現をする際も便利です。
おまけ：新規追加されたエフェクト
Figma Drawの発表と同時期に、Figmaの既存エフェクト機能にも新しい種類が追加されました。Figma Drawの機能ではありませんが、こちらもデザイン表現の幅を広げる機能として紹介します。
- ガラス
- ノイズ
- テクスチャー
ガラスエフェクトはAppleが提供するFigma用のiOS 26・iPadOS 26のUIキットでも使用されています。
ノイズやテクスチャーについては、似た表現をプラグインでまかなっていた方も多いのではないでしょうか。Figma標準機能であるエフェクトとして効果を適用すると、テキストを編集可能な状態で保てるので嬉しいですね。
ガラスエフェクトは、フレームのみ適用可能なので注意が必要です。上のテキストに適用した図では、ガラスエフェクトを適用した円形のフレームを用意して、テキストレイヤーの上に置くことで、「g」や「s」の字を歪ませています。とても面白い効果が得られるので、UIデザインだけでなくバナー等のデザイン表現に用いてみるのもいかがでしょうか？
テキストだけでなく、もちろん他のオブジェクトや画像にも適用できます。各エフェクトの強弱はそれぞれ細かく設定もできるので、ぜひ試してみてください。
まとめ
Figma Drawのベクター編集モードと新エフェクトにより、制作の幅がさらにひろがりました。気になる機能はあったでしょうか？ 他のデザインツールで行っていたような細かい調整・表現が、Figma上で完結できる場面が増えそうです。
- ベクター編集の操作性が向上
- ストロークのニュアンスが出しやすくなった
- エフェクトで手描き感やガラス表現も可能に
ぜひ、新しい機能を触って自分のデザイン表現に取り入れてみてください！
