Figmaの特徴的な機能｜①オートレイアウトの振り返り

学んだこと

オートレイアウトー要素を自動でレイアウトさせる（要素を後から追加してもOK）

使う場面・パーツを組む時

　　　　・レイアウトを置くとき

メリット　①デザインの設計図としてのクオリティーが上がる

　　　　　②手作業の調整が圧倒的に減る

基本的な使い方

　　　　　①すべて要素を選択し、デザインパネルのレイアウト欄のアイコンをクリック

　　　　　②すべて要素を選択し、shift＋A

　　　　　③すべて要素を選択し、右クリックでオートレイアウトを追加

レイヤーの見方

　　　　　オートレイアウトを追加した場合レイヤーの右側に川のマークが出る

　　　　　川→横並び　　　三→縦並び

解除の仕方

　　　　　⌘＋shift＋G（背景の要素も消える）

　　　　　⌥＋shift＋A（背景残る）

各余白の設定

　　　　　アイテム間の余白　水平パディングの調整

順番の入れ替え

　　　　　中身の要素を選択した状態で矢印キーを押すと簡単に順番を入れ替えられる

　　　　　オートレイアウトのパネルから→↓もできる

揃え位置

　　　　　パネルから揃える位置を変えられる

　　　　　ダブルクリックで均等配置もできる

フレームの大きさ設定

　　　　　①固定値　

　　　　　②コンテンツを内包

　　　　　③コンテナに合わせて拡大

　　　　POINT

　　　　　・コンテンツを内包→親フレームにつける

　　　　　・コンテナに合わせて拡大→中に入ってる子フレームにつける

折り返し機能

　　　　有効にするには子要素が親フレームからはみ出るような

　　　　レイアウトになってないとつかない　

最小幅、最大幅

　　　　コンテナに合わせて拡大

　　　　　サイドバーがついてる画面を作成する場合、コンテンツ幅は親フレームに沿って

　　　　　拡大されるが、サイドバーの横幅は拡大されない

便利なプラグイン

　　　　Ratios　　縦横比を保ったまま拡大縮小できる

気づき・感想

オートレイアウトを使いこなすことでコーディングのflexboxと同じことができる

次にやること

プロトタイプについて学ぶ