【Figma】プラグインなしで波線図形デザインを作る方法

前回はFigmaで使える神プラグインを紹介しましたが、今回はよく質問で出るFigmaでの波線図形（ジグザグのパスやギザギザ線、省略波線も含む）の作り方をご紹介します。

プラグインを使った方法も有りますが、プラグインを使わない方法をご紹介します。ぜひ参考にしてみてください。

波線を使った図形の作り方【プラグイン不要】

プラグインがなくてもちょっとした波線や図形、ジグザグ線であれば綺麗に作ることができます。

ペンツールを使ってジグザグに線を描画する

ペンツールでジグザグに線を描くのですが、この時キーボードの「shiftキー」を押しながら線を引きましょう。Figmaでは「shift」を押しながらパスを書くことで、綺麗な45度の角度で線を引くことができ、同じ高さのあたりでジグザグ線を自動でスナップしてくれます。

外見パネルから角の半径を調整

Figmaでは直線的な図形であれば角の半径（角丸）プロパティを綺麗に適応することができます。これを使うことで簡単に波線を作ることができます。波線や省略線をそのまま活用したいときはこれだけで十分です。

線のアウトライン化をして塗りに変更

「⌘＋shift＋O」のショートカットもしくはオブジェクトメニューから線のアウトライン化を選択してパスを塗りに変更します。

ボックスを配置し選択範囲の型抜きを実行

アウトラインした波線に対して、ちょうどいいサイズのボックスを後ろに重ねます。その状態で2角オブジェクトを選択肢、「その他のアクション」から「選択範囲の型抜き」を実行します。

さらに選択範囲を結合

このままだと、不要な図形の分割した上部分のみを削除するのがやや面倒なので、同じよう「その他のアクション」から「選択範囲の結合」を実行します。こうすることで、図形の上部分だけをダブルクリックすると選択できるようになり、位置を簡単にずらすことができます。

不要部分を削除して完成

不要部分のみを選択できるようになるので、うまくズラして、不要部分のみを選択し削除することで波線図形の完成です。

必要部分のみを選択した状態で、「コピー&ペースト」を実行するだけでも簡単に波線図形のオブジェクトを作成することができます。

マスクや背景として様々な使い方ができると思いますので、ぜひ試してみてください。

プラグイン「Wave & Cruve」を使った波線の作り方

プラグインを使う場合は、波線の形を細かくコントロールできる無料の「Wave & Cruve」がおすすめです。

直感的に扱えるので、インストールしてから使い方に迷うことはほぼないかと思います。

→Figmaコミュニティでプラグインを見る

この他にも、Figmaで使える実用的なプラグインをこちらにまとめていますので合わせてぜひご覧いただけると幸いです。