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

URL: https://webrandum.net/figma-plugin-get-waves/
公開日: 2022-04-08
更新日: 2022-04-07
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

デザインのあしらいで、波を背景に表示させたいときがあります。

ある程度キレイな素材を作るのは面倒ですが「Get Waves」を使うと一瞬で生成できます。

## Get Waves

![Get Waves](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-2-2-scaled.jpg)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F745619465174154496%2FGet-Waves?w=160)Figmahttps://www.figma.com/community/plugin/745619465174154496/Get-WavesFigma 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!](https://www.figma.com/community/plugin/745619465174154496/Get-Waves)

Get Wavesは波状のベクター素材をランダムで生成するプラグインです。

インストールするとメニューバーに［Plugins］→［Get Waves］が追加されます。

ちなみに、Get Wavesはプラグイン以外にも[ウェブサイト](https://getwaves.io/)で同じように生成してSVGファイルやコードをダウンロードできます。

たまにしか使わないのであればこちらをブックマークして使うのでもよさそうです。

[![](https://www.google.com/s2/favicons?domain=getwaves.io)getwaves.io![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/6745b53755eb1d6f43583ecdad6243888501d1943b6c5fc1184fdcf1d3e5be8d.webp)Get Waves – Create SVG waves for your next designhttps://getwaves.ioA free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!](https://getwaves.io/)

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

## 基本的な使い方

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

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

![Get Wavesの基本の使い方](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-4.png)

### 曲線の種類を選択

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

- Wave：波状

- Step：階段状

- Paek：折れ線状

![曲線設定による違い](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_3-4.png)

### 塗りの場所を選択

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

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

![塗りの反転設定](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_4-3.png)

### 複雑さの設定

最後にスライダーで波の複雑さを設定できます。

左にいくほどシンプルで、右にいくほど複雑になります。

![複雑さの設定による違い](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_5-2.png)

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

## 実際に生成された要素

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

背景色も自由に変更可能です。

![実際に生成される要素](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_6-1.png)

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/04/eyecatch-3.png)Figmaでテキストをカーブに合わせて変形させるプラグイン「arc」https://webrandum.net/figma-plugin-arcちなみに、プラグインインストールページのアイキャッチ画像内や、パネルタイトルは「Arc」のようにAが大文字になっています。しかし、ページタイトルやメニューバーの表記は「arc」と小文字になっています。ページタイトルを優先した方がいいと思い、この記事では上記特定の箇所を除いて「arc」の小文字で統一します。arcこのプラグインは、以前紹介した「SkewDat」と同じ作者のプラグインです。基本的な使い方まずはテキストレイヤーを選択して、メニューバーの［Plugins］→［arc］を選択します（選択するテキストは1つ）。パネルが...](https://webrandum.net/figma-plugin-arc)