まずはフレームを作る
最近はスマホファーストなのでスマホのどれかを選ぶ（iPhone 14 Pro）
⌘C と ⌘V によって右側にフレーム増える（フレーム = index.html）
1フレームは1ページと考える。コピペすると左側に表示されるレイヤーの順番がめちゃめちゃになるから、都度入れ替える。名前も都度つける。
適当に配置する
長方形を配置する
XとYはフレーム内の座標。HとWは縦横幅でその隣の縦横比を固定ボタンで、縦横比を維持できる。shiftを押しながら広げても維持できる。
制約はグループ化して親になってる要素に対して固定でき、右下にすると右下に固定される（カードコンポーネントに使用する）
楕円を入れてどっちも拡大縮小にすると、カードコンポーネントの大きさに応じてアイコンも大きくなる。右側のレイヤーはあまり使わない。
フォーカスも1操作になるから ⌘Z で戻るとき注意する。
テキストを配置する
テキストのフォントは regular と bold のみ使用する。『タイプの設定』の『テキストを切り捨てる』で...にできる。文章を2行に収めたいときは、テキストの高さを固定すると2行目の末尾は...になる。
オートレイアウト（CSSのFlexboxに当たる）
Figmaを使ってデザインするときは、ほぼオートレイアウトを使用する
オートレイアウトを使うときのフレームは高さを『コンテンツをハグ』、横を『コンテナに合わせて拡大』とする。
グループ化する親要素もオートレイアウトの『コンテナに合わせて拡大』にしないと、子要素は『コンテナに合わせて拡大』とできない。
flex-wrap には対応してないため、2行目を自ら作るしかない。
レイアウトグリッドは不要
コンポーネント化
繰り返しの要素を作るときに使われる
左側のレイヤーからコンポーネント化する要素を選択し『コンポーネントの作成』を押すと、紫色になる。それを ⌘C と ⌘V で複製する。
メインコンポーネントを編集するとインスタンス（複製）も修正される。
ページを複数作り、pages は画面置き場、components はコンポーネント置き場にする。components にオートレイアウトのフレームを幾つか作ったり大きくしてコンポーネントを置く。
コンポーネントを作ったら『プロパティ』ができる。『プロパティ』にはbool値などの変数を設定できる。コンポーネントのある要素を選択し変数を設定すると、メインコンポーネントのインスタンスの変数をfalseにし、特定のインスタンスにはその要素を表示しないことができる。
variants を使用すると異なる状態を作れる。Zenn の Trending と Following と Explore のタブを入れ替えできるイメージ。
『スワップインスタンス』ならアイコンの変更とか簡単にできる。
あと左側のレイヤーはもういじらないなら鍵を掛ける。消しちゃうため。
まとめ
▷のボタン（プレゼンテーションモード）を押すとスマホ画面を見れる。プロトタイプの『スクロールなし』のチェックを外したらスクロール可。