当サイトでは、かれこれ長いこと Vuetify の数々の魅力的な機能やコンポーネントについて、
複数の記事を書いてきました。
今回は、少し趣向がことなる話ですが Vuetify で何かを作る際に、デザインカンプや
画像としてのデザインモックアップが必要になった場合に利用できそうな、
「Vuetify公式のFigma無料プラグイン」についてのお話です。
プラグインのインストール方法
1. 以下のVuetifyのECサイト、
store.vuetifyjs 内の、該当ページ( Official Vuetify 3 UI Kit Figma )にアクセスします。
2.[Add To Cart]ボタンを押して、決済画面に進みます。
ただし、無料のFigmaプラグインなので金額が発生するわけではないので大丈夫です。
(※↑2023/02/13、この記事の執筆時点では無料なことを確認)
3.必要な情報を最低限入力して決済を完了すれば、ダウンロードリンクが記載されたメールが
決済画面で入力したメールアドレスに届きます。
4.上記のメール記載のリンクを開くと、ダウンロード画面に進むのでダウンロードします。
5.ダウンロードしたファイルを、Figmaの[ファイルをインポート]というボタンから読み込むことで、使用が可能になります。
使ってみた感想
Vuetify公式のFigma無料プラグインには、
3つのFigmaファイルが入っています。
・vuetify-ui-light-kit.fig
・vuetify-ui-dark-kit.fig
・vuetify3-ui-light-kit.fig
上2つは Vuetify 2 系統のUIキットのようで、
Vuetifyの各種コンポーネントがほぼ全てFigmaファイルにまとめられています。
Vuetifyで何かを制作する際の、UIデザインの雛形として利用するには便利そうでした。
Vuetify3用の vuetify3-ui-light-kit.fig は、
まだ制作途中といった感じでしたが、同梱されている Readme.md を読むと
「活発に開発されており」「完全ではない」
との記載があるので、今後アップデートされていく模様です。
それぞれUIコンポーネントごとにレイヤー分けされているキットなので、
Vuetifyの各種コンポーネント全体を把握するのにも役立つかもしれません。
Vuetify の UI Kit に関する公式ページ
Vuetify の UI Kit に関する公式解説ページは次になります。
↑こちらの公式ページに、詳細なダウンロード手順などが記載されています。
この記事のまとめ
今回はとても手短ながら、
Vuetify で何かを作る際に、デザインカンプや
画像としてのデザインモックアップが必要になった場合に利用できそうな、
「Vuetify公式のFigma無料プラグイン」について、記事を書いてみました。
記事内にも書いたとおり、light/darkテーマごとに
Vuetifyのコンポーネントが網羅されているUI Kitなので、
開いて一度全体を眺めてみたり、
また各コンポーネントがレイヤーに分かれて入っているので、
Figma上でそれらを組み合わせて動かしてみるだけでも、
画面のUIイメージが想像しやすく
インスピレーションが湧きやすいかもしれません。
この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。