Adobe XDでVuetify UIキットを使う

初めに

お疲れ様です。rymです。
週一投稿を初回から無視する計画性の無さに驚きを隠せません。

最近はVue.js + TypeScriptにはまっており、何かアプリ作りたいな～とか考えています。
といった訳で画面設計していくため、今回は表題の通り、Adobe XDでVuetifyのUIキットを使う方法を書こうと思います。

Vuetify UIキットをローカルへダウンロード

Vuetifyの公式サイトが準備してくれているUIキットをダウンロードします。zip形式ですので解凍をお忘れなく。

Vuetify 公式

adobe XDで開く

XD起動 > 「ファイル」 > 「コンピュータから開く」 > 「AdobeXD-Light-Theme.xd」などのUIキットファルダ内にあるxdファイルを開きます。
すると、以下のようなVuetifyのコンポーネント群が表示されます。後は、これを利用して好きなように画面を作っていけばいいですね。

結び

今回のような、n番煎じのサクッと終わってしまうようなものも今後は記事にまとめていこうと思います（備忘録ですし）。

P.S.

企画書や機能一覧はPower Point使ったのですが、何かいいフレームワークないものですかね？