概述
今天，我們來聊聊一個(gè)專門為“懶人程序員”準(zhǔn)備的工具——Adobe XD。使用它可以快速將原型設(shè)計(jì)圖轉(zhuǎn)換為可執(zhí)行的Flutter代碼， 而由于Flutter自身跨平臺(tái)的特性，因此這些自動(dòng)生成的代碼即可以用在Android、iOS這樣的移動(dòng)設(shè)備上，也可以用在Web頁中。
認(rèn)識(shí)Adobe XD
首先我們來看看Adobe XD是什么，以下內(nèi)容摘自百度百科：
Adobe XD是一站式UX/UI設(shè)計(jì)平臺(tái)，在這款產(chǎn)品上面用戶可以進(jìn)行移動(dòng)應(yīng)用和網(wǎng)頁設(shè)計(jì)與原型制作。同時(shí)它也是一款結(jié)合設(shè)計(jì)與建立原型功能，并同時(shí)提供工業(yè)級(jí)性能的跨平臺(tái)設(shè)計(jì)產(chǎn)品。設(shè)計(jì)師使用Adobe XD可以高效準(zhǔn)確的完成靜態(tài)編譯或者框架圖到交互原型的轉(zhuǎn)變。
簡而言之，這個(gè)軟件實(shí)際上就是一個(gè)原型圖設(shè)計(jì)工具。而又由于其背靠Adobe這座大山，因此它還可以與PhotoShop、Sketch、Illustrator……等工具兼容使用，非常方便。再加上今天我們介紹的重磅功能——自動(dòng)生成源代碼，這或許就是其在Axure、Sketch等軟件廣泛使用的今天依然能夠存活的原因之一。此外，它本身還是免費(fèi)的，只要登錄Adobe Creative Cloud賬戶即可免費(fèi)安裝并使用它。
Adobe XD軟件本身可以運(yùn)行在MacOS以及Windows平臺(tái)上，順便說一句：本篇文章的內(nèi)容我也以免費(fèi)視頻課的形式發(fā)布在B站上，喜歡看視頻的小伙伴不妨點(diǎn)擊鏈接跳轉(zhuǎn)到B站。
下面我們來看看Adobe XD的系統(tǒng)配置要求（摘自Adobe XD官方網(wǎng)站）：
Adobe XD還支持在移動(dòng)設(shè)備上運(yùn)行，其配置要求不再詳述，感興趣的朋友可以到其官方網(wǎng)站上了解詳情。
安裝Adobe XD，配置Flutter開發(fā)環(huán)境
這兩個(gè)步驟的詳細(xì)過程，不是本文討論的重點(diǎn)，這里不再贅述。我們的目標(biāo)是這兩個(gè)要在電腦中正常運(yùn)作，其判斷依據(jù)如下：
運(yùn)行正常的Adobe XD：
在開始菜單中點(diǎn)擊Adobe XD，首次運(yùn)行可能會(huì)出現(xiàn)登錄界面。按照提示登錄，成功后出現(xiàn)如下圖所示的界面，即表示其運(yùn)行正常：
接著，使用XDPacks安裝和管理插件。下載地址：https://xd.94xy.com/xdpacks.html。
安裝后啟動(dòng)XDPacks，按照提示登錄，安裝XD to Flutter插件。
配置正確的Flutter開發(fā)環(huán)境：
啟動(dòng)命令行，輸入
flutter doctor
出現(xiàn)如下圖類似的結(jié)果，即表示配置準(zhǔn)確無誤。
注意，雖然我們這里有感嘆號(hào)的警告信息，也有紅叉，但仔細(xì)看過后可以得知，這些都是無關(guān)緊要的。
開始繪制原型
下面我們就可以開始用XD繪制原型圖了，筆者這里畫一些極其簡單且沒有實(shí)際意義的圖形，目的僅作演示之用：
創(chuàng)建Flutter項(xiàng)目，自動(dòng)生成UI源碼
下面我們創(chuàng)建一個(gè)新的Flutter工程，命令為：
flutter create xxxx
其中，“xxxx”為項(xiàng)目名，在本例中為xd_to_flutter，因此，完整的命令為：
flutter create xd_to_flutter
稍等片刻，即可出現(xiàn)創(chuàng)建成功的結(jié)果。
使用Android Studio或VS Code打開項(xiàng)目中的pubspec.xml，添加adobe_xd插件。
dependencies:
adobe_xd: ^0.1.4
下面，打開剛才使用過的XD軟件，配置項(xiàng)目路徑，并輸出代碼。
如上圖所示，分別配置項(xiàng)目目錄、組件命名前綴以及輸出內(nèi)容。最后，點(diǎn)擊最下方的"Export All Widgets"，即可生成源碼。
使用生成的源碼運(yùn)行App
回到Android Studio或VS Code，可以看到已經(jīng)生成的dart源碼文件，我們在main()方法中使用它。
啟動(dòng)模擬器或連接真機(jī)，運(yùn)行后的效果如下圖所示：
可以看到，運(yùn)行結(jié)果與原型設(shè)計(jì)圖保持高度一致。
