(快訊)新 Plugin 發佈!直接將 unDraw 開源插圖導進 Adobe Xd。

林育正 Riven
RAR 設計攻略
Published in
5 min readApr 5, 2019

原本下載 SVG 直接丟到 Xd 就很方便了,現在可以直接原生使用!

undraw for Adobe xd

有上過我課程的朋友,一定都對 unDraw 這款開源的插圖素材網頁不陌生,不管是做介面設計或在做簡報,這都是個可以立刻置入圖片的好解決方案,這樣扁平化風格的插圖非常萬用,而且還可以在線編輯,超級佛心!商用也沒問題,授權是採用 MIT 授權條款

Flat design 的風格可以有效地配合排版需求,並且用簡單的色系搭配視覺上的舒適感,創造直觀的體驗。

以下就直接步驟說明該如何使用,對於這類資訊掌握熟悉的朋友,下面的連結點出去自己摸就好,慢走~

Step 1 - 下載新 Adobe Xd Plugin : https://xd.undraw.co/

直接進入介紹網頁後,可以直接點擊下載 Plugin。在這邊提醒因為是新款 Plugin 記得要到 Creative Cloud 先檢查 Adobe Xd 是否已經更新到新版,Xd 三天兩頭就有新功能或改版,記得有空就要更新一下。

點擊 Download 下載。
Step 2 - 在 Adobe Xd 打開 Plugin

下載成功後可以直接在 Adobe Xd 選擇 unDraw,沒有顯示的話可以重開一次 Adobe Xd。

undraw 的 Plugin 會自動偵測你在 Adobe Xd 的 Assets 裡面所儲存的顏色,通常是這個 UI 介面的標準色,直接套用到插圖上。

undraw Plugin 會自動匯入 Assets 顏色
Step 3 - 找到適合的插圖
可以往下瀏覽更多或搜尋關鍵字。

點擊後就會自動複製這張插圖到剪貼簿,可以在想要的地方貼上它,就完成囉。

進階 Step 4 - 進行編輯、換色與合成

原本會將 undraw 置入到 Adobe Xd 推廣教學的重要原因,就是在 Xd 我們可以很方便地做向量編輯、換色或是添加新東西,這次發佈的 Plugin 無疑是天作之合,配合 Adobe Xd 的鋼筆與內建的形狀工具,就算不懂電腦繪圖,也可以做出看起來好像有那麼一回事的視覺感

所有錨點都可以透過鋼筆工具去重新繪製。

透過自己再去編輯調整,可以避免重複性過高的問題,不然其實大家都用一樣的插圖,看多了多少會覺得膩。

後記

超佛心插圖創作者 Katerina Limpitsouni 也發佈了篇 Medium 跟大家說這個新 Plugin 的誕生,她也同時說了未來會有更多 Plugin 的更新,將會有更強大的與 Adobe Xd 的結合。

目前玩下來覺得真的相當實用!唯一可惜的是還無法在 Adobe Xd 裡面直接觀看套色後的樣子(網頁版本可以)相當期待之後這款 Plugin 的更新!

如果在學習上有遇到什麼問題,或是想跟更多 UI/UX 設計學習的同好共同討論、分享心得的話,歡迎加入這個中文社團:

另外,我也有與 YOTTA 合作將 UI 介面設計師所需要的技能都收錄在這門線上課程當中,有需要的同學也可以參考:

我是 Riven,謝謝你的閱讀,還算受用的話可以給予拍手鼓勵,這裏會寫比較多 UI/UX 設計資源與實用工具分享,跟 Adobe Xd 的推廣文章,有興趣可以 Follow 林育正 Riven 也可以發摟我的 Facebook 廢文,我們下次見啦~ :D

--

--

林育正 Riven
RAR 設計攻略

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design