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

1 min読了の目安(約1400字IDEAアイデア記事

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

しかしこれまでのデザインツールの多くは幅や余白の数値管理を人間に任せてきました。ですので、デザイナーが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資産を作れるのです。

Figmaはデザインオーサリングツールではなく、UIを設計するためのツールであるという事が如実に分かると思います。

では勝手な考察はここら辺にして、具体的にどのように活用するかを見ていきましょう。

いかに便利であるか

書いてる途中

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

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

書いてる途中

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