Figma / Auto Layoutの活用場所探し 〜One more "nest", One more chance 〜
一人目デザイナー代行業をやっているので、参加しているプロジェクトが2、3つ存在します。そういった職業柄、人のFigmaファイルを見ることが多いのだけれど、往々にしてAuto Layoutを使っていないケースを良く見ます。
急いで雑に作りたいからこそ、構造をしっかりしておく
「急いで作ったから」「寿命が短いファイルだから」ということなのかもしれません。急いでいるときはなるべく手慣れた方法を使うことを否定しません。
しかし、少しゆとりのあるときにAuto Layoutを活用してみるクセをつけるとそういった急ぎの作業にも還元できることがありそうではないですか？
こんなところにもAuto Layout！？を紹介していくよ
ですので、ここでは「Auto LayoutをこんなUIパーツで使うと便利だよ。」というものを紹介していこうと思います。
画像の左側を右側にてAuto Layout化していきます。どのパーツがAuto Layoutになっていくと思いますか？
アイテム一覧
決まったルールで四角が並ぶときはとにかく脳死して、Shift + A(AutoLayoutのショートカットキー)を押しましょう。ここはとってもイメージしやすい箇所だと思います。
数が上限する場合はAuto Layoutが吉
ここがAuto Layoutでないと何故不便なのでしょうか？ 答えは簡単です。
Auto Layoutは削除したときに下のものが自動的に移動してくれるのですが、Not Auto Layoutでは手作業で位置を変更する必要があるからです。
要素の間が10pxか8pxか。設計者が自分であるはずなのにあやふやになること、ありませんか？
でもAuto LayoutであらかじめSpace between、Paddingそれぞれを設定しておけば仕様書やガイドラインなどを読まなくてもルールに沿ってレイアウトが可能です。
見出し
見出しもAuto Layout化するのが良いと私は考えています。
CSSでブロックになっているものは基本的にAuto Layoutを活用し、MarginなのかPaddingなのかを明示しておくようにしたいですね。Auto Layoutであれば「AというパーツにPaddingが設定されているからwidthがnnピクセル」という設計意図も表現可能なのです。
上記の画像では「欲しいもの一覧」のレイアウトをしています。
左のスクリーンではテキストデータが配置されているだけですが、このままだとブロックレベルとしてのアウトラインはどこにあるのかが不明です。
見出しはスクリーンいっぱいに幅をとる？
それとも下の一覧のように左右に余白をとるのでしょうか？
Auto LayoutでなくてもかまいませんがブロックレベルのアウトラインがどこにあるかはせめてFrameで表現しておきたいところです。でもFrameにするならキーボード操作に差はそれほどないのですし、Shift + AでAuto Layoutにしてみませんか？
Auto Layoutのパネルで数値を入力するだけで、レイアウトが整うのでFrame上でマウスでフリーハンド、キーボードで矢印キーを3回以上押すより確実ですよ？
ボタン
ボタンもAuto Layoutにしちゃいましょう。文字数が変更になったりしてもレイアウトを維持してくれます。
※ここはAuto Lyoutでなくてもテキストを中央寄せにしておけば実現できはします。ではAuto Layoutなら親要素の幅によって自動的にボタン幅も変更してくれるので…便利ですよ？
タブバー
前述に「数が増減するものはAuto Layout」と書きました。タブバーも開発段階では、3つや4つに増減しますのでぜひAuto Layout化しましょう。
上記動画はFrameで作ったタブバーにもうひとつナビゲーションを追加したいけどうまくできなかった様子です。このアニメーションGIFの撮影(GIPHY CHAPTURE)は30秒しか行えません。とても間に合いませんね。
Auto Layoutでない場合はまず、3つ並べた場合の1つあたりの横幅を算出する必要があります。
スクリーンサイズ / 3 = x
という式ですが、実際には余白も入るのでもう少し値を追加しなければなりませんね。いずれにせよ30秒では間に合いません。
しかしAuto Layoutの場合は30秒の間にかろうじてカタチにはできます。
タブバーに配置するボックスひとつをちゃんとAuto Layout化し、それをコンポーネント化しておけば30秒の間に新しいナビゲーションを追加することも不可能ではありません。
上記動画は、Auto Layout化したナビゲーションを使ってタブバーの増減に対応させている例です。
このようにAuto Layoutでデータをしっかり作るクセがついてさえ入ればそういった増減の変更は30秒で十分間に合うようになっていきます。
body自体をAuto Layout化
これは少しやりすぎかな…？とは思うのですが非常に便利なので過激派入門辺としてご活用ください。
レイヤー構成はこのようになります。
アプリで固定表示したいタブバーやヘッダーなどはFrameにFiexdで配置し、それ以外はBodyというAuto Layout FrameでWrapしてしまいます。
これのメリットは幅や要素の上限に自動で対応してもらえることです。とくにタブレット版やデスクトップ版へ発生するときに助けになります。
Auto Layoutを使ってFigmaでHTMLを書くイメージ
こんなにAuto Layoutで入れ子にしていくのには大きなメリットがあります。
それがFill containerです。
CSSでも各divごとに全部{width 390px}と書くのはスマートではありませんよね？
親要素だけ幅を定数で書いて、それに連なる子要素たちの値は-24pxなどの計算式を渡すだけです。
そして、あとはレンダーの自動計算に任せるようにしていくのがスマートです。
Figmaでも同様に考えてみましょう。
Figmaを使ってHTMLをノーコードで書いているようなニュアンスだと捉えてみてください。そう考えるとwidthとheightはコンテンツとpaddingによって自動で算出されるのが美しく自然なことであると言えます。
Fill Containerをこする
Fill Containerは便利ですが、よくいただく質問に「なぜかFill Containerが選べない」というものがあります。
Fill Containerは親要素がAuto Layoutでないと表示されないものなので、毎回表示されないケースが存在するんですね。「あれ？ 表示されないな」と思ったら親要素をAuto Layoutにしてみましょう。
さきほどのbody内の設定をあらためて注視してみると
bodyは390px(screen width),Fiexdになっています。
そしてSpacebetween,paddingともに0にしているのに注目。
ここではただ縦にならべるだけにしています。
次にHeaderとContentsAreaは両方ともFill Containerで余白を親であるbodyに任せています。
ContentsAre内の3つのAuto Layoutも同様です。
bodyだけ390pxであとはFill Containerにすることで、親要素の幅に追従する一覧ページが作れるのですね。便利！
右寄せ左寄せにAuto Layout
ここまで読んで「FigmaでHTMLを書く」という考え方について触れられたのでそれをさらに活用させてみましょう。
画像のような右寄せlabelにもAuto Layoutを使うのです。
ここで注目して欲しいのは「area-label」です。「label」をwrapしてFill Containerにより横幅伸縮するarea用のcontainerを置いているんですね。そしてこのconteinerに右寄せを定義しています。
中央配置だから文字も中央寄せだよね！ ← 場合によります。
オブジェクトの配置位置とテキストの寄せ方向はイコールではありません。
画像のように中央寄せだと中途半端な改行になってしまうケースがあるからです。
デスクトップ版やモバイル版でも耐久するようにするには寄せ方向はこの場合「左」。
「おかしな改行」をすこしでも違和感なくしておくのには左寄せが必要です。
<small>まあ、そもそも改行を適切にしておくというのも重要ですが…。</small>
Auto Layoutを使うとLayoutが不自由になるのは否定しません。しかし最終的に表示されるレンダーもそんなに自由なものではないはずです。
itemのチェックボックスだけ上方向に揃えたい
画像ではチェックボックスだけを上方向に揃えたいケースについてもAuto LayoutでFill containerを活用しています。
チェックボックスと少しの余白を確保していた上のitemに対して、下のitemはチェックボックスを内包するFrameをAuto LayoutかつFill containerにしています。そうすることで高さがitemと同様に確保でき、上中下に配置できるようになりました。
いつでも探しているよ、どっかにAuto Layoutできそうなもの
このようにAuto Layoutは向いのホームや路地裏の窓、いそうもないところにも存在しており、One more timeではなくOne more "nest"することでレイアウト表現のチャンスを広げることができます。
Auto Layoutは確かに少し学習コストが高く、ノンデザイナーに活用してもらうのにはケアが必要です。しかしVariantなどのupdateから見られるようにここら辺のデータをデザイナーが適切に設計することで組織のプロダクトを推進させる未来をFigmaは描いているはずです。
デザイナー以外がデザインリソースを活用してピッチ資料にデモを入れたり、新機能のプロトタイプを作ってみたり、インタビューシナリオ向けにしてみたり…。そのためにはデザイナーのFigma活用、Auto Layout活用が必要なのです。
このチャンスにぜひAuto Layout過激派に入門してみてください。
Discussion