LOGzeudon

名古屋で働いているWebデザイナーのブログです

AdobeXDで使えるBootstrap4のテンプレートデータをつくってみた(Mac向け)

AdobeXDで使えるBootstrap4のテンプレートデータをつくってみた(Mac向け)

こちらから BootstrapXD-v0.3.xd というファイルをダウンロードしてください。無料! github.com

始め方

  1. Adobe XDをインストールする(無料)
  2. Fonts - Apple Developerから SF Pro フォントをダウンロードしてインストールする
  3. Finderから /Applications/Utilities/Terminal.app/Contents/Resources/Fonts/ に移動し、中のフォント SFMono-Regular.otf をインストールする
  4. GitHub から BootstrapXD-v0.3.xd をダウンロードする
  5. Bootstrap Documentation もたまに見ながらデザインする

応用

複数のファイルに分けて作業する場合、 BootstrapXD-v0.3.xd をそのまま編集するよりアセット(カラー・文字スタイル・コンポーネント)のマスターデータとして活用したほうが便利かもしれません。

  1. 一旦クラウドドキュメントとして BootstrapXD-v0.3.xd を保存する
  2. XDで新規作成し、アセットに BootstrapXD-v0.3.xd を読み込む
  3. 新しいスタイルやコンポーネントが必要になった場合、 BootstrapXD-v0.3.xd をアップデートしてアセットを読み直す

ファイルの特徴

実際の表示に忠実

https://data.rokuzeudon.com/blog/img/bootstrap-xd.svg
スクショにほぼぴったり重なるほど精度の高いモックを作成できます。

アセットパネルの活用

https://data.rokuzeudon.com/blog/img/bootstrap-xd.svg
配置したテキストに文字スタイルをあてていくだけでそれっぽくなります。

https://data.rokuzeudon.com/blog/img/bootstrap-xd.svg
いくつかコンポーネントとしてオブジェクトを登録しています。配置したあとに、カラーアセットを適応して配色を変えることができます。

f:id:rokuzeudon:20190707225504p:plain
最初はアセットの絞り込み機能を使うと探すのが楽です。

レスポンシブサイズ・リピートグリッドの活用

https://data.rokuzeudon.com/blog/img/bootstrap-xd.svg
いくつかのオブジェクトにはレスポンシブサイズを手動で設定しています。

https://data.rokuzeudon.com/blog/img/bootstrap-xd.svg
さらにtableやlistなど一部のオブジェクトではリピートグリッド機能も併用しています。

グリッドレイアウトの活用

f:id:rokuzeudon:20190707231432p:plain
Bootstrap用にグリッドを設定したアートボードを内包しており、コピーしてすぐに使えます。

小ネタ

f:id:rokuzeudon:20190707123227p:plain
正方形のアートボードを左上に置いておくと、起動画面でいい感じにサムネイル表示されました。

終わりに

どれくらいニーズ在るのかわかりませんが公開してみました。使いにくいところがあればぜひ教えてください。

おまけ

途中ですが、Nuxt.jsを初めて試してみたら快適で、簡単にpugとscssとBootstrapを使える環境作って、GitHubページにもデプロイすることができました。

6qd.github.io

気が向いたらまた紹介します。