所見即所得: Adobe XD 的 Flutter 插件

2020年05月15日 10:38 來源:谷歌開發者 作者:Flutter

作者 / Tim Sneath, Product Manager for Flutter and Dart, Google

Flutter 希望成為任您揮灑創意的畫布。憑借在 iOS 和 Android 上的原生性能體驗、對屏幕上每個像素點的精確控制以及通過有狀態熱重載實現的快速迭代能力,我們希望釋放設計師和開發者的潛力,打造不受技術限制的精美體驗。

 

 

在去年的 Flutter Interact 大會中,我們將焦點轉向了那些使用 Flutter 進行探索和實驗的創作者們。比如數字藝術家 Robert Felker,他使用 Flutter 通過生成算法 (generative algorithm) 構建了空靈的視覺效果和形式。我們還介紹了來自 gskinner 等創意機構的作品,他們用一件件充滿創意的作品,展示了 Flutter 在表現形式方面的無限可能。另外,我們也了解到 Adobe 在 Flutter 方面的投入: 他們展示了一款 Adobe XD 插件的早期原型,讓大家可以直接從 XD 中導出 Flutter 代碼。

  • Flutter Interact 大會https://www.youtube.com/watch?v=HjZxyTJzvYg&feature=emb_logo
  • Robert Felker 用生成算法在 Flutter 中生成藝術構型https://v.youku.com/v_show/id_XNDQ2ODg0OTYxMg==.html
  • gskinner 視覺探索作品集https://flutter.gskinner.com/
  • Flutter Interact: Adobe XD 插件的早期原型https://www.youtube.com/watch?v=ukLBCRBlIkk&feature=youtu.be&t=3652

△ Flutter 為創意提供了極富表現力的舞臺,創造者可以盡情呈現優美、原生的體驗,且不再受傳統技術的束縛。(由 Flutter 繪制的生成藝術,Robert Felker 作品)

今天我們很高興和 Adobe 共同宣布,Adobe XD Flutter 導出插件現在正式開放早期體驗,歡迎大家踴躍參與測試。Adobe XD 是一款 UI/UX 設計和協作工具,幫助團隊創造和分享網站、應用、語音界面以及游戲等內容的設計方案。作為業界知名的 Adobe Creative Cloud 套件中的一員,XD 讓創作者們可以將矢量繪圖、文字、圖像、小交互和動畫資源共冶一爐,打造出可以交互的原型,來預覽軟件產品實際的運行效果。隨著 Flutter 導出功能的加入,XD 原型現在可以在幾分鐘內轉變成可用的 Flutter 代碼,創意想法和產品開發的間隔被進一步縮短。Adobe XD 支持 Windows 和 macOS 系統,并且提供了免費的入門計劃,方便大家快速上手。

  • Adobe XDhttps://www.adobe.com/products/xd.html
  • Creative Cloudhttps://www.adobe.com/creativecloud.html
  • 免費的入門計劃https://www.adobe.com/products/xd/compare-plans.html

△ 使用插件即可輕松從 Adobe XD 導出到 Flutter

從 Adobe XD 中導出 Flutter 代碼

在 XD 中使用 Flutter 插件很簡單。您可以導出一個單獨的繪圖對象或組件,也可以導出整個畫板 (artboard)。具體做法如下:

首先,安裝 Flutter 導出插件。在 Adobe XD 中,選擇 插件 > 發現插件 (Plugins > Discover Plugins),然后搜索 Flutter。安裝完成后,選擇 插件 > Flutter > UI 面板 (Plugins > Flutter > UI Panel),即可顯示上圖中的 UI 面板。

現在將 adobe_xd package 添加到您的 Flutter 項目中,只需將其包含在您的 pubspec.yaml 文件中即可。這個 package 提供了幫助函數,用來減少生成的 XD 代碼中的樣板代碼。

  • adobe_xd packagehttps://pub.flutter-io.cn/packages/adobe_xd

要導出單個元素,只需選擇您想導出至 Flutter 的單個 widget,然后點擊 UI 面板中的 復制所選項 (Copy Selected) 按鈕。這會將元素對應的 Dart 代碼復制到您的剪貼板中,您可以基于這些代碼打造有狀態或無狀態的 widget:

△ 導出的代碼可以整合進現有的項目中,而且更新時不需要調整其他文件

另一種方法是導出整個項目。假設您已經有了一個 Flutter 應用,并且您想把內容添加到這個應用里 (包括 pubspec.yaml 中對 adobe_xd package 的引用),您只需從 UI 面板中選擇 插件 > Flutter > 導出全部 Widget (Plugins > Flutter > Export All Widgets),然后設置想要的附加選項即可。

這個操作會在項目的 lib/ 子文件夾中創建一系列的類,您可以直接使用。您也可以繼續調整 XD 原型,然后用 ??F (在 Windows 上是 Ctrl+Shift+F) 再次導出,如果您在 Visual Studio Code 中打開了 Dart 的 "在 Save Watcher 上使用熱重載" 選項,那么當您重新導出 widget 時,您的應用將自動重新加載它們。

  • 在 Save Watcher 上使用熱重載https://dartcode.org/docs/settings/#dartpreviewhotreloadonsavewatcher

△ 從 XD 快速轉出代碼的功能,使得從原型到應用之間的路徑又多了一條

作為早期體驗的預覽版,這個插件現在也有一些限制,請閱讀發布說明了解詳情。值得注意的是,響應式布局目前還不能使用,尚需等待新的 XD API 完成。不過請放心,當這些新功能上線時,您會自動獲得插件更新。

  • 發布說明https://github.com/AdobeXD/xd-to-flutter-plugin/blob/master/README.md#using-this-plugin

很高興能與 Adobe 完成這次合作。Adobe 對 Flutter 的支持讓我們十分激動,而全新的基于 JavaScript 的 API 更是讓所有人都可以更輕松地擴展 Adobe XD。對于這個新插件,Adobe 如此說道:

Adobe 致力于幫助那些設計和打造應用的團隊,簡化讓他們頗為困擾的設計-開發流程。今天我們很高興推出這個全新工具的早期體驗版,它誕生自我們與 Flutter 的合作,旨在消除設計-開發流程中含糊的溝通環節,提高決策速度,便于團隊更快地將新體驗推向市場。

—— Vijay Vachani, Adobe Creative Cloud 平臺與生態資深總監

  • 基于 JavaScript 的 APIhttps://adobexdplatform.com/plugin-docs/

請訪問 Adobe 的 XD Flutter 導出插件頁面了解更多信息。我們期待看到您用它創建的作品!

  • XD Flutter 導出插件https://github.com/AdobeXD/xd-to-flutter-plugin

推薦閱讀

 點擊屏末 | 閱讀原文 | 訪問 Flutter 開發者社區中文資源