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

2020年05月15日 10:38 來源：谷歌開發(fā)者 作者：Flutter

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

Flutter 希望成為任您揮灑創(chuàng)意的畫布。憑借在 iOS 和 Android 上的原生性能體驗(yàn)、對屏幕上每個像素點(diǎn)的精確控制以及通過有狀態(tài)熱重載實(shí)現(xiàn)的快速迭代能力，我們希望釋放設(shè)計(jì)師和開發(fā)者的潛力，打造不受技術(shù)限制的精美體驗(yàn)。

?

?

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

  • Flutter Interact 大會https://www.youtube.com/watch?v=HjZxyTJzvYg&feature=emb_logo
  • Robert Felker 用生成算法在 Flutter 中生成藝術(shù)構(gòu)型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 為創(chuàng)意提供了極富表現(xiàn)力的舞臺，創(chuàng)造者可以盡情呈現(xiàn)優(yōu)美、原生的體驗(yàn)，且不再受傳統(tǒng)技術(shù)的束縛。(由 Flutter 繪制的生成藝術(shù)，Robert Felker 作品)

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

  • Adobe XDhttps://www.adobe.com/products/xd.html
  • Creative Cloudhttps://www.adobe.com/creativecloud.html
  • 免費(fèi)的入門計(jì)劃https://www.adobe.com/products/xd/compare-plans.html

△ 使用插件即可輕松從 Adobe XD 導(dǎo)出到 Flutter

從 Adobe XD 中導(dǎo)出 Flutter 代碼

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

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

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

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

要導(dǎo)出單個元素，只需選擇您想導(dǎo)出至 Flutter 的單個 widget，然后點(diǎn)擊 UI 面板中的 復(fù)制所選項(xiàng) (Copy Selected) 按鈕。這會將元素對應(yīng)的 Dart 代碼復(fù)制到您的剪貼板中，您可以基于這些代碼打造有狀態(tài)或無狀態(tài)的 widget:

△ 導(dǎo)出的代碼可以整合進(jìn)現(xiàn)有的項(xiàng)目中，而且更新時不需要調(diào)整其他文件

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

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

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

△ 從 XD 快速轉(zhuǎn)出代碼的功能，使得從原型到應(yīng)用之間的路徑又多了一條

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

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

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

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

—— Vijay Vachani, Adobe Creative Cloud 平臺與生態(tài)資深總監(jiān)

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

請?jiān)L問 Adobe 的 XD Flutter 導(dǎo)出插件頁面了解更多信息。我們期待看到您用它創(chuàng)建的作品！

  • XD Flutter 導(dǎo)出插件https://github.com/AdobeXD/xd-to-flutter-plugin

推薦閱讀

?點(diǎn)擊屏末?|?閱讀原文?|?訪問 Flutter 開發(fā)者社區(qū)中文資源

本文經(jīng)授權(quán)發(fā)布，不代表51LA立場，如若轉(zhuǎn)載請聯(lián)系原作者。

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

來源：谷歌開發(fā)者 作者：Flutter
2020年05月15日 10:38

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

Flutter 希望成為任您揮灑創(chuàng)意的畫布。憑借在 iOS 和 Android 上的原生性能體驗(yàn)、對屏幕上每個像素點(diǎn)的精確控制以及通過有狀態(tài)熱重載實(shí)現(xiàn)的快速迭代能力，我們希望釋放設(shè)計(jì)師和開發(fā)者的潛力，打造不受技術(shù)限制的精美體驗(yàn)。

?

?

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

  • Flutter Interact 大會https://www.youtube.com/watch?v=HjZxyTJzvYg&feature=emb_logo
  • Robert Felker 用生成算法在 Flutter 中生成藝術(shù)構(gòu)型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 為創(chuàng)意提供了極富表現(xiàn)力的舞臺，創(chuàng)造者可以盡情呈現(xiàn)優(yōu)美、原生的體驗(yàn)，且不再受傳統(tǒng)技術(shù)的束縛。(由 Flutter 繪制的生成藝術(shù)，Robert Felker 作品)

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

  • Adobe XDhttps://www.adobe.com/products/xd.html
  • Creative Cloudhttps://www.adobe.com/creativecloud.html
  • 免費(fèi)的入門計(jì)劃https://www.adobe.com/products/xd/compare-plans.html

△ 使用插件即可輕松從 Adobe XD 導(dǎo)出到 Flutter

從 Adobe XD 中導(dǎo)出 Flutter 代碼

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

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

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

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

要導(dǎo)出單個元素，只需選擇您想導(dǎo)出至 Flutter 的單個 widget，然后點(diǎn)擊 UI 面板中的 復(fù)制所選項(xiàng) (Copy Selected) 按鈕。這會將元素對應(yīng)的 Dart 代碼復(fù)制到您的剪貼板中，您可以基于這些代碼打造有狀態(tài)或無狀態(tài)的 widget:

△ 導(dǎo)出的代碼可以整合進(jìn)現(xiàn)有的項(xiàng)目中，而且更新時不需要調(diào)整其他文件

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

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

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

△ 從 XD 快速轉(zhuǎn)出代碼的功能，使得從原型到應(yīng)用之間的路徑又多了一條

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

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

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

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

—— Vijay Vachani, Adobe Creative Cloud 平臺與生態(tài)資深總監(jiān)

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

請?jiān)L問 Adobe 的 XD Flutter 導(dǎo)出插件頁面了解更多信息。我們期待看到您用它創(chuàng)建的作品！

  • XD Flutter 導(dǎo)出插件https://github.com/AdobeXD/xd-to-flutter-plugin

推薦閱讀

?點(diǎn)擊屏末?|?閱讀原文?|?訪問 Flutter 開發(fā)者社區(qū)中文資源

本文經(jīng)授權(quán)發(fā)布，不代表51LA立場，如若轉(zhuǎn)載請聯(lián)系原作者。