Adobe XDでBuefyのUIキットを作りました!【無料配布】

Adobe XDでBuefyのUIキットを作りました!【無料配布】

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

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

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

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

Buefy-UIキットの外観

▲Buefy-UIキットの外観

下記のボタンからファイルをダウンロードできます。
※ダウンロード前に下記の注意事項をお読みください。

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。

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

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

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

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

Buefy-UI Dialog

▲BuefyのDialogです。

Buefy-UI Snackbar

▲BuefyのSnackbarです。

Buefy-UI Datepicker

▲BuefyのDatepickerです。

まとめ

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

Buefy-UIキットをダウンロードする


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