Figmaで波線を作れるようにしたい
この記事は上記の課題に向けて作成しています。
Figmaでは簡単に波線を作ることができ、「プラグインを使用する方法」と「パスで一から作成する方法」の2通りがあります。
この記事ではそれぞれの方法で波線の作り方を紹介します。
この記事を読むメリット
- Figmaで波線を作る簡単な方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDで波線を作る方法はこちら
Figmaのプラグインで波線を作る方法
まずはプラグインを導入して波線を作る方法を紹介します。
今回使用するプラグインは「Wave & Curve」というものです。
プラグインで波線を作る手順
- プラグイン「Wave & Curve」をインストールする
- 「Wave & Curve」で波線を作る
- 「Create」を押してアートボードに配置する
プラグイン「Wave & Curve」をインストールする
始めにプラグインを導入します。
ヘッダーメニューの「プラグイン」→「プラグインを管理」を選択します。
続いて検索ボックスに「Wave & Curve」と入力します。
するとWave & Curveが表示されるのでクリックします。
最後に「実行」をクリックするとプラグインがインストールされます。
以上でプラグインの導入が完了です。
「Wave & Curve」で波線を作る
次は導入したプラグインの設定画面から波線を作成します。
「プラグイン」→「プラグインを管理」→「Wave & Curve」で設定画面を開きます。
次に設定画面から作成したい波線を作ります。波線の高さや数などを設定することが出来ます。
「Create」を押してアートボードに配置する
最後に作成した波線をアートボード上に配置します。
設定画面右下の「Create」を選択するとアートボード上に配置されます。
配置された波線はベクターデータなので、色や太さを後から調節出来ます。
プラグインで作成する方法は以上となります。
プラグインで波線を作成する方法の動画
Figmaのパスで一から波線を作る方法
続いてはパスで一から波線を作成する方法を紹介します。
パスで一から波線を作成する手順
- 菱形を作成する
- 菱形を複製する
- 波線の土台を作成する
- 波線に変形させる
菱形を作成する
始めに波線の土台となる正方形を作成します。
正方形は長方形ツールから作成します。サイズは適当で構いません。
※「shift」を押しながら配置すると正方形になります。
作成した正方形の角度を変えて菱形にします。
菱形を複製する
波線の数に必要なだけ菱形を複製します。
まずは菱形を選択した状態で「コンポーネントを作成」をクリックします。
続いて「バリアントの追加」を選択します。
すると菱形が複製されます。
菱形を選択すると「＋」が表示されるので、必要な数だけ複製してください。
波線の土台を作成する
複製した菱形から波線の土台を作成します。
まずは菱形の間隔を狭めます。
菱形全てを選択した状態で間隔を調整します。
続いて菱形全体を横向きに変更します。
全ての菱形のみを選択して複製します。
複製した菱形を選択して「選択範囲の結合」を選択します。
次に「線のアウトライン化」を選択します。
菱形をダブルクリックして、下半分と両端の線を削除します。
全て削除し終わったら波線の土台が完成です。
※線が見えずらい場合は線の色や太さを調節してください。
波線に変形させる
先ほど作成したジグザグ線を波線に変更します。
ジグザグ線を選択して「角の半径」で調整します。
すると波線に変形され、波線が完成します。
パスで一から波線を作成する方法は以上となります。
パスで一から波線を作成する方法の動画
Figmaでは簡単に波線が作成出来る
この記事ではFigmaで波線を作成する2つの方法を紹介しました。
Figmaでは簡単に波線が作成出来ます。
まだやったことのない方は是非試してみてください。
Figmaに関する他の記事はこちら
