Adobe XDをもっと使いこなすヒント！第49回開発者にデザインスペックを公開する

Adobe XDをもっと使いこなすヒント！

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、開発者とデザインスペックを共有する方法に関する9つのツイートを紹介します。

Tip 1. 開発者向けにデザインを共有する

#AdobeXD #ProTip Publish for Development in Share Mode to create a design spec to be used by your devs in implementation. @AdobeXD pic.twitter.com/3ro5qcIJ1Q

— Elaine Chao (@elainecchao) February 13, 2020

Adobe XDからデザインスペックを公開すると、開発者が画面のレイアウトやスタイル情報をブラウザから入手できるようになります。

デザインスペックの公開は、共有モードで行います。上の動画のようにプロパティインスペクタの「表示設定」のプルダウンから「開発」を選択して「リンクを作成」をクリックします。すると、共有リンクが作成されて、「リンクを共有」の欄に表示されます。共有リンクの左側にあるアイコンをクリックすると、作成されたリンクをコピーできます。

#AdobeXD #ProTip If you have icons or other assets marked for batch export, they will be uploaded for your developers to access from the link you generate. @AdobeXD pic.twitter.com/eYKK8AE8Cz

— Elaine Chao (@elainecchao) February 14, 2020

公開したデザインに書き出し対象のデザインアセットが含まれていると、デザインスペックの公開時にアセットもアップロードすることができます。これにより、デザイナーが画像を書き出して開発者に渡す手間を省けます。

アセットをアップロードするには、「書き出し先」に開発対象のプラットフォーム（Web、iOS等）を指定して、その下の「ダウンロード可能アセット」のチェックボックスをオンにします。

Tip 2. 共有リンクにセキュリティを設定

#AdobeXD #ProTip Add a little security to your public links by requiring a password. Users will then have to type that password in to access your prototype. @AdobeXD pic.twitter.com/nZ6zl9SHWC

— Elaine Chao (@elainecchao) February 10, 2020

共有するURLをパスワードで保護したい場合は、「パスワードを設定」をチェックします。すると、上の動画のように、パスワードを入力するフィールドが表示されます。パスワード入力後に「リンクを更新」をクリックすると、共有URLにパスワードが設定されます。

パスワードは8文字以上で、アルファベットの大文字と小文字、それから数字を1つ以上含まなければ無効とみなされます。「リンクを更新」ボタンは、無効なパスワードが入力されているとアクティブになりません。

#AdobeXD #ProTip For increased security, share your prototype and design spec links with private invitations instead of just a password. This requires your viewers to have an Adobe ID (even a free one!), which can have 2 factor authentication enabled. @AdobeXD pic.twitter.com/qdFLEIfhfx

— Elaine Chao (@elainecchao) February 11, 2020

パスワードを設定する代わりに、招待されたユーザーのみにアクセスを許可することもできます。その場合は、「アクセス権の所有者」のプルダウンから「招待されたユーザーのみ」を選択します。招待にはアドビID（無償プランでも可）を使います。招待するユーザーに対して、「閲覧のみ」と「共有可能」のオプションが指定できます。

いったんパスワードを設定した共有リンクにはこの指定ができません。共有リンクの右のドロップダウンから「新規リンク」を選択して別の共有リンクを作成します。

Tip 3. アートボードを表示する

#AdobeXD #ProTip By default, XD design specs show you the shared prototype. To switch to design specs, click on the code icon </> in the right navigation rail. @AdobeXD pic.twitter.com/IvcLYHHQIL

— Elaine Chao (@elainecchao) February 17, 2020

共有されたURLをブラウザで開いたとき、最初に表示されるのはプロトタイプの共有画面です。デザインスペックに切り替えるには、画面右上の</>アイコンをクリックします。

#AdobeXD #ProTip Click on the artboard overview icon in the upper left to have the choice between grid view for quick search and the artboard layout overview, which enables you to quickly explore the relationships between the artboards. @AdobeXD pic.twitter.com/INhxkS4eSy

— Elaine Chao (@elainecchao) February 18, 2020

上の動画のように、画面左上のアイコンをクリックすると、すべてのアートボードをグリッド表示にできます。任意のアートボードに素早く移動したいときや、全体像を確認したいときに便利な機能です。

Tip 4. 要素のレイアウト情報を表示する

#AdobeXD #ProTip Select any object on the artboard to see its measurements, then hover over other objects to see the distance between them. @AdobeXD pic.twitter.com/N1oJDpHmte

— Elaine Chao (@elainecchao) February 20, 2020

アートボードを表示して、要素をひとつ選択すると、その要素の属性が画面右のプロパティインスペクタに表示されます。この状態で、他の要素の上にカーソルを移動すると、選択されている要素との距離が表示されます。アートボード上にカーソルを移動すると、アートボードの四辺からの距離が表示されます。

#AdobeXD #ProTip Select an object to get its properties, and then quickly copy properties to your clipboard by clicking on them. You can switch between common color formats in the upper right corner of the section in the property inspector. @AdobeXD pic.twitter.com/oBwbFNZD4A

— Elaine Chao (@elainecchao) February 21, 2020

属性として表示されているカラーをクリックして、色の値をコピーすることが可能です。その際に、フォーマットをプルダウンから変更できます。

「書き出し先」に「Web」を選択して共有されたデザインスペックは、レイアウトとスタイルのCSSコードもプロパティインスペクタに表示されます。コードを選択すると、クリップボードにコピーできます。

Tip 5. 共有された画像を書き出す

#AdobeXD #ProTip Once you click into an artboard in design specs, any object marked for batch export is available for download. Quickly download in the available formats for the platform your designer exported for. @AdobeXD pic.twitter.com/ulkHsDT8Bz

— Elaine Chao (@elainecchao) February 19, 2020

共有されたデザインスペックにダウンロード可能な画像が含まれている場合は、上の動画のように画像を選択すると、ダウンロードボタンが表示されます。プルダウンから、ダウンロードするフォーマットを指定して、ダウンロードボタンをクリックすると画像ダウンロードできます。（ダウンロード可能なフォーマットは、共有した際に「書き出し先」に指定したプラットフォームによって変わります）

いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？

次回をお楽しみに！