ディレクター、PMのためのFigma講座

社内向けに作った教材を全体公開用のブログとして残しておきます。ワイヤーとかを作ってもらって受け取ってデザインを始めたりする際に、こんな使い方してるのかということが日々あり、もう少し効率的な作り方だったり、過度にコンポーネントにしていたり触りづらいという経験から基本的な使い方を覚えてもらうのが良いなと思ったからです。

対象としては、小規模なwebサイトの制作やワイヤーフレーム、資料の制作で使う範囲のものを想定しているので、Variablesを設定して文字の大きさや色など全て管理していくというようなやり方より、その場でささっと作って直していけるようなシンプルさを重視しています。文字をおくこと、線を引くこと、ボタンを作ること、並べることといったことをより丁寧にやることで、普段作っているものが少しだけよく見えるようになるかと思います。ある程度、ツールを使えている人は私はこう使うのが良いというものを自身の作業のやり方を見直す際の叩き台として使ってもらうのが良いかと思います。

グリッドの指定方法、アートボードのサイズについて

グリッドを指定する際は、12分割を基本と考えて良いです。
また、左右にマージンを取りましょう。近年のデザインでは左右にマージンを少なくする全画面的なレイアウトをする傾向がありますが、ワイヤーフレームの段階では情報の見やすさに焦点を当てるので左右50px以上取るのが良いです。
私が、良く使うグリッドの場合は1440px（Figmaの用意しているデスクトップサイズ）で、左右にマージン50px、ガッター（グリッドの余白）は40pxです。
また、昔の場合は一つの大元のグリッドに沿わせてデザインを作る場合が多かったのですが、最近ではグリッドの中にグリッドを入れていくような入れ子状のレイアウトを組む場合が多いです。自身で設定する場合web上のツールを使って値を決めると良いです。
https://www.kenjisugimoto.com/gridpx/

デザインやワイヤーフレームのプレビューについて

ワイヤーフレームをプレビューするときに、単にFigmaの画面を表示するのではなくプレビューモードを使う場合があるかと思います。
その際に、Prototypeの設定をする必要があります。ワイヤーもデザインもPCとSPでページを分ける必要があります。
PC用の場合、Custom Sizeを選択して横幅を1440（アートボードの横幅）縦幅を900px（より狭い検証をするためには800pxでも良いかも）にします。SPの場合は、最新のものを選択してください。（iPhone 16 Pro）
アートボードを新しく作る際も、最新のもののサイズにするのが良いです。（持っているものに合わせるのも良いですが、だいぶ前のものだと現状（今後）のサイズ感とかけ離れてくるのでできるだけ実機で見られる環境が必要です。PCのプレビューで、Macbookなどのハードの外枠付きを選択している人もいますがこれは邪魔なのでやめましょう。

書体について

基本的に書体で迷うことはしなくて良いです。
日本語の場合は、Noto Sans JP、もしくはヒラギノに欧文の場合はデフォルトのInterかLatoあたりにするのが良いでしょう。よくありがちなのが、日本語に欧文書体が当たっていることです。
これはできるだけ避けたいところです。よく目にするのが、游ゴシックを使っているものですが、この書体はレギュラーがかなり細かったりするので、使うのが難しいと思います。デザインで使う場合も扱いが難しいです。ミディアムでも細いです。一方でデザイン初学者が1人で作る資料などを作る際は今まで使ったことのない書体を使うチャンスでもあります。怒られることはないと思うので、積極的に密かに使ってみたい書体を試してみると良いでしょう。

文字のグループ化、スタイルについて

文字を配置するにあたって、良く見るのが文字のボックスのFixed Sizeを使って横幅を制限していることです。この場合、文字を入れ替えた場合改行が入ってしまったり、意図しない挙動をしてしまうことがあります。（デザイナーの場合はこれをあまり使いません）
横幅を制限したい場合は、Auto Heightを使いましょう。また、文字の高さもできるだけAutoのままにしてください。文字の大きさを変えた場合などで意図しない挙動になることを防ぐためです。

ページを分けて使いやすく（タブの整理）

ワイヤーでPCとSPで分けたり、企画書を作ったりしていくと左側のタブが増えて見づらくなります。
その際に区分けで線を入れることができます。
ページを増やして、名前を編集する際に-を２回打つと区切り線になるので少しページが増えてきた際などに使うと良いです。

整列を使う

横を揃えたり、等間隔に並べる場合は整列を使いましょう。
まずは、右合わせ上合わせなどを右側のUIの中から選択して合わせてみます。

次に、等間隔に並べてみましょう。事前に先ほどのフローで揃えてあることが大事です。等間隔で並べたいものを選択した状態で右にあるメニューを開くとTidy upという項目があるので選択します。勝手に設定された間隔で並べられるので、値を調整していきます。（右メニューのLayoutという項目の下です）

Auto Layoutをうまく使う

全体をガッチガチにグループ化するのは、編集が多く入るワイヤーなどで使うのはお勧めしませんが、サムネイルとテキストのセットを作るなどの場合Auto Layoutを使った方が早い場合があります。Auto Layoutは整列とグループ化が一度にできるものです。グループ化すると、他の箇所で使う場合や整列されたグループ自体を並べたい時などに便利です。
基本的な考えとしては、2つのセットがどんどん入れ子になっていくという感じです。ショートカットは並べたいものを２つ選択して、ShiftとAを押します。
（中に入っているものはFixed Widthにしないことも大事です、縦幅も同じでできるだけHugにする）
また、メニューなどの５個ぐらいのテキストを等間隔で並べる際などもAuto Layoutを使いましょう。良く見るデータでは、グループ化を多用していたり、グループが入れ子になっていたりするのを見かけます。デザイナーはグループ化はほとんど使いません。（書き出し用などに使う場合はあります）
そのまま、おいていくか、Auto Layoutを使うかで作ると編集しやすいデータができるかと思います。Auto Layoutを解除する場合は、Command Shift Gを押していくと入れ子が一つずつ解除されます。また、Auto Layoutの特定のテキストや画像を選択したい場合、Commandを押しながらクリックすると一回でたどり着くことができます。
アップデートで、Auto Layoutの中で折り返しができるようになりました。横幅を指定しながら縦に積んでいくような場面で使えます。

