XD to Flutter 設計圖轉程式碼 初體驗

浪裡小白龍孑遺發表於2021-05-13
Flutter

背景

谷歌公眾號今天介紹了 XD to Flutter 2.0, 可以將設計圖直接轉換成 Flutter 程式碼, 詳細請看 XD to Flutter 2.0 現已釋出！

image.png

設計圖轉程式碼早已經不是新鮮的事情, 國內美團阿里等也對設計圖轉程式碼做了一些研究:

美團 設計稿（UI檢視）自動生成程式碼方案的探索

阿里 重磅系列文章！UI2CODE智慧生成Flutter程式碼——整體設計篇

今天我就試一下 gskinner 團隊的 XD to Flutter

準備工作

  1. 下載 XD: www.adobe.com/cn/products… (XD 是收費軟體, 可以暫時下載試用)

  2. 安裝好 XD 後, 開啟軟體, 在 選單欄 - 外掛 中搜尋: Flutter 然後下載安裝 XD to Flutter, (注意直接搜尋 XD to Flutter 是搜尋不了的, 這點開篇的公眾號文中已經說明)

  3. 準備好 XD 檔案, XD 檔案大家可以找設計師要一個, 或者通過 xdfile.com/ 下載一個

  4. flutter 專案安裝外掛:

dependencies:
  adobe_xd: ^1.0.0
複製程式碼

空安全使用 2.0.0, 詳見: github.com/AdobeXD/xd-…

開始生成

點選選單 外掛 - XD to Flutter, 可以開啟外掛:

image.png

點選左下角的 Exprot All Widgets , 就會自動將所有的設計稿轉換成 dart 檔案:

image.png

這裡還有其他的選項, 比如可以指定專案的位置, 生成程式碼的目錄, 以及是否空安全等等.

到了這一步程式碼已經完全生成了, 我們看怎麼使用程式碼.

使用

專案中看生成之後的檔案, 其中 XD 開頭都是生成之後:

image.png

隨便開啟一個檔案:

image.png

發現widget 檔案都是通過一個叫 Pinned 來進行佈局的, 這個類就是我們在準備工作中新增的 adobe_xd 裡的.

圖片

關於設計圖中要用到的圖片, 發現 XD to Flutter 並沒有自動匯出圖片的功能, 預設的 Image 都是空的, 但是有提示你需要新增什麼圖片資源, 這點很不方面:

//其中一個圖片
Pinned.fromPins(
  Pin(size: 216.0, start: 0.0),
  Pin(size: 123.0, end: 24.0),
  child:
      // Adobe XD layer: 'imgbin_vegetarian-c…' (shape)
      Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: const AssetImage(''),
        fit: BoxFit.fill,
      ),
    ),
  ),
),

複製程式碼

也有可能是我的使用姿勢不對, 不知道有沒有同學知道應該怎麼自動關聯圖片, 我們手動補全了幾個圖片引用.

到了這一步已經完畢了, 執行一下看一下效果

效果

設計圖

image.png

Android 小米 10 青春版

image.png

iOS iPhone 12Pro Max 模擬器

image.png

Web Chrome

image.png

可以看到整體的樣式還原度都挺高的, 在各個端上目前表現還是不錯的.

總結

看了一下其程式碼, 主要是通過 Pinned 和 Pin 來佈局進行定位和描述大小, 再通過 Flutter 自帶的控制元件描述其他. 整體的體驗不錯, 還原度也很高.

不過直接生成的程式碼還不能使用, 需要手動修改圖片, 這點, github 中也提到了, 為了優化匯出, 所以不支援直接匯出圖片:

In order to optimize export, images are not exported with widgets. Only images with a name assigned in the plugin panel can be exported. Select an image and click "Export Image", or use the "Export All Images" button to export all images with a name to the Image Path.
複製程式碼

美團和鹹魚的兩個自動生成程式碼方案, 看其文章介紹, 都重點提及了生成過程的演算法和原理, 以及配合 AI 機器學習, 但是目前都沒有開源.

XD to Flutter 目前也只支援 XD, 我們可以借鑑其思想, 支援 Sketch, PS 等等其他設計軟體.

程式碼倉庫

github.com/siyehua/xd_…

參考資料

外掛官網

XD to Flutter 2.0 現已釋出！

美團 設計稿（UI檢視）自動生成程式碼方案的探索

阿里 重磅系列文章！UI2CODE智慧生成Flutter程式碼——整體設計篇

相關文章