Bootstrap 4で実装されているデザインシステム要素すべてをデザイン素材にした無料素材 -Bootstrap Design System
Post on:2018年2月22日
Bootstrap 4で実装されているデザインシステム要素すべてをデザイン素材としてスケーラブルに再現したSketch用の無料素材を紹介します。
すべての要素はBootstrapで使用されている名前が適切に付けられているため、デザイナーとコーダー間のやり取りもスムーズにいくと思います。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022201.png)
Bootstrap Design System
デザイン素材は、Sketch用のファイルです。
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-01.png)
Bootstrap 4のデザイン素材
各要素はカテゴリごとにまとめられています。
- カラー
- タイポグラフィ
- ボタン・input要素
- フォーム・ドロップダウン
- アラート・モーダル・ツールチップ
- ナビゲーション
- バッジ・ラベル
- アイコン
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-02.png)
Bootstrap 4のデザイン素材: カラー
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-03.png)
Bootstrap 4のデザイン素材: タイポグラフィ
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-04.png)
Bootstrap 4のデザイン素材: ボタン・input要素
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-05.png)
Bootstrap 4のデザイン素材: フォーム・ドロップダウン
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-06.png)
Bootstrap 4のデザイン素材: アラート・モーダル・ツールチップ
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-07.png)
Bootstrap 4のデザイン素材: ナビゲーション
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-08.png)
Bootstrap 4のデザイン素材: ナビゲーション
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-09.png)
Bootstrap 4のデザイン素材: バッジ・ラベル
![Bootstrap 4のデザイン素材](http://coliss.com/wp-content/uploads-201801/2018022203-10.png)
Bootstrap 4のデザイン素材: アイコン
Bootstrap 4のデザイン素材のダウンロード
ダウンロードは、下記ページから。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022202.png)
「thorgate-bootstrap4-design-system.sketch」をクリックすると、すぐにダウンロードできます。ライセンスはCC BY-SA 4.0で、商用でもクライアントのプロジェクトでも無料で利用できます。再配布も可です。
sponsors