練習問題です。
以下のような記事のモジュールをAuto Layoutを使って組んでみましょう。
画像、記事のタイトル、日付、本文で構成されています。基本のモジュールを一つ作って、３つに増やしてください。その際に、タイトル部分を長くして２行になっても崩れないようにしましょう。

ボタンやタグはフレームで作る

ボタンやタグなどを作るときに、たまに見るのが短形を置いてその上にテキストを置いているデータです。その場合だと、中身の文字が変わった場合などにテキストを直して背景の短形を調整するという手間が必要なのでワイヤーなどで使う簡単なデザインであれば文字をフレーム化して、背景をつける、もしくは枠線をつけるというやり方で作りましょう。

以下、手順です。
テキストを打ちます。テキストを選択して、Shift Aを押します（フレーム化）。Fillの色を変えます。テキストの左右、上下の空き（Padding）を調整して好きな塩梅に調整してみましょう。

線を引くときのTips

インフォメーションなどの、罫線を使ったスタイルや表のようなものを作る場合に線を引くかと思います。その際に、マージンなどの計算は厳密にやらなくても良いのですが、ペンで書くよりも線を使った方が良い場合が多いです。ペンの場合は、ピクセルの間に中心があるために、1pxの線を引いた場合は上下に0.5pxずつの状態で線が引かれます。それらをAutoLayoutで並べたりする場合、0.5pxのずれが出て気持ち悪かったり、その下に文字を置く場合も揃える際にやりづらいなどが発生します。
また、線で1pxの線を引いた場合は見た目としては短形と同じなのですが、上に文字などを置いて10pxの余白を空けたいとした場合、実際の余白は9pxになります。理由として、線の場合は基準点がピクセルの中の中心点にあるためだと思います。
適当に、四角を書く。それを横のボックスで幅を1pxにするのが私の良く使うパターンです。（急いでる場合などはこれは使わなくても良いですが、知っておくと良い系です）
短形の良いところは、基準点が常に表示上の一番きわの部分の常にあるところです。そのことで、線の太さが10pxになった場合でも、余白は一定の10px確保されます。その上で、ワイヤーなどを作る際は線を使うのがバランスとして良い気がします。

プロトタイプ機能（インタラクティブコンポーネント）

基本的な機能ばかりだったので、最後に少しだけ動くことができるプロトタイプ機能を使ってみます。基本的なボタンの動きを作ってみます。
私の考えですが、基本的にはプロトタイプの時点で実装されたもののように作り込む必要はないと思います。例えば、ボタンがHoverで反転するのであれば、ミーティングで言えば伝わります。そのほか、Figmaで再現できてかつ、コミュニケーション的に再現しておいた方が良いもののみ作れば良いかと思います。大事なのは、クライアントやデザイナー実装者とコミュニケーションをよくとることです。
まずは、テキストを打ちます。それをフレーム化します。背景色を設定して、アウトラインをつけてみます。Component化して、プラスボタンでVariantを増やします。増やしたVariantの背景色、文字色を調整します（Hoverした時の色に変更）最後にそれらをプロトタイプ機能で繋いで完成です。動いている状態を確認するには、アートボードに置いた状態でプレゼンモードで確認します。

ツールとの向き合い方

機能を使いこなすことと、その分野の制作のプロフェッショナルであることというのは必ずしも一致しません。大事なのは、どのようなものを作りたいのかをイメージして、それらをツールを通して表現しようとすることです。形だけそれっぽく見えるワイヤーフレームなどは今の時代、誰でも作成可能です。よく考えて、既存のやり方に収まらないところに行くまで考える、そのためにスケッチの能力が、叩き台を作る能力は助けになります。そういったときに、Figmaなどのツールがサポートするのです。（DRAFTの宮田識さんが脳が焼き切れるまで考えたかどうかが大事で、小手先のテクニックで誤魔化すなと言っていてそのことがいつも頭にあります）
今回の使い方や考え方についての基本は、基本的なものだけで一通り作ることができる。自分や他の人が再利用しやすくすることで、最終的なものの成果の底上げをするようなことを目標としています。ガワだけそれらしいものより、考えられた手書きや文章の方が価値があります。千葉雅也のセンスの哲学に書いてあることですが、センスの良いものとはヘタウマである、ヘタウマとはモデルの再現から降りることが第一歩であると言います。Awwwards風のレイアウトやFigmaの最新の機能を使いこなして俺強いとやっているのはまだモデルの再現をやっている段階なのです。仕事においてもある程度リサーチをする、しかし時間や制約である段階までしかできない。その時に、自分の能力の限界のようなものがどうしても出てくるがそれを肯定して、作るものの中に入れ込んでみる。これは手癖でやるというのとは違います。ただどうしても出てしまう作り手の欠落を作品の影の中に入れる、それは頭が焼き切れるほど考えたならば魅力的なその人にしかない構成として現れてくるのではないでしょうか。
紙と鉛筆の時のように、シンプルにツールを使うこと。

基本的な機能だけでも、充分に素晴らしいものを作ることはできます。そこから、また少しずつ自分のオリジナルなやり方を、ツールに対する理解を深めていけば良いのです。