Adobe XD 最近更新加入了 Plugins 功能(插件),開發者們也摩拳擦掌的加入各種好用功能,讓設計師們可以輕鬆活用這些 Plugins。

而在繪製設計稿時,時常會需要一些假資料看起來才更完整。雖然 Adobe XD 裡面沒有內建這類的功能,但你可以在「Plugins」裡面找到解決這個問題的插件們;而這次要介紹的是「Google Sheets by Impekable」,它可以透過 Google Sheets 整理你所需要的文字或是圖片資料,並一鍵匯入,甚至還能一鍵更新修改過的資料內容。

怎麼安裝插件?

你可以透過兩種方式來安裝這個插件:從官網下載、或是從 Adobe XD 的 Plugins 資料庫裡搜尋。

安裝作法一:官方網站

進到官網之後,你可以很輕鬆地就找到下載的按鈕,只要打開這個下載完的檔案就可以安裝成功了。

官網連結:https://googlesheetsforadobexd.impekable.com/

安裝作法二:Adobe XD 的 Plugins 資料庫

進入 Adobe XD 之後,在最上方的選單列表中選擇 Plugins>Discover Plugins…,再在搜尋框裡面搜尋 Google Sheets 並按下 Install 即可安裝完成。

如何操作插件?

第一步:整理資料

首先,要先利用 Google Sheets 線上試算表來整理你需要在設計稿內使用到的所有資訊欄位,像是姓名、文字段落、圖片等等。

注意:整理圖片資料時,必須要使用連結,後續操作才能順利匯入。

第二步:繪製設計稿

接下來就是依據你的需求在 Adobe XD 裡繪製設計稿。

注意:需要匯入資料的物件圖層最好重新命名,不需要與資料欄位的名稱一模一樣,只要便於識別就好

第三步:匯入試算表

匯入資料的方式有兩種:貼上線上試算表的連結、或是從電腦上傳 CSV 檔案。

匯入方法一:貼上線上試算表的連結

(1) 打開線上試算表,點選右上角的「共用」按鈕,並設定為公開連結後取得試算表連結網址。

  • 一定要是公開連結,不然插件會抓不到資料。

(2) 接著回到 Adobe XD 裡選擇想要匯入資料的區塊,可以是個別選擇的多個物件、一個或多個複數物件的群組、或是 Repeat Grid 產生的區塊。

(3) 按照 Plugins>Google Sheets>Paste Public Link… 的路徑啟動插件。

(4) 在 Paste URL 的地方貼上欲匯入試算表的公開連結,並按下 Continue 繼續下一步。

(5) 最後,設定好設計元素與其對應的資料欄位後,按下 Apply 就完成了。

  • 若設計稿的圖層名稱與試算表的資料欄位命名相同的話,插件會自動幫你配對好。
  • 若勾選左下角的 Randomize Content,插件會幫你隨機生成資料順序(對應欄位不變)。
  • 若對於隨機生成的順序不太滿意,可以透過插件的 Refresh Content 功能重新生成。

匯入方法二:從電腦上傳 CSV 檔案

使用流程與使用線上試算表的連結的方式並無二致,只是路徑的部分最後是選擇 Load .CSV。
唯一要注意的是,如果是選擇上傳 CSV 檔案的話,之後沒有辦法使用 Refresh Content 的功能。

第四步:資料更新

這個插件方便的地方在於,就算試算表的資料被刪減或是調整了,仍可以一鍵同步修改的內容。操作步驟如下:

  1. 選取匯入修改前試算表的區塊。
  2. 按照 Plugins>Google Sheets>Refresh Content 的路徑啟動資料更新的功能。

為什麼需要這個插件?

一、真實資料的排版需求

Adobe XD 現在雖然多了一些可以產生假資料的插件,但若是剛好踫上了需要使用正確的真實資料來排版的專案,那使用 Google Sheets by Impekable 就能快速置換這些資訊。

二、一鍵完成線上同步

在多人合作的專案當中,資料的整理可能不只由一個人來完成。若每次的資訊修正都需要調整一次設計稿,只會徒增給設計師許多工作量。若能妥善利用這個插件,想必可以省去許多修改的時間。

三、整理假資料的資料庫

你或許在設計稿上只會用到假資料,儘管如此也能使用這個插件來整理自己常會使用的各種假資料;甚至還可以利用假資料切換多國語言、測試文字區塊字數等等。

插件只是一個幫助你在設計上更加便利的工具,要如何使用因人而異,或許還有更便利的使用方式等著你來嘗試;重要的是,只要能為你節省設計時間的都是好插件。就讓大家自己去玩玩看吧!

歡迎熱愛前端的你加入我們 六角學院粉絲團