プログラミング

Buefy の UI キット作りました!

Buefy の UI キットです。無料ですので使ってください!

以前制作した Bulma の UI キットを元に、Buefy の UI キットを制作しました!
無料ですので、使いたい方はぜひダウンロードしてください!

Buefy って何ぞ?って方は「Bulma と Vue.js でできた UI コンポーネント「Buefy」【紹介とチュートリアル】」の記事を読むことをオススメします。

Buefy-UIキットの外観

下記のリンクからファイルをダウンロードできます。(※ダウンロード前に下記の注意事項をお読みください。)
Buefy-UI-キット ダウンロード

注意事項

  • みなさまが当 Adobe XD ファイルをダウンロードし、使用することによって、コンピュータやソフト、または業務に支障・障害が生じた場合、いかなる理由によるものでも一切責任を負いません。あらかじめご了承ください。
  • 当データは、Adobe XD のバージョン(11.0.22.10)で作られています。バージョンによってデザインが崩れたり、意図しない動作が発生する可能性があります。
  • 利用制限は特にございません。商用でも無料でご利用いただけます。

--- 広告 ---

ファイルの中身の解説

解説するほどでもありませんが、ファイルの中身をさらっと紹介します。

Buefy と Bulma の UI が一緒に入っています

今回制作した Buefy の UI キットは、前回制作した Bulma の UI キットを元に制作しています。
画面左側には Buefy の UI、画面右側には Bulma の UI を配置しています。
比較的新しいバージョンの XD であれば、問題なく開けると思います。

画面左側がBuefyのUI。画面右側がBulmaのUI。

適宜、必要な UI コンポーネントをコピペしてお使いください。

Buefy の各コンポーネントをそろえています!

Buefy の公式サイトのドキュメンテーションに記載されている UI コンポーネントを一通りそろえました。
これで大概のレイアウトは作れると思います。

以下は例ですが、Buefy の Dialog / Snackbar / Datepicker です。

Buefy-UI Dialog

Buefy-UI Snackbar

Buefy-UI Datepicker

まとめ

以上、Buefy の UI キットでした。
使いたい方はぜひお試しを!

Buefy の UI キットについて「ここが間違っているよ。こうした方がいいよ。」といったご意見がありましたら、tonyo5197@gmail.com にご連絡くださいませ。
なるべく早く返信するよう心がけますので、よろしくお願いします。