Design
Coding
Setting
Figma(フィグマ)とは
01:03オートレイアウト
- 要素をオートレイアウト化する
- レイアウトの設定をする
- フレーム内に要素を追加する
- オートレイアウトを使用したボタンの作り方
- 関連リンク
今回は、ボタンやカードなどの要素を規則的に並べるレイアウトを簡単に作成できる機能のオートレイアウトについて説明します。
要素をオートレイアウト化する
オートレイアウトフレームを作成する
オートレイアウト化したい要素を複数選択した状態で、右クリックメニューから「オートレイアウトの追加」またはショートカットキー（Shift + A）を選択します。すると、選択範囲の周りにオートレイアウトフレームが作成されます。
レイアウトの設定をする
- 要素間の隙間を調整する
オートレイアウトフレームを選択すると、右側にレイアウト設定が表示されます。
ここで、要素の並べる方向や要素間の隙間などを調整することができます。
- 要素を横並びにする
オートレイアウトパネルの矢印アイコンから要素の並ぶ方向を横向きしたり、ある一定の横幅を超えると折り返す設定にすることもできます。
フレーム内に要素を追加する
ドラッグ&ドロップで要素追加する
追加したい要素を選択し、フレーム内にドラッグ&ドロップします。
フレーム内に要素を持っていくと追加される箇所のプレビューが確認できます。
レイアヤーパネルからフレーム内に正しく追加されることが確認できます。
矢印キーで要素の場所を移動することもできます。
オートレイアウトを使用したボタンの作り方
テキストをオートレイアウト化する
テキストを選択し、右クリックから選択範囲のオートフレーム化をクリックまたは、⌘ + Aでオートフレーム化をする。
パディングに数値を入力し、要素の周りの間隔を調整し、塗りを追加する。
角の半径に数値を入力し、フレームの角を丸めて塗りの色を調整することで、ボタンが作成できました。
オートレイアウトを使用すると、ボタン内のテキストやアイコンのサイズに応じてボタンの大きさが自動で調整されます。これにより、異なる長さのテキストに対しても一貫した見た目を保つことができます。
以上、「オートレイアウト」について説明でした。
次のステップで、 「コンポーネント」について説明していきます。
関連リンク
Figmaの使い方
全 14 動画
