MENU

Figmaのレイアウトグリットの数値を計算する

  • URLをコピーしました!
目次

計算式

種類は中央揃えを想定

コンテンツ幅を求める計算式

コンテンツ幅=(分割数)×(幅)+(分割数−1)×(ガター)

コンテンツ幅がに合わせて幅を調整したい場合

幅=(コンテンツ幅−((分割数−1)×(ガター)))÷(分割数)

PC表示

分割数12・ガター24を共通条件とすると、各コンテンツ幅での設定は下記表の通り。

コンテンツ幅960px1080px1128px1200px
58687278
分割数12121212
ガター24242424

タブレットやスマホは適用外

タブレットやスマホ表示を作成する時は、レスポンシブを想定していると思うので、PC表示作成時と違って画面幅の90%で表示すると思う。

その場合は、種類をストレッチにして幅を調整せず、余白調整する方がいい。

タブレットは6分割・余白40px

スマホは2分割・余白20px

よかったらシェアしてね!
  • URLをコピーしました!
目次