CSS/UIフレームワークに対応したAdobe XDのUIキット一覧

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フレームワークへのリンクもつけています。

マテリアルデザイン

Bootstrap 4

bulma

Semantic UI

関連記事

  1. UIデザインの実践練習

  2. UIデザインの心構え【Google検索編】

  3. UIデザインの前提理解【本での理解編④】

  4. UIデザインの実践【アプリ編】

  5. UIデザインの実践準備

  6. アプリ設計におけるUI検討の難しさとAdobe XD

  7. UIデザインの前提理解【本での理解編②】

  8. firebase Javascript SDK をIE11対応にする

PAGE TOP