目次
Figma とは
Figmaは、ブラウザで実行されるインターフェイスデザインアプリケーションですが、実際にはそれだけではありません。チームベースの共同設計プロジェクトには、おそらくこれが最適なアプリケーションだと言っても過言ではありません。
https://webdesign.tutsplus.com/articles/what-is-figma–cms-32272
無料でワイヤーフレームやUIのプロトタイピングが作れる、ブラウザ上で動作するツールです。
アプリにアイコンを組み込もうと Font Awesome などを覗いてみたのですが、
欲しい感じのものがなかったため、自作することにしました。
Figma はめちゃ使いやすいので、簡単なアイコンであれば慣れたら数分で作れそうです。
今回は以下のサイトを参考に作っていきました。
動画の「次へ」ボタンを作りたい
ということでこんなアイコンを作りました。
Figma にアカウントを作る
利用する前にまずFigma にサインアップする必要があります。
その際、有料アカウントと無料アカウントを選べます。
個人利用の場合は無料で問題ないと思います。
会社などで複数人で編集など使いたい場合は有料の方がよいかもしれません。
詳しくは以下のサイトなどが参考になりそうです。
chot.design: 1-4. Figmaの料金プランと権限管理の説明
作業用のページ作成する
アカウントが作成できたら、https://www.figma.com/files/drafts に行き、「Drafts」の横の「+」ボタンを押します。
すると、作業用のページが作られます。
初期状態は以下のような何もない画面になります。
Frame を作成する
では、まず要素たちを配置するベースとなる領域(= Frame)を作ります。
現実の絵画でいうキャンバスのようなものです。
画面左上の「＃」のようなアイコンの右側、小さい下向きの矢印をクリックし、「Frame」を選択します。
その状態で、画面真ん中の灰色の部分をどこでもいいのでクリックします。
すると、以下のようにFrame が配置されます。
この上に要素たちを配置していく流れになります。
がその前に、作業しやすいようにFrame に3つ設定をします。
- グリッドをつける
- 背景色をつける(これは今回作るものが白っぽいため)
- Frame のサイズを変更(これは作るものによって異なってきますが)
グリッドをつけると方眼用紙のように細かい網目が表示されるので、目視で要素たちの位置を調整するときに役立ちます。
ということでつけます。
Frame を選択した状態で、画面右の「Layout Grid」の右にある「+」を押します。
すると、以下のようにFarme に網目が表示されます。
デフォルトの網目は10px です。
変更もできますが、個人的には10px のままでいいかなと思います。
次にFrame の背景色を変更します。
以下のようにFrame を選択した状態で、画面右にある「Fill」にRGBの数値を入力します。
今回は白っぽいアイコンなので作業時灰色背景の方がみやすいため、aaaaaa と適当に入力しました。
ちなみに最終的にアイコンを書き出すときにはFrame は含めないので、適当でいいです。
最後にFrame のサイズを変更します。
Frame を選択した状態で、画面右にあるW(幅) と H(高さ) を入力すればよいです。
今回は400×400 にしてみました。
Frame の淵にマウスポインタを持ってくると矢印に変化し、それをドラッグすることで動的にサイズ変更も可能です。
これで準備が整いました。
いよいよ要素達を配置していきます。
三角と棒を配置する
画面左上の「□」ボタンの右にある、小さい下向き矢印をクリックし、「△ Polygon」を選択します。
その状態でFrame の中で適当にクリックすると、以下のように三角が配置されます。
まず三角形を回転させます。
以下のように画面右側にある角度の設定を「-90」に設定すると、右向きの三角形になります。
あとは適当に三角形のサイズを大きくし背景色を白にします。
要素の淵からドラッグしてもサイズ変更が可能と書きましたが、その際「Shift」キーを押しながらやると、
アスペクト比を保ったまま拡縮するので便利です！
で、以下のようになりました。
次に、右側に棒を配置します！
画面左上の「□」ボタンの右にある、小さい下向き矢印をクリックし、「□ Rectangle」を選択します。
その状態でFrame の中で適当にドラッグアンドドロップすると、以下のように四角形が配置されます。
あとサイズや位置や色を調整すれば、以下のようになります。
だいぶそれっぽくなりました！
三角と棒を一つの要素として扱うように変更し、アウトライン化する
このままだと背景が真っ白のところに配置したときに何も見えなくなってしまうので、影をつけます。
と言いたいところですが、その前に三角と棒を一つの要素として扱うように変更します。
それぞれの要素に影をつけると、以下の矢印の右側のように影が被ってしまいます(これはこれでかっこいいですが)。
というわけで一つの要素として扱います。
Shift キーを押しつつ三角形と棒をクリックして、複数選択します。
そしたら、その領域内で右クリックをします。
すると以下のようにメニューがたくさん表示されるので、「Flatten」を選択します。
これで一つの要素として扱えるようになります。
更に、アウトライン化をします。
これをすると、アイコンを拡大したときに思ってたのと違う感じになってしまうようです(上述の参考サイト: ポケサイズムより)
以下のように、要素を右クリックしてメニューの中から「Outline Stroke」を選択します。
あとは影をつけて完成です！
影をつける
要素を選択した状態で、以下のように画面右にある「Effects」の「+」を押します。
これで影がつきました。
が、微妙にしか影がついていないので、つき方を調整します。
以下のように、「Drop Shadow」の左にある太陽みたいなマークをクリックします。
設定画面が表示されるので、調整していきます。
それぞれの設定項目はこんな感じ。
- X: 影の横方向の位置
- Y: 影の縦方向の位置
- Blur: 影の範囲
- Spread: 選択できません
- 000000: 影の色
- 25%: 透過度。数値が大きいほど透過しない
調整して以下のようにこうなりました。
Frame の背景を透明にし、グリッドを非表示にすると以下のようになります。
それっぽい！
これで完成！
あとはファイル出力するだけです。
PDF に出力する
要素を選択し、画面右にある「Export」の右の「+」ボタンを押します。
すると、以下のような表示になります。
「PNG」と表示されているプルダウンリストから「PDF」を選択後、その下の「Export Vector」を押せば、
PDFファイルとしてダウンロードされます。
無事アイコンPDFができました！
最後に
けっこう長くなってしまいましたが、この程度であれば、
操作を覚えてしまえばものの数分で作れるボリュームだと思います。
このレベルのデザインが無料でできるのは嬉しいですね🙌
以上です。お疲れ様でした！
Web-y.dev 