目次
BuefyのUIキット作りました!
BuefyのUIキットです。無料ですので使ってください!
以前制作したBulmaのUIキットを元に、BuefyのUIキットを制作しました!
無料ですので、使いたい方はぜひダウンロードしてください!
Buefyって何ぞ?って方は「BulmaとVue.jsでできたUIコンポーネント「Buefy」【紹介とチュートリアル】」の記事を読むことをオススメします。

▲Buefy-UIキットの外観
下記のボタンからファイルをダウンロードできます。
※ダウンロード前に下記の注意事項をお読みください。
注意事項
- みなさまが当Adobe XDファイルをダウンロードし、使用することによって、コンピュータやソフト、または業務に支障・障害が生じた場合、いかなる理由によるものでも一切責任を負いません。あらかじめご了承ください。
- 当データは、Adobe XDのバージョン(11.0.22.10)で作られています。バージョンによってデザインが崩れたり、意図しない動作が発生する可能性があります。
- 利用制限は特にございません。商用でも無料でご利用いただけます。
ファイルの中身の解説
解説するほどでもありませんが、ファイルの中身をさらっと紹介します。
BuefyとBulmaのUIが一緒に入っています
今回制作したBuefyのUIキットは、前回制作したBulmaのUIキットを元に制作しています。
したがって形式はxd(Adobe XDファイル)です。比較的新しいバージョンのXDであれば、問題なく開けると思います。
また、実際にファイルを開いていただくと分かるのですが、元のBulmaのUIキットにBuefyのUIを付け足しています。
画面左側にはBuefyのUI、画面右側にはBulmaのUIを配置しています。

画面左側がBuefyのUI。画面右側がBulmaのUI。
適宜、必要なUIコンポーネントをコピペしてお使いください。
Buefyの各コンポーネントをそろえています!
Buefyの公式サイトのドキュメンテーションに記載されているUIコンポーネントを一通りそろえました。
これで大概のレイアウトは作れると思います。

▲BuefyのDialogです。

▲BuefyのSnackbarです。

▲BuefyのDatepickerです。
まとめ
以上、BuefyのUIキットでした。
使いたい方はぜひお試しを!
BuefyのUIキットについて「ここが間違っているよ。こうした方がいいよ。」といったご意見がありましたら、お問い合わせにご連絡くださいませ。
なるべく早く返信するよう心がけますので、よろしくお願いします。