FigmaのAuto Layoutにまだ出来ないこと

こんにちは。@toi_toi_yです。ついにFigmaにAuto Layoutが搭載されましたね！ やったー！ よしFigmaのAuto Layout完全に理解した。

注: 完全に理解した 

【エンジニア用語解説】

「完全に理解した」
製品を利用をするためのチュートリアルを完了できたという意味。

「なにもわからない」
製品が本質的に抱える問題に直面するほど熟知が進んだという意味。

「チョットデキル」
同じ製品を自分でも１から作れるという意味。または開発者本人。

— 伊藤 祐策(パソコンの大先生) (@ito_yusaku) September 20, 2018

FigmaのAuto Layout

中身の幅 / 高さに応じて親要素の大きさを変えることができます。
アイコン付きテキストやボタンなどに使うと超便利です。

ここで重要なのは要素の大きさは全て「中身」に依存するということです。
Auto Layoutの方向がVerticalであってもHorizontalであっても、純粋に中身の大きさ（大体はテキストの量）に依存してリサイズされるようになります。

できることの詳細はふじけんさん(@kenshir0f)の記事をご覧ください。

で、自分は現状できないことを書きます。

FigmaのAuto Layoutに出来ないこと

上下左右に個別の値を設定する

paddingやmarginや要素間のgapが設定できるのですが、上下左右一律の値しか設定できません。左右でpaddingが違う要素を作るときは、懐かしのspacer.gif的な透明要素を入れておくなどひと工夫必要です。

Frameを手動でリサイズする

最初、こういう挙動を期待したのですが...

残念ながら出来ません。Auto Layoutが適用されたFrameは中身の要素に応じてサイズが変わるので、Frameを手動でリサイズすることができなくなります（この場合、中身のテキストボックスの幅を変えるとFrameの幅が変わる）

Frameのサイズが変えられないので、必然的にサイズ変更を伴うConstraintsも無視されるようになります。

↓ 左右どちらも Top & Bottom を適用した例

中身のテキストボックスのサイズを変えればFrame自体をリサイズ可能ではあるのですが、問題はComponentです。
Componentから作ったInstanceは子要素のサイズを変えることができないので、縦横どちらかのサイズが完全に固定されます。

うかつにComponentにAuto Layoutを適用すると、リサイズ出来なくなって色々壊れてしまうので気をつけてください。
基本は中身のサイズに依存して良いものに留めておくのが正解です。
（チュートリアルにあるようなボタンとか。tweetsの例はComponentにしたら横幅が変えられなくなって辛いのでは？）

自分は調子に乗って色々適用したら死にました（死ぬのが早い）

position: absolute 的な要素の混在

Auto Layoutが適用された要素の中にposition: absolute的な絶対座標の要素を置くことはできません。グループを分けて配置することはできます。
ドラッグ&ドロップするとレイヤーがネストされてAuto Layout要素の中に飲み込まれてしまうので、キーボードのカーソルキーか座標指定でレイアウトする必要があります。

Frameとの使い分けが必要

Auto Layoutは素晴らしいアップデートですが、まだ使いどころは限られます。特にデバイスの幅に応じて可変させたい要素にはまだまだAuto Layoutが適用できない場面が多いです。
必要に応じて既存のFrameと使い分けましょう。

より詳しい制限については公式のヘルプを参照してください。
https://help.figma.com/article/453-auto-layout

今後にも期待だ！

色々できないことを書いちゃいましたが、アイコン付きのボタンやテキストが作れるようになっただけでも、Auto Layoutで作業効率が上がる場面はたくさんあります。今後Constraintsとの共存ができるようになればレスポンシブ な要素も簡単に作れるようになってますます作業効率が高まることでしょう。

Auto Layoutを実装してくれてありがとう！ & 今後にも期待してます！