「私の考える最強のFigma」 - Fussyな入力を減らすためにできること

そもそも、複数回使いまわすようなものを人間に管理させてはいけないというのが私の基本思想です。人間は何回も同じことをやればやるほど精度が落ちます。

しかしこれまでのデザインツールの多くは幅や余白の数値管理を人間に任せてきました。ですので、デザイナーが10pxや8pxの間で右往左往している設計がコード実装者に渡ってしまう事が多かったように思います。

<small>これらのゆらぎをコード実装者が統一したとしてそれに気付いているデザイナーがどれほどいるのでしょうか。(少なくとも私は気付かない事が多いです。)</small>

Fussyな入力を減らそう

Figmaで私がもっとも愛している機能がAuto Layout、そして次にLayout Gridです。本節ではこれらの機能がどういう設計思想のもとに作られたのかを考察し、またいかに便利であることを記そうと思います。

Auto Layout

Auto Layoutはこのように矩形から文字がはみだした時に背景が追従する機能として有名なのではないでしょうか。この見せ方はうまかったと思います。「余白を管理する権利を人間から奪う機能」として紹介しても誰にも響かないでしょうから。

しかしAuto Layoutの本質から見るとこれは副産物のように感じられます。Auto Layoutの本質とはPaddingの数値入力を明示化することで、無意識化の作業から意識下の作業に変更することにあります。

これまで私たちはオブジェクトを配置するときガイドなどを利用して端に合わせてきました。しかしスナップ機能があるとは言え、1pxズレてしまう事が多々あります。これが無意識下の作業である故です。

しかし、Auto Layoutを適用すると、右サイドバーにこのように表示され上下左右、そしてオブジェクト間の間隔をいくつにするのかと求められます。

こうする事で意識下の作業に変更しているのです。

考えてみましょう。Bodyタグに相当するエリア(frame)にAuto Layout適用することで、「BodyエリアのPaddingはいくつとするのか」「オブジェクトごとの間隔は何pxが適切か」を設計者に強いることができるのです。画期的だと思いませんか？

つい見た目を重視して配置してしまうのを否定できないUI設計のフローにおいて、CSSやコンポーネントとしての堅牢性を設計者に意識させているのです。設計者はHTMLやCSSに触れることがないけれど、Figmaを適切に利用するとHTMLやCSSを考慮した再現性の高いUI資産を作れるのです。

では実際にどのように利用しているのか具体的な話をしていきましょう。

フリーレイアウトとの共存

- レイアウト時は数値入力とキーボードをメインに
- マウス移動はざっくりの時

タイトルにもある「Fussyな入力」というのは、設計意図からズレた入力を減らそうという意味です。そのため、おおまかな配置はマウスで行いますが、そこからは「何ピクセル移動させたか」を自身が認識できる方法でレイアウトを行います。

• デザインパネル上でのXYWHの数値入力
• 矢印キーでの移動

オブジェクトをスクリーンに配置する時は、X:0 Y:0の位置からX軸(横方向)、Y軸(縦方向)がいくつかを指定します。

例えば、直前の要素とピッタリくっつけたオブジェクト(画像では紫のボタン)を選択し、Y軸に+32pxと入力して、余白ルールに則って配置をするなどです。

「自分の選択したオブジェクトのWとHはいくつで、X,Yをどのくらい移動させるか」には常に注意を払うこととなるでしょう。

Layout Grid

Layout Gridはその名のとおり、グリッドを設定できる機能です。ガイドとは異なり、Frame内のみが適用範囲となっています。

Figmaは、複数のスクリーンをひとつのページ上で並べて作業する事が多く、スクリーン自体を移動させる事が頻発します。ですので、ページに対して引かれるガイドではなく、Frameに対して適用されるLayout Gridを活用する事をオススメします。

グリッドやカラムの表示だけでなく、ガイドをオブジェクト基準で引くことも可能ですので、オブジェクトの外周を囲うガイドの作成が可能です。

オブジェクトがどのくらいの余白を持つのかが可視化されるので、重宝しています。

HeaderやTitleなどの高さと余白が不明瞭なものも

オブジェクトのアウトラインとしてLayout Gridを引けば明示できる

オブジェクトのアウトライン用設定。これを左右上下に行っている。

アイコンに代表される、実際のオブジェクトより範囲を広くとる必要のあるコンポーネントに重宝しています。グリッド設定はテキストやカラーと同様にスタイル化し、libraryとして他ファイル、プロジェクトに読み込みが可能なので、制作用のlibraryを作り登録しておくと良いでしょう。

Layout Gridが画期的と感じたのはlibrary化できる事に尽きます。それぞれの設計者が作ったグリッド設定を共有し、それを元にスクリーンを作成できるようになるからです。

このように、Auto Layout、Layout Gridを組み合わせる事で、自分がミスしても機能が補助してくれるようにしています。

いかに便利であるか

実際にそれらを利用したTipsを挙げてみましょう。

整列ツールの代替として使う

整列ツールを使うためには、オブジェクトの間隔をあらかじめ空けておかなければなりません。

重なった状態ではTidy Upは行えない

Auto Layoutを整列ツールとして使えば、同じ位置に複製したオブジェクトたちも簡単に並べられるので、手早くサムネイルが並ぶUIを作りたいケースなどではとても便利です。

1. オブジェクトをコピー&ペーストする
2. 同じ場所に複数配置される
3. Shift + AでAuto Layout化する
4. 並べる方向指定
5. space between指定
6. Padding指定
7. グループ解除(Shift+Cmd+G)

スクリーン整理

遷移を検討していると、画面は頻繁に増減していきます。その度に画面の間を詰めたり、ひらいたりする作業も不要になります。

前述のように一時的にAuto Layoutを適用、解除する事でサクッとワークスペースを綺麗に保てます。

あまりルールを覚えなくてもいい

2人以上でAtomic Designで言うPageレベルを作る場合にも、Auto LayoutでコンテンツエリアのSpace betweenを設定しておき、Layout Gridでコンテンツエリアの外枠を表示しておけば、お互いが迷うことはあまりないでしょう。

Aさんが作った、Auto Layout Frameに対して、Bさんはコンポーネントをガツガツ入れていくだけで良いのです。(もちろん、コミュニケーション不要という訳にはいきませんが。)

プラクティス(WIP)

コンテンツエリア以外を備えた「screen/sp」というコンポーネントを作成し、Layout Gridにて余白を定義したものを用意しました。

ほげほげlink

「area-of-content」frameはAuto Layout化済みで、あとはコンポーネントを入れていくだけです。

実際にダウンロードして、入れてみていくとAuto LayoutとLayout Gridの便利さが分かると思います。

質問や疑問、ツッコミがあれば「優しく」教えてください〜