WebDesigner's Memorandumウェブデザイナーの備忘録

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

Figmaで簡単に波線を作るプラグイン「Get Waves」

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

Get Waves

Get Waves

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

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

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

基本的な使い方

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

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

Get Wavesの基本の使い方

曲線の種類を選択

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

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

曲線設定による違い

塗りの場所を選択

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

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

塗りの反転設定

複雑さの設定

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

複雑さの設定による違い

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

実際に生成された要素

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

実際に生成される要素

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね