官宣！Adobe XD to Flutter终于来了

Posted 2021-04-29 XD资源库

在去年的 Flutter Interact 活动上，Adobe官方演示了一个插件的早期原型，可以让你在 Adobe XD 中设计的内容，通过插件生成用于使用 Flutter 创建应用程序的代码，可以在短短几分钟内将设计变为真正的产品。当时我们也进行了分享：

今早，Adobe 与 Flutter 共同宣布，XD to Flutter 早期版已发布，在内置插件管理器和第三方插件管理器 中均可搜索“Flutter”安装使用。Adobe XD 支持在 Windows 和 macOS 上免费使用，设计人员可以轻松完成包含矢量、文本、图像、微交互、自动动画、语音等内容的交互式原型。通过 XD to Flutter 又能进一步减少设计创意与产品开发之前的等待时间，短短几分钟让设计直接生成 Flutter 代码。

从 XD 导出到 Flutter 非常简单，可以导出单个图形或组件也能导出整个画板，安装完 XD to Flutter Plugin 插件之后，通过该插件的“UI Panel”字菜单可以显示屏幕快照。

另外 Flutter 提供了一个 Adobe XD 代码包，通过链接 https://pub.dev/packages/adobe_xd 可以下载，将该包包含 ubspec.yaml 应用清单中，添加到 Flutter 项目中使用，可以极大减少工作量。

需要导出单个元素或组件，只需要在 XD 中选中单个组件，在 UI Panel 中点击“Copy Selected”按钮即可将 Dart 代码复制到剪贴板，在 Flutter 项目中使用。

另一种方法是导出整个项目。假设已经有一个 Flutter 应用程序想要将内容加载到其中（包括中的adobe_xd包引用pubspec.yaml），则只需从插件面板中选择Flutter插件的Export All Widgets 菜单，然后设置所需的任何其他配置选项。

这将在lib/项目的子目录中创建一系列类，然后可以直接使用它们。也可以继续调整XD原型，然后使用⇧⌘F（在Windows上为Ctrl + Shift + F）再次导出，并且，如果在Visual Studio Code中启用了“保存监视程序上的Dart 热重载”设置，则应用会自动重载所有更新当您重新导出窗口小部件时。

该项目已在 Github 开源，当前，这还是一个早期版本，目前还存在一些限制，可以在 https://github.com/AdobeXD/xd-to-flutter-plugin 查看详细信息。

如果没有安装VS Code，建议先安装并安装 Flutter/Dart 扩展： https://flutter.dev/docs/get-started/editor?tab=vscode

如果从未使用过Flutter，建议通过创建一个入门应用程序来熟悉一下： https://flutter.dev/docs/get-started/codelab

---

• 
  
• 
  
•