プログラミング

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

Bulma の UI キットです。無料ですのでお使いください!

Bulma 好きが高じて、Bulma のパーツやコンポーネントなどの UI 一式をまとめた Adobe XD ファイル作ってしまいました(笑)。
せっかくですので、無料配布します。使ってみたい方はぜひダウンロードしてください。
Bulma の UI を一通り網羅していますので、これであらかたのデザインは作れると思います。

Adobe XDでBulmaのUIキットの外観

下記のリンクからファイルをダウンロードできます。
Bulma-UI キット

※ダウンロード前に下記の注意事項をお読みください。

注意事項

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

--- 広告 ---

ファイルの解説

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

Colors

よく使う「is-info」や「is-success」などの色をまとめています。
スポイトで色を拾ってお使いください。
Bulma-UIキット-Colors

Layout

footer や hero、Media Object などの Bulma の Layout もまとめています。
そのままコピーして文字と色のみ変更すれば、すぐにレイアウトを作る事ができますよ。
Bulma-UIキット-Layout

Form

Bulma のフォーム一式をまとめています。
input から select、upload までそろえています。
これでフォームは簡単に作れることでしょう。
bulma_xd_Form

Elements

「ボタン」や「タグ」、「テーブル」などの Bulma のエレメンツをまとめています。
bulma_xd* Elements

Components

サイト製作時によく使う「パンくず」や「ページネーション」、「タブ」などのコンポーネントです。
bulma_xd_Components

まとめ

以上、Bulma の UI キットでした。
使ってみたいという方がいましたら、ぜひお試しを!

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