こちらから BootstrapXD-vXX.xd というファイルの最新版をダウンロードしてください。
MITライセンスで公開しており、無料でご利用いただけます。

始め方

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 をアップデートしてアセットを読み直す

ファイルの特徴

実際の表示に忠実

スクショにほぼぴったり重なるほど精度の高いモックを作成できます。

アセットパネルの活用

配置したテキストに文字スタイルをあてていくだけでそれっぽくなります。

いくつかコンポーネントとしてオブジェクトを登録しています。配置したあとに、カラーアセットを適応して配色を変えることができます。

最初はアセットの絞り込み機能を使うと探すのが楽です。

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

いくつかのオブジェクトにはレスポンシブサイズを手動で設定しています。

さらにtableやlistなど一部のオブジェクトではリピートグリッド機能も併用しています。

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

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

小ネタ

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

終わりに

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

ちなみに、現在 Adobe XD Trail（Adobe公式 AdobeXD学習サイト）の学習キットページにBootstrapXDを掲載いただいています！