如何使用 ”XD to Flutter”來將設計好的 UI 匯出成 Dart

近期 Adobe XD 發表了一個 Plugin XD to Flutter，一在 FB 上面看到分享，立馬貼給 UI Designer 的朋友。 第一時間她也覺得有趣，開始研究了起來（然後就是諸多抱怨的開始，哈哈）覺得這要弄好多環境啊！要裝 VS Code 啊，要設定什麼什麼的，Balabala，我感覺到怒氣值逼近臨界點了！

一開始我也只是單純想說，不就是一個 Export 的 Button 點下去之後，就產出檔案，到底是難在哪啦？可是聽到她一直在抱怨，想說，那好吧，我做一次看看（不得不說，這流程不能簡單一點嗎，真的不是我想像那樣欸）所以才想寫下來，讓有需要用到或想玩的 UI 朋友們有個參考。

首先，有幾項是必備要準備的環境

1. Adobe XD： https://www.adobe.com/tw/products/xd.html
2. 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

圖片借用了現在最火紅的動森做示範，圖片版權歸任天堂所有

1. 這邊是要指定剛剛的 Flutter 專案的位置（github來的，不是SDK那喔）
2. 圖片要存在哪（就是剛剛步驟3裡面新增的 Folder 名稱，這邊有點小小錯誤是，這張圖片應該是 images 而不是 assets/imags）
3. 匯出的檔案，開頭會是什麼開頭 XD_xxxx.dart
4. 將圖片匯出（會到剛剛設定好的Folder中）
5. 將 Adobe Xd 設計好的 UI 轉成dart

如上面的圖看得出來，images 底下綠色的圖（backgound.png, image_.png）就是剛剛透過 adobe xd export 成功的。而下面有一些 XD_xxxxxxx.dart，這些呢就是匯出來的 UI元件。

設計師朋友卡關

流程簡單的就說到這了，再來就提一些我的 UI 朋友卡關的事情：

1. 環境設定對他來說有點痛苦（我也覺得為什麼不是直接輸出到某個專案就好…還要先有 Flutter project 跟 pubspec.yaml才能用）是有點不友善
2. 在匯出之前，要先確保所有的 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 很有用的功能。