AdobeXD Bootstrap4のグリッドの作り方(レスポンシブ対応)

AdobeXDのアートボードに設定できるグリッドで、iPadやSurfaceなどのアートボードのプリセットを使ってBootstrap4のグリッドを作る方を紹介します。

XDでBootstrapを使ったレスポンシブ対応サイトを作成する場合に便利です。

XDでBootstrap4のグリッドを作る方法

ここではXDのスタイルパネルにある「グリッド」設定を使ってBootstrap4のグリッドを作ってみます。

やり方はアートボードを選択した状態で、右側のスタイルパネルの下にある「レイアウト」にチェックをつけます。あとは「列」を12に、「段間幅」を30にして、左右のマージンを画面幅ごとに設定すれば完了です。

左右マージンの計算方法

左右マージンの計算方法は次の通りです。container幅に-30pxしているのは内側のpaddingを引くためです。

(アートボード幅 - (container幅 - 30px))/2 = 左右マージン

なのでSurfaceProだと次のようになります。

1440px - (1140px - 30px) = 330px
330px / 2 = 165px

container幅はBootstrap4のGridページで確認できます。

画面サイズごとのグリッド設定方法一覧

PCやタブレットなど画面サイズごとの設定を以下の表にまとめました。「Extra small」は適切なアートボードがないため480pxで作ってます。