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
上の動画のように、画面左上のアイコンをクリックすると、すべてのアートボードをグリッド表示にできます。任意のアートボードに素早く移動したいときや、全体像を確認したいときに便利な機能です。
#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コードもプロパティインスペクタに表示されます。コードを選択すると、クリップボードにコピーできます。
#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
共有されたデザインスペックにダウンロード可能な画像が含まれている場合は、上の動画のように画像を選択すると、ダウンロードボタンが表示されます。プルダウンから、ダウンロードするフォーマットを指定して、ダウンロードボタンをクリックすると画像ダウンロードできます。(ダウンロード可能なフォーマットは、共有した際に「書き出し先」に指定したプラットフォームによって変わります)
いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?
次回をお楽しみに!