ここ最近のFigmaの使い方

以前にQiitaに書いたFigmaの個人的備忘録記事がちょうど1年前のものになり、最近のFigmaの自分なりのFigmaの使い方など見直したところを、あらためてまとめてみました。

ちなみに以下の内容は、主にUIデザインをする時の備忘録です。

8pxグリッドを共通グリッドに

最近、8px単位のグリッドに合わせてデザインするのが自分ルールになっているので8pxの格子状のグリッドを、共通グリッドとして最初に登録しています。

Figmaではグリッドの設定もスタイルとして登録して使いまわすことが出来るようになったので、よく使うものはグリッドスタイルとして登録しておくと、新しい画面とかコンポーネントを作ったときにすぐにグリッドを反映できて便利です。

Nudge設定

矢印キーの移動距離の設定です。
Small nudge（矢印キーのみ）を0.5px、Big nudge（Shift + 矢印キー）は4pxにしています。
「⌘ + /」でメニュー検索呼び出して「nud」とか入力すると「Nudge Amount...」という項目が出てきてそこから設定できます。

Small nudgeを0.5pxにする理由
オープンパス（閉じていないパス）の場合、ピクセルパーフェクトにしたい時に0.5px単位で移動したいことが結構あります。（オープンパスは強制的にライン位置がセンターになるため）
通常の矢印キーでの移動距離を0.5pxにしておくと、オープンパス（ラインツールとか）を使う心理的ハードルが下がって個人的におすすめです。
（これに気づく以前は、1pxのラインとかもRectangleツールで書いたりしてました）

Big nudgeを4pxにする理由
デザインしていると8pxの移動距離は大きすぎる事もあって、4pxとか2pxとか移動したいことがあります。
Big nudgeを4pxにしておくのが一番キーボード押す回数と、移動させる距離が一番バランスがいいです、自分の場合。
• 8px → Shift + 矢印キー × 2
• 4px → Shift + 矢印キー × 1
• 2px → 矢印キー × 4
• 1px → 矢印キー × 2
• 0.5px → 矢印キー × 1

コンポーネントの整理（ページ分けとか位置）はあとでやる

Figmaは以前からコンポーネント推しのUIツールなので、自分もFigmaを使いはじめた当初から作るものはなんでもコンポーネント化しながらデザインするようにしています。

Figmaに限った話じゃないですが、コンポーネントの整理の仕方でメジャーなものといえば「Atomic Design System」ですよね。
Atomic Designのようにコンポーネントの粒度に予め段階を設けて整理する方法は結構一般的になりつつあるのかなと感じています。

ただ、このコンポーネント粒度の判断とか解釈は、作る人・チームによって結構違ってくるところもあって、「今作ってるコンポーネントはどの粒度なのか」に迷うケースも結構あります。（デザインの初期段階とかだと特に）

粒度の判断に迷うのは、単純に慣れの問題もあるとは思うので、単純に自分がめんどくさがりなのかもしれませんが💦、そんな自分の思考として、コンポーネントの管理はもう少しカジュアルに多少散らかしながら作って、ある程度出揃った段階で整理するほうが性に合ってると感じています。

特にガシガシ画面のUIを作ってる段階では、コンポーネントの粒度はあまり考えずに、いろんな場所にコンポーネント作り散らかしています。

コンポーネントは名前で整理する

デザインがある程度進んだあとで、コンポーネントを後から整理する手間は確かにあるので、最低限、コンポーネント名は後で整理することをある程度考えて命名します。

Figmaではコンポーネントの名前を「/」で区切ると、Assetsパネルやコンポーネントの差し替えプルダウンなどで整理された状態で表示してくれるので、ざっくりとコンポーネントの役割や状態は「/」区切りでつけておきます。

❖ ボタン/通常
❖ ボタン/アクティブ
❖ ヘッダー/メニュー/アイテム
❖ ヘッダー/メニュー/アイテム（カレント）
※階層の数とかもあまり気にしないで命名しています。

コンポーネント名の編集には、Figmaのレイヤー名の一括編集機能が使えるし、最近出たプラグインでレイヤー名で自動的にレイヤーをソート出来るものも出てきたので、名前で管理しておけば、後でもある程度は柔軟に整理し直すことができます。

なのであまり細かいルールは設けず、名前である程度意味がわかるようにだけ気を使っている感じです。
（個人的にはアルファベットでもいいんですが、メンバーに英語苦手な人がいたり、日本語のほうがとりあえず感覚的に命名していけるので、日本語にしています）
どうしても補足説明が長くなっちゃう場合はコンポーネントのDescriptionに説明をつらつら書いたり。

とりあえず作業の区切りがついたら「Save To Version History」

Figmaは勝手に作業履歴を保存していってくれますが、とりあえず作業の区切りができたところで「⌘ + Option + S」で作業履歴にタイトルや説明をつけるようにしています。
感覚的にはGitにCommitするような感じです。

後から作業履歴を見る時に、ある程度その履歴につけたタイトルなどで状態が想像できるようになるし、単純に細かく記録することで「俺、今日こんなに作業すすめたじゃん！」と仕事のモチベーションを上げることにもつながっている、、ような気がしています。

また、作業履歴として表示したときに、Titleは1行しか表示されませんが、その下の説明文のほうは複数行表示されるので、Titleはなるべく短く簡潔に、詳細は説明文のほうに書いています。

最後にかるく自己紹介

実はnoteにちゃんと記事を書くのはこれが初めてです。
かつたにげんきと申します。
株式会社インターフィールという会社で受託でUIデザインやWebサイトなどを作る仕事をしています。
これまではTwitter（@nibushibu）くらいでしか情報発信していなかったのですが、今後このnoteに、日頃の仕事で思っていることなど書いていこうと思っています。

よろしくおねがいします。