Figmaで簡単に波の素材を生成するプラグイン「Get Waves」
デザインのあしらいで、波を背景に表示させたいときがあります。
ある程度キレイな素材を作るのは面倒ですが「Get Waves」を使うと一瞬で生成できます。
Get Waves
Get Wavesは波状のベクター素材をランダムで生成するプラグインです。
インストールするとメニューバーに［Plugins］→［Get Waves］が追加されます。
ちなみに、Get Wavesはプラグイン以外にもウェブサイトで同じように生成してSVGファイルやコードをダウンロードできます。
たまにしか使わないのであればこちらをブックマークして使うのでもよさそうです。
ただし、プラグインを使った方がダウンロードして配置する手間が省けます。
基本的な使い方
メニューバーの［Plugins］→［Get Waves］を選択すると、「Get Waves」パネルが表示されます。
下にプレビューが表示されるので、「曲線の種類」「塗りの場所」「複雑さ」の3つを設定して「Create」をクリックすると、要素が追加されます。
曲線の種類を選択
曲線の種類は3パターンです。
- Wave：波状
- Step：階段状
- Paek：折れ線状
塗りの場所を選択
要素の塗りを下側にするか上側にするか選択できます。
最初みたときに、下側に色がつくのに矢印の方向は上を向いているので矢印の方向が逆じゃないか？と思ったのですが、どうやら波が上方向に生成されるか下方向に生成されるかの「向き」で矢印を設定しているようです（ウェブサイトのHTMLを見てidがupとdownになっていたので、そういうことだと解釈しました）。
複雑さの設定
最後にスライダーで波の複雑さを設定できます。
左にいくほどシンプルで、右にいくほど複雑になります。
そして、一番右にあるアイコンをクリックすると再生成できます。
実際に生成された要素
「Create」をクリックすると、横幅1200pxで、高さは生成した波によりますがだいたい250〜300pxほどのベクター要素が生成されました。
背景色も自由に変更可能です。
この波に合わせてテキストを配置したい場合は、「arc」というテキストをカーブに合わせて調整できるプラグインがあるので、これと組み合わせるとFigma上でうまくテキストも合わせられます。
