Adobe XDでiOSのUIキットを使う方法

Tips
目次

概要

最近、システム開発の際のデザインの検討でAdobeのXDというソフトウェアを使用しています。

Adobe XDでは、iOSやAndroidなどのUIを作りやすいようにキットが用意されているのですが、これを使う際にどのように使うのかが分かりにくかったのでまとめておきたいと思います。

環境

  • macOS Catalina
  • Adobe XD 27.2

UIキットのダウンロード

Adobe XDでは、メニューの「ファイル > UIキットを取得」からiOSやAndroid用のUIキットをダウンロードして使うことができます。

今回はiOSを対象にして話を進めていくので、「UIキットを取得」からiOSの項目を選択します。

選択すると、ブラウザが起動してAppleのWebページが開きます。

そのページから、iOSに限らずmacOSやWatchOS用などのUIキットをダウンロードできます。

ここでは、iOSのものをダウンロードするので、iOSの項目にあるAdobe XD用のファイルをダウンロードします。

これで、UIキットを使う準備はできました。

使い方

ここから、実際の使い方の話を進めていきます。

UIキットは、dng形式のファイルのためFinderで開きます。

Finderで開くと、いくつかのファイルやディレクトリがあるのですが、「UI Elements + Design Templates + Guides」というディレクトリにある、「UIElements+DesignTemplates+Guides-iPhone.xd」というAdobe XDのファイルを開きます。

そのファイルを開くと、様々なiPhone用のUIキットが表示されます。

これらのUIキットを使う場合は、使いたいUIキットをコピペで別のAdobe XDのファイルに貼り付けて使います。

つまり、Adobe XD自体にはUIキットを管理する機構が用意されているわけではなく、別のファイルにまとめておいて、それをコピペで使うということです。

これで、Adobe XDでUIキットを使えるようになりました。

Androidなど他のものについてですが、実際に試していないのでなんとも言えませんが、おそらく同じようにコピペで対応する必要があると思います。

さいごに

外部のデータを使うというのは、それほど珍しいことではないと思っていたので、Adobe XD自体に何かしらの機能があるのではないかと思っていたのですが、少なくとも私が使っていたバージョンでは、そのような機能はありませんでした。

そのため、少し泥臭いですがコピペで使いましょう。