所见即所得 —— Adobe XD 的 Flutter 插件

Author: Tim Sneath, Product Manager for Flutter and Dart, Google 文/ Tim Sneath, 谷歌 Flutter & Dart 产品经理

Our goal with Flutter is to provide a rich canvas for creative expression. With native performance on iOS and Android, full control over every pixel rendered on the screen, and the ability to iterate rapidly with stateful hot reload, we want to unleash the potential of designers and developers to build beautiful experiences that aren’t limited by artificial technical boundaries.

Flutter 希望成为任您挥洒创意的画布。凭借在 iOS 和 Android 上的原生性能体验、对屏幕上每个像素点的精确控制以及通过有状态热重载实现的快速迭代能力,我们希望释放设计师和开发者的潜力,打造不受技术限制的精美体验。

Last year at our Flutter Interact event, we turned the spotlight on creators who are using Flutter to explore and experiment. We heard from digital artists like Robert Felker, who uses Flutter to build ethereal forms with generative algorithms. We presented the work of creative agencies like gskinner, who created a series of innovative vignettes to demonstrate the potential of Flutter. And we saw a demonstration from Adobe of an early prototype of a plugin for Adobe XD that exports Flutter code directly from their tool.

在去年的 Flutter Interact 大会中,我们将焦点转向了那些使用 Flutter 进行探索和实验的创作者们。比如数字艺术家 Robert Felker,他使用 Flutter 通过生成算法 (generative algorithm) 构建了 空灵的视觉效果和形式。我们还介绍了来自 gskinner 等创意机构的作品,他们用一件件充满创意的作品,展示了 Flutter 在表现形式方面的无限可能。另外,我们也了解到 Adobe 在 Flutter 方面的投入: 他们展示了一款 Adobe XD 插件的早期原型,让大家可以直接从 XD 中导出 Flutter 代码。


△ Flutter 为创意提供了极富表现力的舞台,创造者可以尽情呈现优美、原生的体验,且不再受传统技术的束缚。(由 Flutter 绘制的生成艺术,Robert Felker 作品)

Today, we’re delighted to join Adobe in announcing that their XD to Flutter plugin is now available as early access for broader public testing. Adobe XD is a UI/UX design and collaboration tool that helps teams create and share designs for websites, apps, voice interfaces, games, and more. Part of Adobe’s class-leading Creative Cloud, XD allows designers to turn vector art, text, images, microinteractions, and animations into interactive prototypes that behave like working software products. The ability to export designs to Flutter further reduces the latency between creative ideas and product development, as an XD prototype can now become working Flutter code within minutes. Adobe XD supports design on Windows or macOS, and includes a free starter plan to get you up and running.

今天 我们很高兴和 Adobe 共同宣布,Adobe XD Flutter 导出插件现在正式开放早期体验 ,欢迎大家踊跃参与测试。Adobe XD 是一款 UI/UX 设计和协作工具,帮助团队创造和分享网站、应用、语音界面以及游戏等内容的设计方案。作为业界知名的 Adobe Creative Cloud 套件中的一员,XD 让创作者们可以将矢量绘图、文字、图像、小交互和动画资源共冶一炉,打造出可以交互的原型,来预览软件产品实际的运行效果。随着 Flutter 导出功能的加入,XD 原型现在可以在几分钟内转变成可用的 Flutter 代码,创意想法和产品开发的间隔被进一步缩短。Adobe XD 支持 Windows 和 macOS 系统,并且提供了免费的入门计划,方便大家快速上手。


△ 使用插件即可轻松从 Adobe XD 导出到 Flutter

Exporting Flutter code from Adobe XD

从 Adobe XD 中导出 Flutter 代码

Using the Flutter plugin in XD is straightforward. You can either export an individual drawing or component, or an artboard. Here’s how.

在 XD 中使用 Flutter 插件很简单。您可以导出一个单独的绘图对象或组件,也可以导出整个画板 (artboard)。具体做法如下:

Start by installing the Flutter exporter plugin. From Adobe XD, choose Plugins > Discover Plugins, and search for Flutter. Once you’ve installed it, you can display the UI Panel shown in the screenshot above by choosing Plugins > Flutter > UI Panel.

