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. 「姑獲鳥の夏」から学ぶデータ入力

  2. Google検索から始めるゼロベースUIデザイン学習

  3. UIデザインを検討して気づいた事

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

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

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

  7. Cloud BuildでのGitHub連携とファイルの暗号化・復号化

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

最近のBLOG

  1. 2024.03.19

    TRY ANGLE EHIME
  2. 2024.01.2

    仕事始め
  3. 2023.12.30

    良いお年を
  4. 2023.12.5

    LAUNCHPAD SEED
  5. 2023.06.7

    山走り
PAGE TOP