FigmaのConfig 2023のAuto Layoutのアップデートが嬉しかった

今年もFigmaのイベント「Config 2023」でFigmaの新機能が発表されました。

今回のAuto Layout（オートレイアウト）のアップデートについては、嬉しい内容でした。
どのあたりが嬉しいアップデートだったかについて書きたいと思います。

Auto Layout（オートレイアウト）でアップデートされた機能は下記の3点です。

• Wrap （折り返す）
• Min（最小幅）
• Max（最大幅）

Wrap （折り返す）

オートレイアウトの方向 Wrap に関しては、オートレイアウトを使う上で気になる問題があったのが解消されたかたちです。
たとえば、オートレイアウトを適用してオブジェクトを横に並べる際に行を増やしたい場合、それらをさらにオートレイアウトで包んで段組みをつくる必要がありました。これはAutoLayoutの入れ子と呼ばれるもので、入れ子が多くなると管理が難しくなったり、パフォーマンスが低下したりすることがありました。
また、オートレイアウトで包まれたオブジェクトはひとつのグルーピングとなるものですが、構造上さらに階層ができてしまうのがつらいところでした。見た目でグルーピングを認識されるのであればいいのですが、この点は開発者ツールでも見えにくいところでした。

この点が Wrap により、実際に意図する構造でまとめられるようになりました。
オートレイアウトはもともと CSS でいうところの flexbox 的な動きをする機能（そして flexbox としてハンズオフのコードを吐き出す）でしたが、そのレイアウトのプロパティとしての flex-wrap: wrap; にも対応したということになります。実はCSSでは対応できていても、構造上できていなかったことに対応できるようになりました。

Min （最小幅） と Max （最大幅）

オートレイアウトにはもうひとつ、前から改善の要望が多くありました。
要素のサイズを最小値や最大値で制限できないという問題です。これは、オブジェクトのサイズが大きくなったり小さくなったりすると、要素が過度に伸びたり縮んだりしてしまうことを意味します。

今回の Min と Maxの設定はその点を解消できます。
この設定により、オブジェクトのサイズを最小値や最大値で制限できるようになりました。画面サイズが変わっても要素が適切なサイズに保たれるようになります。これらの機能は、レスポンシブなデザインを作成する際に非常に便利です。

この新機能はデザインの品質や効率を向上させるだけでなく、開発者とのコミュニケーションも改善する可能性があります。 開発者は、デザインをコードに反映する際に、オブジェクトのサイズのMinやMaxの値を参考にすることができます。この点は Figma のデザインデータだけではコミュニケーションがし辛いところで、デザインデータ外にメモを残すなどの別途対応が必要になるものです。

この機能についてもCSSの表現でいうと flexbox のプロパティと min-content max-content の組みあわせで実現可能だったのを　Figma上でも対応できるようになったということになります。

最後に

今回のオートレイアウトのアップデートにより、コンポーネントやグループのレイアウトやサイズを自由に変更できますし、レスポンシブなデザインも簡単に作ることができるようになりました。
また、入れ子が少なくなることで、管理やパフォーマンスも向上します。

他にも、Design Token 的な活用が期待できる Variable （バリアブル）やプロトタイピング昨日の強化がありました。便利なアップデートも制作に活かして、デザインデータの作成や検討の効率アップに役立てたいですね。