Adobe XD 線上標示文件操作

如何顯示標示內容

點選到右側的 </> 切換到檢視模式

感覺 Size 好像缺了點

可能是右上角沒有顯示 100%

(如果筆電螢幕較小,切換成 100% 沒辦法看到全部,可以先點擊設計稿,然後兩指在觸控板上平移,如果是使用滑鼠的話需要按住空白健並搭配滑鼠左健來平移)

依據不同螢幕大小設置適合的 Size

不同裝置裡各種縮放比例對應的 Size 會有所不同,可在右上角調整縮放比例的地方點擊"向下箭頭 icon 圖標"透過下拉選單將縮放比例調整為適合,調整完畢後就會將縮放比例調整為適合的 Size

抓元素跟元素之間的距離

卡斯伯老師有提到,點選元素後,按住 alt 再點其他的就可顯示

或是點選一個元素,再把滑鼠移動到想測距離的元素上

下載圖片

點擊想下載的圖片,在右側會出現資源的欄位,以及有下載的按鍵,點擊下載後會是 zip 檔,解壓縮後就有圖片的 png 檔了

下載整張設計稿

如果想下載整張設計稿圖片,後勤組 Jimmy 寫了份教學

觀看文字大小與行距

以設計稿的「個人資料」文字為例,點選「個人資料」,在右側選單中的樣式欄位就會有相關的文字樣式,滑鼠停留在小圖示上就會顯示他是文字間距、行間距或是段落間距

另外點擊一下內容欄位中的文字就可以複製整段文字了

行距補充

卡斯伯老師:Adobe XD 繪製時有個小缺點,行高會不一定等於實際呈現的區域,所以繪製時會稍做調整

同學舉例的圖

行距差異原 slack 討論串

觀看動態 ( hover ) 效果

點選右邊欄位第一個可檢視動態效果

slack 討論串

Select a repo