Adobe XD 設計稿的開啟方式

前言

一般來講我們前端工程師會很長拿到用 AdobeXD 設計的線上標示設計稿，但是如果設計師使用的是免費版 AdobeXD 那就不太一樣了，有可能會拿到原始的 XD 檔案，那麼我們該如何開啟標示設計稿呢?

AdobeXD 原始檔

一般來講設計師都是使用個人 Adobe XD 的版本，而 Adobe XD 會有兩種方案

• 入門免費版
• 月費版

我們可以看到線上標示設計稿的共享連結只能有一個

所以這邊就拿本次的 The F2E - 前端修練精神時光屋 當作舉例，當我們在上面下載了任意 XD 原始設計稿

通常 XD 原始設計稿都是放在 Google 雲端上面，當然也有直接提供 PNG、JPG、SVG、PDF 等格式的設計師

下載完畢後，如果打開設計稿時出現 This was created with a newer version of Adobe XD.Please update Adobe XD to open it 代表你的 Adobe XD 太舊哩(太久沒更新了)

更新完畢後就可以看原始設計稿哩~

查看 XD 間距

接下來該如何看設計稿的標示呢?點一下撲克牌，然後按住 ALT 就可以看到撲克牌與上方的間距標示

線上標示文件

但是上面這種方式太麻煩，而且一個不小心可能會改到原始設計稿，所以這邊教另外一種方式比較好的方式，就是直接將目前的設計稿改成線上標示設計稿，對於前端工程師來講就是要看清楚標示，此時可以點一下設計稿上方的共享按鈕

然後共享以開發

接下來創建連結

創建過程要稍微等一下…

建立完畢後就可以取得檔案連結啦~

最後只需要將剛剛取得的檔案連結貼到網頁瀏覽器 URL 上，就可以看到線上標示設計稿囉

無法建立線上連結

如果出現通過升級來創建無數個連結與開發人員共享 OR Upgrade to create unlimited links to share with developers 那就點一下下方的 管理連結 或是透過該 連結 進入 XD 線上標示文件共享管理後台

進入 Adobe XD 共享管理後台將已經共享的檔案刪除即可解決

Adobe XD 更改成簡體中文

最後補充如何將 Adobe XD 更改成簡體中文版(目前竟然沒有繁體中文)，首先點一下左上角 Menu

然後幫助 → 語言

那麼就可以修改成簡體中文哩~

結尾

最後如果你對於 Aodeb XD 有興趣的話，可以考慮參加六角學院的 Adobe 課程 (建議透過 官網購買 比較便宜)

另外如果你找不到練習的設計稿 OR 找不到方向練習 UI，則可以來參加 The F2E - 前端修練精神時光屋，這邊已經累積了破 200 份的設計稿，讓你一天練習一份都還有剩(目前僅到第二關而已，The F2E 活動共有 9 關)

原始稿位子來源

The F2E - 前端修練精神時光屋 - UI 組