如何使用 ”XD to Flutter”來將設計好的 UI 匯出成 Dart
近期 Adobe XD 發表了一個 Plugin XD to Flutter,一在 FB 上面看到分享,立馬貼給 UI Designer 的朋友。 第一時間她也覺得有趣,開始研究了起來(然後就是諸多抱怨的開始,哈哈)覺得這要弄好多環境啊!要裝 VS Code 啊,要設定什麼什麼的,Balabala,我感覺到怒氣值逼近臨界點了!
一開始我也只是單純想說,不就是一個 Export 的 Button 點下去之後,就產出檔案,到底是難在哪啦?可是聽到她一直在抱怨,想說,那好吧,我做一次看看(不得不說,這流程不能簡單一點嗎,真的不是我想像那樣欸)所以才想寫下來,讓有需要用到或想玩的 UI 朋友們有個參考。
首先,有幾項是必備要準備的環境
- Adobe XD: https://www.adobe.com/tw/products/xd.html
- XD to Flutter:
3. VS Code:https://code.visualstudio.com/
4. Fluter SDK:https://flutter.dev/docs/get-started/install
再來就是在 Github 上面找個 Flutter 的專案來下載(個人提供一個)
https://github.com/katelin013/flutter-practice(練習一些 widget 的專案)
安裝到匯出流程
步驟 1
將下載的 Flutter sdk 解壓縮擺在一個你知道的位置 ( 比如說:Download )
打開 VS Code,將下載來的 Flutter 開啟
第一次開啟應該會看到下面的圖示:
這是因為機器需要認得 Flutter,所以點擊 Locate SDK 後,選剛剛解壓縮的 Flutter SDK 的資料下, 選擇 Bin 這個資料夾
步驟 2
打開資料夾底下的 pubspec.yaml 檔案, 加上 adobe_xd: ^0.1.3
( 最新的版本號請至 https://pub.dev/packages/adobe_xd )
很多 UI Designer 會不知道這裡在幹嘛,簡單說就是讓這個專案新增 adobe_xd 的 Library
步驟 3
一樣是在 pubspec.yaml 底下,將原本被註解掉的 assets 改成如下圖
並且要在專案底下新增一個 Folder 叫做 “ images ”
步驟 4
總算到了Adobe XD 啦(撒花
因為我不是 UI 設計師,所以這邊可能有些地方講的很不清楚,請見諒 QQ
- 這邊是要指定剛剛的 Flutter 專案的位置(github來的,不是SDK那喔)
- 圖片要存在哪(就是剛剛步驟3裡面新增的 Folder 名稱,這邊有點小小錯誤是,這張圖片應該是 images 而不是 assets/imags)
- 匯出的檔案,開頭會是什麼開頭 XD_xxxx.dart
- 將圖片匯出(會到剛剛設定好的Folder中)
- 將 Adobe Xd 設計好的 UI 轉成dart
如上面的圖看得出來,images 底下綠色的圖(backgound.png, image_.png)就是剛剛透過 adobe xd export 成功的。而下面有一些 XD_xxxxxxx.dart,這些呢就是匯出來的 UI元件。
設計師朋友卡關
流程簡單的就說到這了,再來就提一些我的 UI 朋友卡關的事情:
- 環境設定對他來說有點痛苦(我也覺得為什麼不是直接輸出到某個專案就好…還要先有 Flutter project 跟 pubspec.yaml才能用)是有點不友善
- 在匯出之前,要先確保所有的 Widget 都有給名字(如下圖)如果沒有給名字會造成匯出異常
3. 可能因為是 Early Access的關係,按下 Export All Widgets 會完全沒有反應,這就代表有設定錯誤了 (好歹來個提示訊息吧!)
以上就是今天測試 Adobe XD to Flutter 的流程心得囉~有問題可以問我唷!
後記
當 XD to Flutter 出來之後,從此之後 Mobile RD 就可以很開心的將 UI Export 檔案匯出直接套用了呢~(撒花
修~修旦幾類~事情沒有這麼簡單….先來看個圖
第一時間給我 UI 朋友看產出的圖馬上就被說 : 欸,右上角的 X 跑版了啊 !
然後再看一下 dart 中的寫法
這張圖只是要說一個重點:就是 XD to Flutter 轉出來的 widget 其實是不能直接套用的 !
他連寬高,offset 都是寫死的,這種方式在不同的手機絕對會跑版,通常我們 App 在做 UI 時,都是使用相對大小跟相對位置,然後也不會這樣包,所以目前的 XD to Flutter 匯出的檔案是不能直接用的。
不過,雖然有地方需要改,但是不代表不能用,有些設定可以由 Flutter工程師後續加工,而 widget 的一些設定,UI 設計好之後 RD 的確可以少一些功。比如說:
- 圖片用哪張圖片(這在產生好dart檔案他就會一起產生了)
- Text 的 Size、Color、Text 字樣等等一些 Widget 的設定
這些還是對 RD 很有用的功能。