Adobe XD #10 FlutterプラグインとUIキット

投稿者: | 2月 16, 2021

プラグインのインストール

前回までAdobe XDでiPhoneアプリのデザインをしてみたが、AndroidとiOSのクロスプラットフォームであるFlutterを使うことに考えを改めた。

そのためにはFlutter自体のインストールが必要だが、それは開発の話になる上に、ネット上にいくらでも解説があるので、私が記録するまでもないだろう。

ちなみに私はVisual Studio CodeにFlutterをインストールした。Ver1.00から使用しているMS製品だ。パッケージの重さが10kgはあった。秋葉原で買って担いでオフィスに持って帰った。重いのなんのって…もちろん、メディアはCD-ROMではなく、フロッピーの時代だ。四半世紀も前のことだ。

そしてXDへのインストールだ。ハンバーガーメニュー「三」からプラグインを選び、「プラグインの参照」を選択する。

検索をクリックし、入力欄に”Flutter”と入れてから虫眼鏡をクリックすれば、プラグインが表示される。

”XD to Flutter”をクリックするとインストールされる。インストール後はプラグインメニューにFlutterが追加される。

UIキットのインストール

FlutterのUIはマテリアルデザインとやらを使うらしい。Googleから提供されている。メニューから「UIキットを入手」を選び「マテリアルデザイン」を選択する。

画面を下にスクロールするとDesign Kits for Adobe XDが現れる。最もトップにもリンクが貼られているのだが、いつまであるのか分からないので、こちら。

zipファイルがダウンロードされるので、どこかに解凍すればよい。

Dark Themeを開いてみる。こんな感じだ。iOSのUIキットと似ている。

次回からはこれらを使って妄想アプリの画面をデザインしていくことにする。