レッスン概要
この章では、オートレイアウトを使用して、ラベルの変更に応じて自動的に拡大縮小する応答性のあるボタン要素を作成します。次に、そのボタンをメインコンポーネントに変換し、他のデザインで再利用できるようにします。
ここに私たちが作成するボタンがあります。このデザインを再現するには、背景用に長方形、ラベル用にテキストレイヤー、全体をまとめるためのフレームを使えば良さそうです。ただし、この方法だとボタンラベルを将来変更する必要がある場合にはうまく対応できません。
代わりに、オートレイアウトを使用してテキストレイヤーの周りにフレームを作成し、ボタンの表面として機能するように塗りを与えます。
オートレイアウトの基礎
オートレイアウトは、デザイン要素を整理、配置、スペースを調整し、変更を加えると自動的に調整されるようにすることで、時間を節約し、デザインをレスポンシブかつ適応可能にします。
フレームまたはレイヤーの選択に自動レイアウトを適用するには、キーボードショートカットShift Aを使用します。これにより、選択されたレイヤーがオートレイアウトが適用された親フレームに追加されます。その後、オートレイアウトを使って、親フレームが子レイヤーとどのように連動するかを設定できます。
フレームの子レイヤーの方向を縦にフローするように、横にフローするように設定することができます。または、新しい行にレイヤーを折り返すことができます。
私たちは、デザインの左、上、右、下のパディングを調整して、子レイヤーとその親フレーム間の視覚的なスペーシングを作成することができます。
さらに、子レイヤー間のスペーシング、またはギャップを調整し、それらのレイヤーが親フレーム内でどのように揃えられるかを選択することもできます。また、変更が生じた際にオブジェクトの高さおよび幅がどのようにリサイズされるかを制御できます。
親フレームは固定の高さや幅に設定することも、子レイヤーに合わせて内包させることもでき、子レイヤーの変化に応じてフレームのサイズが自動で変わります。子レイヤーの高さと幅は固定されるか、親フレームを埋めるように設定されるか、あるいはその自身の子レイヤーを持っている場合は、それらのレイヤーを内包するように設定されます。
レイヤーの動作をカスタマイズするために、異なるリサイズオプションを組み合わせることができます。例として、アプリの通知を想像してみてください。通知フレームが長いメッセージを収容しながら一貫した幅を維持するようにするには、その幅を固定、高さをコンテンツを内包に設定することができます。
これらの自動レイアウトプロパティは、デザインプロセスやその後の変更にも柔軟に対応できるようにデザインをサポートします。オートレイアウトのプロパティの詳細はこちらをご覧ください。
ぜひご利用ください!
実際に手を動かして、下のインタラクティブサンドボックスでオートレイアウトの仕組みを学んでみましょう。これは Figma Designでオートレイアウトがどのように機能するかを完全に再現するものではなく、学習目的のためのものです。