松井佳恵(よしえ)
Figmaの特徴的な機能|①オートレイアウトの振り返り
2026年05月10日
要約を生成中...
オートレイアウトー要素を自動でレイアウトさせる(要素を後から追加してもOK)
使う場面・パーツを組む時
・レイアウトを置くとき
メリット ①デザインの設計図としてのクオリティーが上がる
②手作業の調整が圧倒的に減る
基本的な使い方
①すべて要素を選択し、デザインパネルのレイアウト欄のアイコンをクリック
②すべて要素を選択し、shift+A
③すべて要素を選択し、右クリックでオートレイアウトを追加
レイヤーの見方
オートレイアウトを追加した場合レイヤーの右側に川のマークが出る
川→横並び 三→縦並び
解除の仕方
⌘+shift+G(背景の要素も消える)
⌥+shift+A(背景残る)
各余白の設定
アイテム間の余白 水平パディングの調整
順番の入れ替え
中身の要素を選択した状態で矢印キーを押すと簡単に順番を入れ替えられる
オートレイアウトのパネルから→↓もできる
揃え位置
パネルから揃える位置を変えられる
ダブルクリックで均等配置もできる
フレームの大きさ設定
①固定値
②コンテンツを内包
③コンテナに合わせて拡大
POINT
・コンテンツを内包→親フレームにつける
・コンテナに合わせて拡大→中に入ってる子フレームにつける
折り返し機能
有効にするには子要素が親フレームからはみ出るような
レイアウトになってないとつかない
最小幅、最大幅
コンテナに合わせて拡大
サイドバーがついてる画面を作成する場合、コンテンツ幅は親フレームに沿って
拡大されるが、サイドバーの横幅は拡大されない
便利なプラグイン
Ratios 縦横比を保ったまま拡大縮小できる
オートレイアウトを使いこなすことでコーディングのflexboxと同じことができる
プロトタイプについて学ぶ
コメント
まだコメントはありません。