首先,安装 Flutter 导出插件。在 Adobe XD 中,选择 插件 > 发现插件 ( Plugins > Discover Plugins ),然后搜索 Flutter。安装完成后,选择 插件 > Flutter > UI 面板 ( Plugins > Flutter > UI Panel ),即可显示上图中的 UI 面板。

Now add the adobe_xd package to your Flutter project by including it in your pubspec.yaml app manifest. This package provides helper functions to minimize boilerplate in the generated XD code.

现在将 adobe_xd package 添加到您的 Flutter 项目中,只需将其包含在您的 pubspec.yaml 文件中即可。这个 package 提供了帮助函数,用来减少生成的 XD 代码中的样板代码。

To export a single element, simply select the individual widget you’d like to export to Flutter, and choose the *Copy Selected *button from the UI panel. This copies the relevant Dart code to your clipboard, which you can use as the basis for a stateless or stateful widget:

要导出单个元素,只需选择您想导出至 Flutter 的单个 widget,然后点击 UI 面板中的 复制所选项 ( Copy Selected ) 按钮。这会将元素对应的 Dart 代码复制到您的剪贴板中,您可以基于这些代码打造有状态或无状态的 widget:


△ 导出的代码可以整合进现有的项目中,而且更新时不需要调整其他文件

Another approach is to export the entire project. Assuming you’ve already got a Flutter app that you want to load the content into (including the adobe_xd package reference in pubspec.yaml), you can simply choose Plugins > Flutter > Export All Widgets from the UI panel, and set any additional configuration options you want.

另一种方法是导出整个项目。假设您已经有了一个 Flutter 应用,并且您想把内容添加到这个应用里 (包括 pubspec.yaml 中对 adobe_xd package 的引用),您只需从 UI 面板中选择 插件 > Flutter > 导出全部 Widget ( Plugins > Flutter > Export All Widgets ),然后设置想要的附加选项即可。

This creates a series of classes in the lib/ subdirectory of your project, which you can then use directly. You can continue to tweak the XD prototype and export again with ⇧⌘F (Ctrl+Shift+F on Windows) and, if you have enabled the Dart *Hot Reload on Save Watcher *setting in Visual Studio Code, your app automatically reloads with any updates when you re-export the widgets.

这个操作会在项目的 lib/ 子文件夹中创建一系列的类,您可以直接使用。您也可以继续调整 XD 原型,然后用 ⇧⌘F (在 Windows 上是 Ctrl+Shift+F) 再次导出,如果您在 Visual Studio Code 中打开了 Dart 的 “在 Save Watcher 上使用热重载” 选项,那么当您重新导出 widget 时,您的应用将自动重新加载它们。


△ 从 XD 快速转出代码的功能,使得从原型到应用之间的路径又多了一条

As an early access preview, there are of course some limitations, which are described in the release notes. One notable limitation is that responsive layout is not yet available, pending completion of a new XD API. But you’ll automatically get updates to the plugin as new features like this become available.

作为早期体验的预览版,这个插件现在也有一些限制,请阅读 发布说明 了解详情。值得注意的是,响应式布局目前还不能使用,尚需等待新的 XD API 完成。不过请放心,当这些新功能上线时,您会自动获得插件更新。

“At Adobe, we’re always looking to simplify the designer-to-developer workflow that pains so many teams designing and building apps. Today, we’re excited to release an early access preview of the work that’s come out of our partnership with Flutter to remove guesswork, accelerate decision making, and help teams bring new experiences to market faster.” - Vijay Vachani, Senior Director of Creative Cloud Platform & Ecosystem, Adobe

Adobe 致力于帮助那些设计和打造应用的团队,简化让他们颇为困扰的设计-开发流程。今天我们很高兴推出这个全新工具的早期体验版,它诞生自我们与 Flutter 的合作,旨在消除设计-开发流程中含糊的沟通环节,提高决策速度,便于团队更快地将新体验推向市场。 —— Vijay Vachani, Adobe Creative Cloud 平台与生态资深总监

请访问 Adobe 的 XD Flutter 导出插件页面 了解更多信息。我们期待看到您用它创建的作品!

原文:Announcing Adobe XD support for Flutter 中文发布:谷歌开发者公众号