FRINGE

HoteKan開発担当です。
Adobe XDに関する前回の記事でUIキットがモックアップ作成に便利だと紹介しました。

今回の記事は高速開発に役立つUIキットを紹介します。

UIキットとは？

UIキットはUI要素のアラカルトです。ロードしたUIパーツをコピー＆ペーストするだけでもなんとなくのレイアウト作成は可能です。

また、プロパティを編集すれば大きさや色などを変更することも可能です。

XDの良い点はUIキットが豊富にある点です。作りたいサービスにあったUIキットが選べばUIアイデアをみえる形にすることは本当に簡単です。

CSS/UIフレームワークとは？

一方サービスの初期段階やプロトタイプ段階では実装においてCSSフレームワークなどのUIフレームワークを使うことが多々あると思います。

Bootstrapに始まり、Material DesignやbulmaなどのCSSフレームワークは高速開発に非常に便利です。

私もvuejsではvuetifyやbuefyなんかを良く使っています。

UIキット+UIフレームワークで爆速開発

実装段階でそれらのUIフレームワークを使うのであれば、XDでも同じUIパーツを使用しましょう。
そうすれば爆速開発が可能になります。

UIフレームワークを同じUIパーツを使ってXDでデザインしてしまえば、詳細なデザインプロセスをほとんど飛ばして一気に実装まで進むことができます！

UIフレームワークに対等したUIキット一覧

著名なUIフレームワークとそれに対等したUIキットへのリンクの一覧です。
個人的によく使うvuejs用のUIフレームワークへのリンクもつけています。

マテリアルデザイン

• XD UIキット
  • https://material.io/archive/guidelines/resources/sticker-sheets-icons.html#sticker-sheets-icons-components​​​​​​​
• CSSフレームワーク
  • Material Components for the Web
  • Materialize
• vuejs用UIフレームワーク
  • vuetify

Bootstrap 4

• XD UIキット
  • https://xdresources.co/resources/bootstrap-4-ui
• CSSフレームワーク
  • Bootstrap 4
• vue用UIフレームワーク
  • BootstrapVue

bulma

• XD UIキット
  • https://tonyo.design/program/bulma/bulma-ui-kit_adobexd/
• CSSフレームワーク
  • bulma
• vue用UIフレームワーク
  • buefy

Semantic UI

• XD UIキット
  • https://www.behance.net/gallery/78911187/Design-Systems-Semantic-UI-Kit-for-Adobe-XD
• CSSフレームワーク
  • Semantic UI
• vue用UIフレームワーク
  • Semantic UI Vue