AdobeXDでBulmaのUIキットを作りました!【無料配布】

AdobeXDでBulmaのUIキットを作りました

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

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

Bulma好きが高じて、BulmaのパーツやコンポーネントなどのUI一式をまとめたAdobe XDファイル作ってしまいました(笑)。

せっかくですので、無料配布します。使ってみたい方はぜひダウンロードしてください。
BulmaのUIを一通り網羅していますので、これであらかたのデザインは作れると思います。

AdobeXDでBulmaのUIキットの外観

▲AdobeXDでBulmaのUIキットの外観

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

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

注意事項

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

ファイルの解説

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

Colors

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

Bulma-UIキット-Colors

Bulmaでよく使う色をまとめています。

Layout

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

Bulma-UIキット-Layout

Bulmaのfooterやheroもまとめています。

Form

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

bulma_xd_Form

Bulmaのフォームもそろえました!

Elements

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

bulma_xd_ Elements

Bulmaのエレメンツ群です。

Components

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

bulma_xd_Components

「パンくず」や「タブ」、「カード」などがすぐに使えます。

まとめ

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

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


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