![見出し画像](https://assets.st-note.com/production/uploads/images/50673511/rectangle_large_type_2_186c36a20de6a6f5e357c23ffa53c017.png?width=1200)
FigmaのLayout grid(レイアウトグリッド)を活用する
渋谷でデザイナーをしています。福田です。
FigmaのLayout gridを利用してデザインを作成するのが、便利だったので備忘録として記録します。
Responsive layout grid とは
レスポンシブレイアウトグリッドでデザインを作成すると、画面のサイズや向きに左右されることなく、レイアウトを組むことができます。また、レイアウトグリッドのルールを決めてしまえば、そのルールに従ってレイアウトを組むだけなので、デザインの作成もスムーズになります。
gridの構成要素
gridの構成要素はColumn(カラム)・Margin(マージン)・Gutter(ガター)の3つあります。
Columnのwidthは固定値を持たず、画面幅によってwidthが変わります。Margin・Gutterのwidthは固定値を持ちます。
デバイスサイズによるMagin・Gutterの推奨固定値は下記の通りです。
(参考:Material Design)
0~599dp(スマホサイズ)
Margin:16dp Gutter:16dp
600~719dp(タブレットサイズ小)
Margin:16dp Gutter:16dp
720~1023dp(タブレットサイズ大)
Margin:24dp Gutter:24dp
1024~1920+dp(PCサイズ)
Margin:24dp Gutter:24dp
ColumnはGutterを含んでコンテンツを配置するときの指標になります。Columnのwidthは固定値を持ちません。
例えば、PCレイアウトにおいてカードを4Columnずつ配置すると定義すると、下記のように配置することができます。
また、デバイスのサイズが変わった場合もColumnの構成は変わらないので、下記のように表現されます。Gutter・Marginのwidthは固定値を持ち、Columnのwidthだけ変動します。
このようにレスポンシブレイアウトグリッドでデザインを作成すると、画面のサイズや向きに左右されることなく、レイアウトを組むことができます。デバイスサイズによるColumnの推奨数は下記の通りです。
(参考:Material Design)
0~599dp(スマホサイズ)
4Columns
600~839dp(タブレットサイズ小)
8Columns
840~1023dp(タブレットサイズ大)
12Columns
1024~1920+dp(PCサイズ)
12Columns
実際の画面に当てはめてみるとこんな感じです。
左からPC、タブレット、スマホのColumnとレイアウトです。
FigmaのLayout grid を活用してみる
Figmaで簡単にレスポンシブレイアウトグリッドを活用できるよう、Layout grid の機能を用いてガイドラインを登録してみます。
1. 任意のデバイスサイズのアートボードを作成する
新規アートボードは、Aのショートカットキーで簡単に作成できます。
2. アートボードにgridを追加する
Layout gridの+ボタンを押下してgridを追加します。追加した段階では、マス目状のgridが表示されます。
3. Columnを作成する
Gridの左側のボタンを押下し、Gridのパネルを開きます。
Layout gridの指定がGridになっているので、プルダウンを開き、Columnsに変更します。
4. Columnsの入力欄に詳細な数値を指定する
前述した通りPCレイアウトの場合の推奨数値は下記です。
1024~1920+dp(PCサイズ)
Margin:24dp Gutter:24dp Column:12
Column:12なので、Count入力欄を12に指定します。
レスポンシブにするので、TypeをStretchに指定します。
Margin・Gutter:24dpなので、Margin・Gutter入力欄を24に指定します。
5. Margin用のLayout gridを追加する
GutterとMarginの色が異なる方がデザイン作成時に便利なので、ここからはMarginの指定をします。
6. left-marginを作成する
Layout gridの指定をGridからColumnsに変更し(参考:項番3)、Columnsの入力欄で詳細な数値を指定します。
このとき指定するのはleft-marginのみなので、下記のように指定します。
Count:1
Color:Columnとは異なる色に指定
Type:Left
Width:24
Offset:0
7. right-marginを作成する
項番5,6でleft-marginを作った要領で、right-marginも作成します。
right-marginは、下記のように指定します。
RightとLeftをそれぞれのgridで個別に指定するのは、レスポンシブ対応に適用させるためです。
Count:1
Color:Columnとは異なる色に指定
Type:Right
Width:24
Offset:0
下記画像のように3つのLayout gridが作成できたらLayoutの指定は完了です。
8. Layout gridを登録する
項番1~7の手順で作成したLayout grid をいつでも呼び出せるようにFigmaにスタイルとして登録します。
Grid Stylesを開き、+ボタンを押下します。
任意の名称を記入し、Create Style を押下したらLayout grid のスタイル登録は完了です。これでいつでも、Layout gridを呼び出せます。私はデザインを作成する際にとても重宝しています。
おわりに
今回紹介したのは、私がFigmaを用いてレスポンシブレイアウトグリッドのデザインを作成する際の一例です。
他にもっと良いやり方あるよ〜という方は、是非教えてください!情報交換しましょう〜!おわり。
読んでくださりありがとうございます。大学時代にやっていた陶芸が恋しいので、サポートして頂いたお金は、信楽粘土を買う代金にあてる予定です。