Figmaメモ📝

 フレーム
HTMLで言えば「div」に近い
ページ単位・コンポーネント単位でよく使う


 グループ
複数の要素をまとめて動かす・管理しやすくするための単純な束ね方
見た目やサイズには影響を与えず、HTMLへの変換対象外
オートレイアウトや背景など設定不可


 セクション
複数のフレームや要素をグループ化して整理するための「ラベル付きエリア」
デザインの構造には直接関与しない（＝出力されない）
複数ページ、バリエーションを視覚的に整理したい時に便利


 スライス
書き出し用の範囲指定ツール
スライス自体は表示されない

つづこ

 ページの活用無料プラン（Starter）では、1プロジェクトにつき最大3ページという制限あり。

3ページの中で構成するならこんな感じなのかな👀
Ideas
アイディア段階のワイヤー、使うかどうかわからない試作など
構成案、画面遷移のラフスケッチ
Prototype
1の中から採用した高精度なデザイン
コンポーネントやスライス素材をセクションでわけてまとめておく
( blank )

あとからなんか分けたくなったときのために空けておく。
別のバージョン用（スマホ版など）
クライアント提出用に「Clean版」を作る
実装中の「開発モード」ページにする

つづこ

 テキストに余白をつけたいmarginは指定不可のため、以下のどちらかで対応する
フレームにネストしオートレイアウトでpaddingを指定する
空のスペーサー要素をはさむ

つづこ

 要素をグループ化したときに、バウンディングボックスが実際の見た目より大きくなる💥中にフレーム要素が存在すると、親としてのルール（オートレイアウトなど）が適用されるため、サイズがズレることがあるみたい👀
レイアウト的に問題なければグループに置き換えたほうがよさそう。

つづこ

要素間の余白を確認する📏

1つのオブジェクトを選択
Option（Mac） / Alt（Win）キーを押しっぱなしにする
マウスを他のオブジェクトの近くに移動
→ オブジェクト同士の距離がガイドと数値で表示される！