AlignmentとSpacingを使って、Objectの位置や感覚の整理整頓が理解できたら、
Figmaにとって別のレイアウト方式を学習したいと思います。
それが、
Gridです。
Gridとは？
Gridは、日本語にすると「格子」です。
Figmaでは、FrameなどにGridを設定すると、画面上に基準となる線を表示できます。
例えば、
┌─┬─┬─┬─┬─┬─┐
│ │ │ │ │ │ │
├─┼─┼─┼─┼─┼─┤
│ │ │ │ │ │ │
├─┼─┼─┼─┼─┼─┤
│ │ │ │ │ │ │
└─┴─┴─┴─┴─┴─┘
のような状態です。
Tableレイアウトと似ていますが、それぞれのセルが、独立したObjectで構成できます。
勘違いしてはいけないのは、Tableのように、格子の線を表示するというワケではなく、
それぞれの枠に一定感覚で、表示させるためのガイドラインを表示する機能です。
（Gridはレンダリング表示はされません）
Gridは、
「Objectを配置するときの基準として使うためのもの」
と理解しておいてください。
Gridの使用サンプル
Gridを使うチュートリアルです。
1. Frameを一つ作る
Webサイトのトップページを想定して、幅1440px、高さ900px程度のFrameを作ります。
2. Gridを設定
Frameを選択すると、右側のプロパティにLayout gridを設定できる場所があります。
「レイアウトガイド」の「+」ボタンを押すと、Gridの設定ができるようになります。
Gridを設定すると、Frame上に基準線が表示されます。
設定値として、今回は144の値で、横を10個に区切ったグリッド線を表示させます。
3. Objectの配置
作成したGridのFrameに、RectangleやTextを配置します。
実際にやってみるとわかるのですが、
GridはObjectを自動的に並べてくれるものではありません。
あくまで「配置するときの基準」です。
どの辺に配置するかの目安として便利に使える機能です。
Gridの種類
FigmaのGridには、用途に応じていくつかの種類があります。
Gridは、その中の１つの機能で、「縦横のマスを作る」と理解してください。
代表的なのは、次の３つです。
- Grid
- Columns
- Rows
上記のサンプルで使用したのが「Grid」です。
Columns（列）
Columnsは、横に並ぶマス（列）を作ります。
先ほどのpxサイズでの指定ではなく、何マス分の列を作るのかを設定できます。
Rows（行）
Rowsは、縦に並ぶマス（行）を作ります。
列と同じで、均等に分ける行数を設定できます。
GridとAlignmentの違い
以前学習した、AlignmentとGrid機能の違いは、
Alignmentは、
「すでに配置されているObject同士をどう揃えるか」
Gridは、
「Objectを配置するとき、どこを基準にするか」
これを理解して、適宜使用するようにしましょう。
MarginとGutter設定
ColumnsとRowsの設定は、Gridと少し違っています。
設定は、右パネルのこのボタンをクリックしてください。
Grid設定
Columns（列）
Rows（行）
設定内容
種類
- マスの配置を、幅や高さに応じて均等にするか、上下左右のどちらかに寄せるか、または、中央に寄せるかの設定。
オフセット
- いわゆるMargin
- Frameの縁からの距離をセットできます。
- CSSでいうところの、padding
ガター
- マス同士の隙間値
- CSSでいうところの、gap
上記の設定で、余白をコントロールできるようになります。
あとがき
Webページを作る時に、この画像や、要素は画面のどの位置に表示するかを考えた時に、
今回学習したGridを表示しておくと、簡単にアタリがつけられて、作業が効率化することができます。
ワイヤーフレームを作る時の基準にもなるし、
そもそも、配置する個数などの目安も手軽にイメージしやすくなります。
慣れてくると、Grid機能自体で、ワイヤーフレームを作ったりもできるようになります。
作業スピードが早い人は、こうした機能を使って安定した作業をしていることは間違いないですね。
0 件のコメント:
コメントを投稿