どうも、@kiiitaです。
最近はXよりBlueskyに棲息しています。

今回は、FigmaのAuto Layoutについての小さなこだわりを紹介します。

FigmaのAuto Layoutを使う時に、Auto Layoutを指定したFrameの子要素の間の距離(Gap)を指定することができますよね。

このGapの値には次の2種類の値を指定することができます。

• 数値指定

• Auto

Autoを指定すると、オブジェクト間の間隔ができるだけ大きな距離になるように自動的に配置されます。

UIデザインをしていると、Autoを使いたいケースは多々発生します。よくあるのは、アクション付きのリストUIです。

結論から言うと、このような両端揃えで配置したい場合でもAutoは使わずに数値指定をした方が望ましいです。なぜなら、Autoの場合は要素間のGapが未指定(0px)になるので、エンジニアが実装する時にGapとして指定する値がわからなくなるためです。

Gapに"Auto"を使うと起こる問題

具体的な例で説明します。

次の図は、Gapの指定方法を"Auto"と"数値指定(8px)"にしたものを並べたものです。

一見Autoでも数値指定でも問題がないように見えます。

では、左のラベル部分のテキストを長くしてみましょう。

テキストが長くなった場合、ラベルの右端とアイコンが近接しています。この時、Gapに"Auto"を指定してたコンポーネントは、間隔が0になっているため、ラベルとアイコンが近づきすぎています。

この場合、ラベルとアイコンの間に適当な間隔を指定するケースがほとんどだと思います。

ただし、Gapに"Auto"を指定しているとそれを見落としてしまうわけです。なぜ見落としが発生するかというと、UIを作っている段階ではテキストが長くなった時のケースを想定しておらず、"Auto"の指定でも問題がないように見えるためです。

ここまで読んだだけだと「いうてそんなに問題じゃなくね？気づいたら修正でもいいし」という感想になるかもしれません。

しかし、"Auto"を指定した時の問題は、デザイナーだけではなく、エンジニアの実装にも影響するため、できるだけ事前回避しておくと修正コストを下げることができます。

エンジニア視点でもAutoではなく、具体的な数値を指定してほしい

GapにAutoが指定されているコンポーネントをエンジニアが見たら、エンジニアはその通りに実装します。つまり、間隔の値の指定は実装上も行いません。なぜなら、何pxの間隔を指定したらいいかわからないためです。

エンジニアは実装過程で色々なダミーデータを使ってレイアウトの表示を確認します。2行になった時にどうするか、値がない時はどうするかなど、様々なユースケースを想定して、それをコードに落とし込みます。

その中に、文字が長い場合はどうするか、という想定も入ってきます。実際に長い文字を入れてみた時、次のようなUIに遭遇したエンジニアは「間のスペース開けたほうが見やすいのでは？」と思うかもしれません。

また、デザインに関する意識が強いエンジニアの場合は「スペースの指定がされてないけど、ここは指定したほうが良いのでは？」とコードを書いている時に感じます(細かいコードの説明は割愛しますが、Auto Layoutをコードで実装する時のスタイルクラスを当てる際、Gapのスタイルが抜けていることに違和感を覚えるためです)。

間隔の値を指定したいと思ったとしても、エンジニアからすると、間隔の値が何が適切なのかFigmaからはわかりません。なぜなら、FigmaではGapに"Auto"が指定されているためです。

なので、基本的には"Auto"は指定せずに、数値を指定するようにした方がデザイナー目線でもエンジニア目線でも親切な設計になります。

※間隔が0でもOKな場合や、絶対にギリギリまで隣接しないUIの場合はAutoでもOK。

Autoを使わずにAutoっぽいAuto Layoutを作る方法

Autoが頻出して何を言っているかわかりづらくなりましたが、GapにAutoを使わないでデザインを組む方法を紹介します。全く難しい内容ではないのでご安心を。

結論から言うと、2つの要素のどちらかにFill Containerを指定しましょう。
今回の場合、ラベル側にFill Containerを指定し、アイコン側はHug Contentsを指定します。

だいたいのケースで左側の要素にFill Containerの当てることが多いです。そうすれば、左側の要素が余白いっぱいまで伸長するので、右の要素が右端に配置されます。

Devモードで見たときにも数値がわかるので、エンジニアも実装で迷うことがありません。

もう少し複雑なUIを見てみましょう。

モーダルのヘッダーのように複数のエレメントが組み合わさったUIでも、Autoは使わず、Fill ContainerとHug Contentsの組み合わせでAuto Layoutを組みます(下図参照)

デザインする時の意識

Figmaでデザインする時に、Gapに"Auto"を指定している瞬間に遭遇したら、「あれ？ここってAutoでいいんだっけな」「間隔の値を決めるのをサボってるだけじゃないかな？」と自問自答する癖をつけています。

上で述べた通り、Autoを使うケースは限定的なので、基本的にはAutoを使わない方が保守に強く、開発がしやすいコンポーネントが作成できます。