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