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. webpackがモジュールのimportを解決する仕組み

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

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

  5. VS Codeでprettier拡張機能を使ってvueファイルをフォー…

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

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

  8. gitのclean filterとsmudge filterを使ったC…

最近のBLOG

  1. 2021.04.12

    初登園とDX
  2. 2021.04.7

    助成金の罠
  3. 2021.03.29

    自走戦隊
PAGE TOP