Figma ～フレームでできること～

こんにちは！こんばんは！おはようございます！
前回ざっくりとフレームとはなにか？をインプットしました。

詳しくはこちら→→Figma Learnを読み解く ～フレームについて～

今回はそのフレームがどのようなことができるのかを見ていこうと思います。
れっつらごー✨✨

アートボードとして使用

画面下側にあるアイコンからフレームに切り替えられます！
ショートカットキーだと「F」で切り替え可能です。

フレームに切り替えると画面右側でサイズを選べるので該当するサイズを選びましょう。

オートレイアウト

オートレイアウトの適用

• 画面右側にあるレイアウト枠の右上アイコンをクリック

• ショートカットキー「Shift+A」

オートレイアウトの解除

• 同じ右上アイコンをクリック

• 項目フローの「自由形式」をクリック

• ショートカットキー「Alt+Shift+A」

オートレイアウトではフレーム内の要素（以下、コンテンツ）を
どのように配置するのかを指定できる便利な機能です。

• フロー

• 配置

• 間隔

• パディング

などが設定できます。これらを設定しておくとレスポンシブ画面の
デザイン時やコンテンツの内容に変化があっても自動的に調整してくれるものです。

フロー

コンテンツを縦に並べるのか横に並べるのか、グリッド上に並べるのか決められます。
コンテンツの数に増減があっても自動的に調整してくれます。

配置

コンテンツ要素をどこの位置に配置するのかを決められます。
レスポンシブ対応時に役に立つ機能です。

その他

その他の機能ではわかりづらい部分だと「コンテンツを隠す」かと思います。
こちらはcheckをつけていると、オートレイアウトがかかっているフレームより
はみ出ているコンテンツを非表示にすることができます。

非表示にすることで実際の画面と同じ見え方でデザインができるメリットがありますが、
隠れているコンテンツがわからないというデメリットもあります。

個人的にプロトタイプを作るときにはおススメです！


今までイラレやフォトショでは四角や丸などの背景オブジェクト＋コンテンツで
作成していたものをフレーム＋コンテンツで作成することでコンテンツに合わせて
フレームが動いてくれます✨

コンテンツを変更すると背景オブジェクトも修正しなくてはいけなかった
という事態が省けるということです🙌

いかがでしたでしょうか？
今回はフレームでできることを詳しく記載させていただきました。
（次回は…何を書くのか悩んでいます。。。）

最後まで読んでいただきありがとうございました！
ではでは、またお会いしましょう～～👋👋