MENU
CLOSE
DESIGNWEB Edit : 2024.02.08 Update : 2024.01.30

【ナミナミやジグザクなど】figmaで波線を簡単に作る方法

まざまな形状の波線や曲線を簡単に作ることが出来る「Wave & Curve」というプラグインをご紹介します。
デザインにちょっとしたあしらいを加えたい時や、賑やかしで曲線が欲しい時などに、サッと作れて便利なプラグインです。

『Wave & Curve』の使い方

①[Wave & Curve]でプラグインを実行

【ナミナミやジグザクなど】figmaで波線を簡単に作る方法
[プラグイン/Plugins]→[Wave & Curv]でプラグインを実行します。
するとウィンドウに波線と数値が出てきます。

②数値を動かして見た目を希望の形に整える

  • 左の数値が「波の高さ」
  • 中央の数値が「波のゆらめき」
  • 右の数値が「波の幅」
  • スライダーが「波の傾き」
  • 1番下の数値が「波の数」

を調整出来ます。

【ナミナミやジグザクなど】figmaで波線を簡単に作る方法
実際に、プラグイン上で数値を変更している動画はこちらです。


③調整ができたら「create」ボタンを押す

【ナミナミやジグザクなど】figmaで波線を簡単に作る方法
波線がアートボードに出てきます。この波線の線の太さや色味など、通常通り線の調整で変更することが可能です。
また、波線が長すぎた場合はパスを表示で消せて、増やしたい場合はコピーして結合すればいいだけなので調整も簡単です。


波線の他にも、一番上のシェイプ変更部分をクリックすれば、フリルのようなものなど、いくつか変わった形に変更することも出来るので、アイディアのヒントになりそうです。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。