
Adobe XDを使ってレイアウトグリットの設定
webサイトのワイヤーフレームを作る機会が増え、XDをちょこちょこ使っている日々です。
しかし、使いこなせていないのが現状・・・。
そんな訳でGoogleさんに聞きまくりの毎日ですが、次やるときに忘れている&以前Googleさんに何と聞いたかすらも忘れてる💧
その結果、検索するのに時間を費やす負の連鎖・・・自分のやらかす「あるある」です。
というわけで、次はnoteを見ればわかるように、参考サイトや人から教えてもらったことを備忘録として書こうと思います。
レイアウトグリットの設定方法
コンテンツ幅を決める
参考サイト、同ジャンルのサイトのコンテンツ幅を検証し、決める縦列 12Px
段間幅 左右の余白×2 ※列(カラム)の間の距離
リンクされた左右のマージン
=(アートボード幅 - (コンテンツ幅 - 段間幅)) ➗ 2
XDでレイアウトグリッドを設定する方法について解説します