Figmaで簡単に波の素材を生成するプラグイン「Get Waves」

デザインのあしらいで、波を背景に表示させたいときがあります。
ある程度キレイな素材を作るのは面倒ですが「Get Waves」を使うと一瞬で生成できます。

Get Waves

Figma

Figma

https://www.figma.com/community/plugin/745619465174154496/Get-Waves

Figma Community plugin — Get Waves is a free SVG wave generator to make unique SVG waves for your next design. Choose a curve, adjust the complexity, randomize!

Get Wavesは波状のベクター素材をランダムで生成するプラグインです。
インストールするとメニューバーに［Plugins］→［Get Waves］が追加されます。

ちなみに、Get Wavesはプラグイン以外にもウェブサイトで同じように生成してSVGファイルやコードをダウンロードできます。
たまにしか使わないのであればこちらをブックマークして使うのでもよさそうです。

getwaves.io

Get Waves – Create SVG waves for your next design

https://getwaves.io

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!

ただし、プラグインを使った方がダウンロードして配置する手間が省けます。

基本的な使い方

メニューバーの［Plugins］→［Get Waves］を選択すると、「Get Waves」パネルが表示されます。

下にプレビューが表示されるので、「曲線の種類」「塗りの場所」「複雑さ」の3つを設定して「Create」をクリックすると、要素が追加されます。

曲線の種類を選択

曲線の種類は3パターンです。

• Wave：波状
• Step：階段状
• Paek：折れ線状

塗りの場所を選択

要素の塗りを下側にするか上側にするか選択できます。

最初みたときに、下側に色がつくのに矢印の方向は上を向いているので矢印の方向が逆じゃないか？と思ったのですが、どうやら波が上方向に生成されるか下方向に生成されるかの「向き」で矢印を設定しているようです（ウェブサイトのHTMLを見てidがupとdownになっていたので、そういうことだと解釈しました）。

複雑さの設定

最後にスライダーで波の複雑さを設定できます。
左にいくほどシンプルで、右にいくほど複雑になります。

そして、一番右にあるアイコンをクリックすると再生成できます。

実際に生成された要素

「Create」をクリックすると、横幅1200pxで、高さは生成した波によりますがだいたい250〜300pxほどのベクター要素が生成されました。
背景色も自由に変更可能です。

この波に合わせてテキストを配置したい場合は、「arc」というテキストをカーブに合わせて調整できるプラグインがあるので、これと組み合わせるとFigma上でうまくテキストも合わせられます。

Webrandum

Figmaでテキストをカーブに合わせて変形させるプラグイン「arc」

https://webrandum.net/figma-plugin-arc

ちなみに、プラグインインストールページのアイキャッチ画像内や、パネルタイトルは「Arc」のようにAが大文字になっています。しかし、ページタイトルやメニューバーの表記は「arc」と小文字になっています。ページタイトルを優先した方がいいと思い、この記事では上記特定の箇所を除いて「arc」の小文字で統一します。arcこのプラグインは、以前紹介した「SkewDat」と同じ作者のプラグインです。基本的な使い方まずはテキストレイヤーを選択して、メニューバーの［Plugins］→［arc］を選択します（選択するテキストは1つ）。パネルが...