xd插件怎么安装（这对CP我磕了AdobeXD与Flutter插件官宣了）

全文共1612字，预计学习时长7分钟

图源：YouTube

Flutter是创意表达丰富多彩的画布：一个不受传统技术限制，为美和自然体验而生的工具箱。喜欢创意表达的人通常都很爱Flutter，它能为你的想象力提供丰富的空间。

借助iOS和Android系统的本机性能、对屏幕上渲染的每个像素的完全控制、和有状态热重载以进行快速迭代的能力，设计师和开发人员的潜力被极大地释放出来，可以肆意创造不受人工技术界限束缚的美好体验。

在去年的FlutterInteract活动中，关注点逐渐转向了那些使用Flutter进行探索和试验的创造者，比如罗伯特·费尔克这样的数字艺术家，用Flutter和生成算法构建了艺术的虚拟形式。

活动也展示了像gskinner这样的创意机构的作品，他们其打造了一系列诠释Flutter潜力的创意短片。此外，Adobe还展示了Adobe XD的早期插件原型，能直接从其工具中导出Flutter代码。

不久前，Flutter与Adobe官宣了：为了更广泛的公测，AdobeXD的Flutter插件从现在起，开放早期体验。

AdobeXD 是一款用户界面/用户体验（UI/UX）设计和协作工具，帮助团队创造和分享对于网站、应用、语音界面、游戏等的设计。作为Adobe同类领先的创意云的一部分，XD允许设计师将矢量艺术、文本、图像、微交互和动画转换为交互原型，其运行方式类似于软件产品。

Flutter导出设计的功能进一步缩短了在创造性想法与产品开发之间的延迟时间，XD的原型模块现在能够在几分钟内运行Flutter代码。

AdobeXD支持在Windows或macOS系统上进行设计，且附上了一份免费新手指南来辅助运行和使用。（https://www.adobe.com/products/xd/compare-plans.html）

只需一个插件，Adobe XD就能导出Flutter代码

如何从AdobeXD中导出Flutter代码

在XD中使用Flutter插件是很直接的方法。该方法既可导出个别绘图或组件，也可导出画板。具体该怎么做呢？

首先，安装Flutter导出插件。在Adobe XD中，选择Plugins（插件）>DiscoverPlugins（发现插件）选项，搜索Flutter。

安装完毕后，选择Plugins> Flutter > UI Panel选项，显示如上屏幕截图中展示的UIPanel（用户界面面板）。

接着，通过将adobe_xd 软件包收录在pubspec.yaml 应用清单中，将其添加到Flutter项目中。该软件包提供了辅助功能，以最大程度减少生成的XD代码中的样板文件。

为导出单个元素，只需选择想导出到Flutter的单个部件，并从用户界面面板选择 CopySelected（复制所选）按钮即可。这会将相关的Dart代码复制到剪贴板中，并可以将其用作无状态或有状态小部件的基础：

导出的代码可被集成到现有项目中，无需重新处理其他文件即可更新

另一种导出Flutter代码的方式是导出整个项目。假设已有想要将内容载入其中的Flutter应用（包括在pubspec.yaml中添加 adobe_xd 软件包），那么只需点击用户界面面板中的Plugins> Flutter > Export All Widgets （导出所有部件）选项，并设置任意的所需附加配置选择。

这将在项目的lib /子目录中创建一系列类别，这些类别可在之后被直接使用。可以继续微调XD原型，然后按Ctrl Shift F再次导出。如果在Visual Studio Code中启用了SaveWatcher 上的Dart热重载设置，则当重新导出部件时，应用会自动重载更新。

从XD到代码的快速转换周期提供了一种将原型转化为应用的新方式

在早期体验阶段，自然会有一些限制条款。其中一项值得注意：在新的XD应用程序编程接口完成前，响应布局尚不可用。但当此类新功能可用时，该插件将被自动更新。

这是一次很棒的合作。Flutter与Adobe联合起来， Flutter能够得到Adobe的支持，且基于JavaScript的全新应用程序编程接口使每个人都能轻松拓展AdobeXD。

Adobe创意云平台和生态系统高级总监维杰·瓦查尼这样评价这个新插件：

“在Adobe上，我们一直在探寻如何简化从设计师到开发人员的工作流程，这个流程使很多设计和构建应用程序团队感到痛苦。今天，我们很高兴发布与Flutter合作完成的早期体验成果，以打消猜测，加快决策制定流程，并帮助团队更快地将全新体验推向市场。”

图源：unsplash

今后，你可以Adobe XD用做出更多富有想象力的创造。这样的合作，真的越多越好。

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范