[デザイン] Figma でPDF形式のアイコンを作る

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 が配置されます。

Frame を配置

この上に要素たちを配置していく流れになります。
がその前に、作業しやすいようにFrame に3つ設定をします。

  1. グリッドをつける
  2. 背景色をつける(これは今回作るものが白っぽいため)
  3. Frame のサイズを変更(これは作るものによって異なってきますが)

グリッドをつけると方眼用紙のように細かい網目が表示されるので、目視で要素たちの位置を調整するときに役立ちます。
ということでつけます。
Frame を選択した状態で、画面右の「Layout Grid」の右にある「+」を押します。

Layout Grid を選択

すると、以下のようにFarme に網目が表示されます。

網目が表示される

デフォルトの網目は10px です。
変更もできますが、個人的には10px のままでいいかなと思います。

次にFrame の背景色を変更します。
以下のようにFrame を選択した状態で、画面右にある「Fill」にRGBの数値を入力します。

Fill に色を設定

今回は白っぽいアイコンなので作業時灰色背景の方がみやすいため、aaaaaa と適当に入力しました。
ちなみに最終的にアイコンを書き出すときにはFrame は含めないので、適当でいいです。

最後にFrame のサイズを変更します。
Frame を選択した状態で、画面右にあるW(幅) と H(高さ) を入力すればよいです。
今回は400×400 にしてみました。

Frame のサイズを設定

Frame の淵にマウスポインタを持ってくると矢印に変化し、それをドラッグすることで動的にサイズ変更も可能です。

これで準備が整いました。
いよいよ要素達を配置していきます。

三角と棒を配置する

画面左上の「□」ボタンの右にある、小さい下向き矢印をクリックし、「△ Polygon」を選択します。

「△ Polygon」を選択

その状態でFrame の中で適当にクリックすると、以下のように三角が配置されます。

三角が配置される

まず三角形を回転させます。
以下のように画面右側にある角度の設定を「-90」に設定すると、右向きの三角形になります。

三角を回転させる

あとは適当に三角形のサイズを大きくし背景色を白にします。

要素の淵からドラッグしてもサイズ変更が可能と書きましたが、その際「Shift」キーを押しながらやると、
アスペクト比を保ったまま拡縮するので便利です!

で、以下のようになりました。

サイズや色を調整

次に、右側に棒を配置します!
画面左上の「□」ボタンの右にある、小さい下向き矢印をクリックし、「□ Rectangle」を選択します。

「□ Rectangle」を選択

その状態でFrame の中で適当にドラッグアンドドロップすると、以下のように四角形が配置されます。

棒を配置

あとサイズや位置や色を調整すれば、以下のようになります。
だいぶそれっぽくなりました!

それっぽい見た目に

三角と棒を一つの要素として扱うように変更し、アウトライン化する

このままだと背景が真っ白のところに配置したときに何も見えなくなってしまうので、影をつけます。
と言いたいところですが、その前に三角と棒を一つの要素として扱うように変更します。
それぞれの要素に影をつけると、以下の矢印の右側のように影が被ってしまいます(これはこれでかっこいいですが)。

矢印の右側に影が被っていいrいる

というわけで一つの要素として扱います。

Shift キーを押しつつ三角形と棒をクリックして、複数選択します。
そしたら、その領域内で右クリックをします。
すると以下のようにメニューがたくさん表示されるので、「Flatten」を選択します。

Flatten wをsせせnせんtせんたたく選択Flatten を選択

これで一つの要素として扱えるようになります。

更に、アウトライン化をします。
これをすると、アイコンを拡大したときに思ってたのと違う感じになってしまうようです(上述の参考サイト: ポケサイズムより)
以下のように、要素を右クリックしてメニューの中から「Outline Stroke」を選択します。

Outline Stroke を選択

あとは影をつけて完成です!

影をつける

要素を選択した状態で、以下のように画面右にある「Effects」の「+」を押します。

「Effects」の「+」を押す

これで影がつきました。
が、微妙にしか影がついていないので、つき方を調整します。

以下のように、「Drop Shadow」の左にある太陽みたいなマークをクリックします。

太陽みたいなマークをクリック

設定画面が表示されるので、調整していきます。
それぞれの設定項目はこんな感じ。

  • X: 影の横方向の位置
  • Y: 影の縦方向の位置
  • Blur: 影の範囲
  • Spread: 選択できません
  • 000000: 影の色
  • 25%: 透過度。数値が大きいほど透過しない

調整して以下のようにこうなりました。

調整後

Frame の背景を透明にし、グリッドを非表示にすると以下のようになります。
それっぽい!

背景を非表示に

これで完成!
あとはファイル出力するだけです。

PDF に出力する

要素を選択し、画面右にある「Export」の右の「+」ボタンを押します。

「Export」の右の「+」ボタンを押sすす

すると、以下のような表示になります。
「PNG」と表示されているプルダウンリストから「PDF」を選択後、その下の「Export Vector」を押せば、
PDFファイルとしてダウンロードされます。

PDFfふぁいるをファイルをPDFファイルを出力

無事アイコンPDFができました!

最後に

けっこう長くなってしまいましたが、この程度であれば、
操作を覚えてしまえばものの数分で作れるボリュームだと思います。

このレベルのデザインが無料でできるのは嬉しいですね🙌

以上です。お疲れ様でした!

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。