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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2020.04.9