Adobe XD #05 UIキットの使い方

投稿者: | 1月 29, 2021

テンプレート

XDでファイルを新規作成し、アートボードを選択し、コンポーネントを配置して画面を作るのだろうと理解した。

では、UIキットからコンポーネントをどうやって新規プロジェクトにコピーするのだろうか?いろいろ試したがコンポーネントがコピーできない。

なにか間違っている?
そもそもアプローチの理解が正しくない?

焦らずに動画を鑑賞する。
UIキットでデザインを開始(動画)

なるほど、ゼロから作るのではなく、作りたい画面(テンプレート)と近いものをUIキットからコピーするのか。テンプレートとはてんぷれ、つまり「お約束」ではなく決まった様式、ひな形、フォーマットを意味する。

異世界系のラノベによくみられるのは周知の事実であろう。

やってみよう

タブバーの画面を作りたいので、iPhoneのUIキットをXDで開く。そしてタブバーの画面を探す。

UIキット iPhone

このあたりか。Ctrlキーを押しながらマウスホイールを回せば拡大・縮小できるので便利だ。

タブバー画面

コピーしたい画面を含むようにマウスでドラッグして選択範囲を指定する。

パーツ選択

「右クリックしてメニューからコピーを選択」をする人が多いだろうが、私はキーボード派である。viが大好きである。ショートカットキーを駆使する元プログラマである。

Ctrl+Cでコピーするのだ。

画面を新規作成したプロジェクトに切り替える。殺風景というか無垢というか、当然のことながらドキュメントアセットには何もない。空虚である。

新規プロジェクト

ここに先ほどコピーしたものを貼り付ける。もちろんCtrl+Vである。

パーツを貼り付け

をを!アートボードにテンプレが貼りつくとともにコンポーネントも増えた。こりゃ便利だ。

なるほど。UIキットから必要なパーツをアートボードに貼り付ければ、コンポーネントも増えていくわけだ。

本日のまとめ

SDKだってゼロからプログラムしないものだ。サンプルプログラムを流用するものだ。コメントを直さずにいて、後から意味不明になるのはテンプレなのだ。

それに経験上、なぜかSDKをマニュアル通りにゼロからプログラムすると動かないことが多い。サンプルは間違いなく動くから、下敷きにするのが正解なのである。再利用はエコなのである。

次はタブバーに文字とアイコンを設定しよう。