【2024年最新情報！】Figmaの新しいUIと最新アップデート情報：アップデート後のオートレイアウトを徹底解説！

2024年のConfigでFigmaオートレイアウトの新機能が発表されました！
元々便利なオートレイアウト機能ですが、さらに効率的なアップデートで嬉しいですね。

この記事では、以前のオートレイアウトと新たなオートレイアウトを比較し、その変化と具体的な使い方を徹底解説します！
Figmaユーザー必見の情報が満載です！子要素まで自動でオートレイアウト化が出来てしまうあの新機能まで紹介しておりますので、ぜひ最後までご覧ください。

また、Config 2024で発表された内容について、他にも記事を書いていますので、ぜひお立ち寄りください！

Config 2024で発表！オートレイアウト：新UIで見るオートレイアウト

まずはじめに、オートレイアウト部分のUIがスタイリッシュに変わりました！
それにより親しみやすく、柔軟なユーザー・インターフェイスを提供しています。

今回のリデザインでは、オートレイアウト編集バー内で、サイズ調整が簡単に行えるようになりました！
ユーザーエクスペリエンスをより分かりやすくし、簡単に操作が行えるように変化しています。

これを元に、改めてサイズ調整とオートレイアウトの使い方を確認していきましょう！

新UIで便利になったオートレイアウト：内包に設定している場合

横幅、高さを内包に設定している場合は、余白調整をすることで自動でサイズが変更されます！
こちらは、最も基本的なオートレイアウトの活用方法ですね。

ボタンやカードをデザインする際に変更がしやすく、作業の効率化に繋がります！

新UIで便利になったオートレイアウト：サイズを固定した場合

横幅、高さを固定している場合は、余白調整を行なっても、サイズは変更されません！
オートレイアウトを使用している中で、サイズが動かないよう固定にしておきたい場合は、こちらで設定できます。

新UIで便利になったオートレイアウト：最大値・最小値を設定している場合

最大値・最小値を設定している場合は、サイズ調整に限度が儲けられます。
ドラッグでサイズを変更しようとしても、それ以上は変化しないように設定できるため、開発時のレスポンシブ対応などに便利です。

Config 2024で発表！オートレイアウト：便利なボタンで行うオートレイアウト

オートレイアウト部分の新UIには、サイズ調整の他にもうひとつ、注目ポイントがあります。

見慣れぬ２つのアイコンが追加されているのが分かります。
これらは、オートレイアウトの追加・削除を簡単に行えるボタンと、自動でサイズ調整を行うボタンになっていました。

実際に使うとどのように便利なのかを見ていきましょう！

便利なボタンで行うオートレイアウト：オートレイアウトの追加、削除が簡単に！

右側のアイコンは、簡単にオートレイアウトを設定できるボタンになっていました。
ショートカットキーでも便利に行うことはできますが、覚えていない時はこちらで簡単にオートレイアウトを追加しましょう！

便利なボタンで行うオートレイアウト：自動サイズ調整で簡単に！

左側のアイコンは、自動サイズ調整が行えるボタンでした。
こちらを活用することで、固定幅を設定したり、最大値最小値を設定している状態から、余白に合わせてサイズを自動で調整することが可能です！

Config 2024で発表！オートレイアウト：話題の新機能、一括オートレイアウト

最後に紹介するのは、Config2024で発表され、特に話題となったあの新機能。
ショートカットキーを利用して一括でオートレイアウトを作成する革命的な新機能です！

手順は以下の２つのみ。これだけで、子要素から分割したオートレイアウトが作成されます！

1.フレーム全体（動画の場合はカード）を選択
2.ショートカットキー「Shift」「Control」「A」(MacOS)　または　「Control」「Alt」「Shift」「A」(Windows)

まとめ

今回は、Config 2024で発表されたFigmaの新オートレイアウトについてご紹介しました！

新UIでより便利になったオートレイアウトや、ショートカットキーで行える便利なオートレイアウトを使いこなして、より効率的にデザインを行いましょう。

また、Config 2024で発表された内容について、他にも記事を書いていますので、ぜひお立ち寄りください！