Adobe XD #02 UIキットの取得

便利なチュートリアル

XDをインストールするとホーム画面が表示される。メニューに「学ぶ」とある。

ホーム画面

これをクリックするとチュートリアルの動画が一覧表示される。見るのをお勧めする。YouTubeの動画だ。説明は英語だが日本語の字幕が表示される。字幕が英語の時はYouTubeの翻訳機能を使えば問題ない。

チュートリアル動画

アートボード

何本か動画を見たところ分かったような気になる。

  • アプリ画面のデザイン枠をアートボードと呼ぶ
  • 新規作成時には追加するアートボードを選択する
UIキット メニュー

UIキット

アートボードにパーツを配置するのは分かったが、スマホアプリではパーツのデザインが決まっている。勝手に変更することはできない。スマホのスクリーンショットからコピペするのは面倒だ。

左上の「三」アイコン(ハンバーガーメニューと呼ぶらしい)をクリックし、メニューから「UIキットを入手」を選ぶ。

UIキットを入手 メニュー

さらに「Apple iOS…」を選ぶと、Apple Design Resourcesのウェブが開く。画面を下にスクロールするとダウンロードデータが現れる。

Apple Design Resources

Betaってついてるのが嫌なので、iOS13 Download for Adobe XDをダウンロードした。dmg形式なので、そのままでは解凍できないが7-zipを使えば問題ない。

UIキットの中身

「UI Elements + Design Templates + Guides」のフォルダ内容が該当するようだ。iPadとiPhoneの2種類がある。

iPhone用を開いてみる。

なんとなくiPhoneのUIが使えそうな雰囲気である。