所见即所得: Adobe XD 的 Flutter 插件
作者 / Tim Sneath, Product Manager for Flutter and Dart, Google
Flutter 希望成为任您挥洒创意的画布。凭借在 iOS 和 Android 上的原生性能体验、对屏幕上每个像素点的精确控制以及通过有状态热重载实现的快速迭代能力,我们希望释放设计师和开发者的潜力,打造不受技术限制的精美体验。
在去年的 Flutter Interact 大会中,我们将焦点转向了那些使用 Flutter 进行探索和实验的创作者们。比如数字艺术家 Robert Felker,他使用 Flutter 通过生成算法 (generative algorithm) 构建了空灵的视觉效果和形式。我们还介绍了来自 gskinner 等创意机构的作品,他们用一件件充满创意的作品,展示了 Flutter 在表现形式方面的无限可能。另外,我们也了解到 Adobe 在 Flutter 方面的投入: 他们展示了一款 Adobe XD 插件的早期原型,让大家可以直接从 XD 中导出 Flutter 代码。
Flutter Interact 大会
https://www.youtube.com/watch?v=HjZxyTJzvYg&feature=emb_logo
Robert Felker 用生成算法在 Flutter 中生成艺术构型
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 为创意提供了极富表现力的舞台,创造者可以尽情呈现优美、原生的体验,且不再受传统技术的束缚。(由 Flutter 绘制的生成艺术,Robert Felker 作品)
今天我们很高兴和 Adobe 共同宣布,Adobe XD Flutter 导出插件现在正式开放早期体验,欢迎大家踊跃参与测试。Adobe XD 是一款 UI/UX 设计和协作工具,帮助团队创造和分享网站、应用、语音界面以及游戏等内容的设计方案。作为业界知名的 Adobe Creative Cloud 套件中的一员,XD 让创作者们可以将矢量绘图、文字、图像、小交互和动画资源共冶一炉,打造出可以交互的原型,来预览软件产品实际的运行效果。随着 Flutter 导出功能的加入,XD 原型现在可以在几分钟内转变成可用的 Flutter 代码,创意想法和产品开发的间隔被进一步缩短。Adobe XD 支持 Windows 和 macOS 系统,并且提供了免费的入门计划,方便大家快速上手。
Adobe XD
https://www.adobe.com/products/xd.html
Creative Cloud
https://www.adobe.com/creativecloud.html
免费的入门计划
https://www.adobe.com/products/xd/compare-plans.html
△ 使用插件即可轻松从 Adobe XD 导出到 Flutter
从 Adobe XD 中导出 Flutter 代码
在 XD 中使用 Flutter 插件很简单。您可以导出一个单独的绘图对象或组件,也可以导出整个画板 (artboard)。具体做法如下:
首先,安装 Flutter 导出插件。在 Adobe XD 中,选择 插件 > 发现插件 (Plugins > Discover Plugins),然后搜索 Flutter。安装完成后,选择 插件 > Flutter > UI 面板 (Plugins > Flutter > UI Panel),即可显示上图中的 UI 面板。
现在将 adobe_xd package 添加到您的 Flutter 项目中,只需将其包含在您的 pubspec.yaml 文件中即可。这个 package 提供了帮助函数,用来减少生成的 XD 代码中的样板代码。
adobe_xd package
https://pub.flutter-io.cn/packages/adobe_xd
要导出单个元素,只需选择您想导出至 Flutter 的单个 widget,然后点击 UI 面板中的 复制所选项 (Copy Selected) 按钮。这会将元素对应的 Dart 代码复制到您的剪贴板中,您可以基于这些代码打造有状态或无状态的 widget:
△ 导出的代码可以整合进现有的项目中,而且更新时不需要调整其他文件
另一种方法是导出整个项目。假设您已经有了一个 Flutter 应用,并且您想把内容添加到这个应用里 (包括 pubspec.yaml 中对 adobe_xd package 的引用),您只需从 UI 面板中选择 插件 > Flutter > 导出全部 Widget (Plugins > Flutter > Export All Widgets),然后设置想要的附加选项即可。
这个操作会在项目的 lib/ 子文件夹中创建一系列的类,您可以直接使用。您也可以继续调整 XD 原型,然后用 ⇧⌘F (在 Windows 上是 Ctrl+Shift+F) 再次导出,如果您在 Visual Studio Code 中打开了 Dart 的 "在 Save Watcher 上使用热重载" 选项,那么当您重新导出 widget 时,您的应用将自动重新加载它们。
在 Save Watcher 上使用热重载
https://dartcode.org/docs/settings/#dartpreviewhotreloadonsavewatcher
△ 从 XD 快速转出代码的功能,使得从原型到应用之间的路径又多了一条
作为早期体验的预览版,这个插件现在也有一些限制,请阅读发布说明了解详情。值得注意的是,响应式布局目前还不能使用,尚需等待新的 XD API 完成。不过请放心,当这些新功能上线时,您会自动获得插件更新。
发布说明
https://github.com/AdobeXD/xd-to-flutter-plugin/blob/master/README.md#using-this-plugin
很高兴能与 Adobe 完成这次合作。Adobe 对 Flutter 的支持让我们十分激动,而全新的基于 JavaScript 的 API 更是让所有人都可以更轻松地扩展 Adobe XD。对于这个新插件,Adobe 如此说道:
Adobe 致力于帮助那些设计和打造应用的团队,简化让他们颇为困扰的设计-开发流程。今天我们很高兴推出这个全新工具的早期体验版,它诞生自我们与 Flutter 的合作,旨在消除设计-开发流程中含糊的沟通环节,提高决策速度,便于团队更快地将新体验推向市场。
—— Vijay Vachani, Adobe Creative Cloud 平台与生态资深总监
基于 JavaScript 的 API
https://adobexdplatform.com/plugin-docs/
请访问 Adobe 的 XD Flutter 导出插件页面了解更多信息。我们期待看到您用它创建的作品!
XD Flutter 导出插件
https://github.com/AdobeXD/xd-to-flutter-plugin
推荐阅读
点击屏末 | 阅读原文 | 访问 Flutter 开发者社区中文资源
所见即所得: Adobe XD 的 Flutter 插件相关推荐
- 这对CP我磕了!Adobe XD与Flutter插件官宣了……
全文共1612字,预计学习时长7分钟 图源:YouTube Flutter是创意表达丰富多彩的画布:一个不受传统技术限制,为美和自然体验而生的工具箱.喜欢创意表达的人通常都很爱Flutter,它能为你 ...
- Adobe XD无法下载插件解决办法
今天自己下载配置了XD,发现插件无法下载.应该怎么下载呢?下面给出解决办法:换成美国的账号. 具体操作如下! 点击帮助-->选择注销 注销需要稍等一会儿 点击右下角"注销"按 ...
- xd生成html,7款Adobe XD必备插件
Adobe XD作为一款跨平台的交互制作工具,且随着功能的不断完善,越来越受到交互设计师们的追捧.去年10月份Adobe XD首次支持第三方插件功能,更使Adobe XD成为了包括Sketch在内的一 ...
- Adobe xd的实时预览插件在哪里?
今天跟大家分享一个我最近都在学习和用的软件:Adobe XD 跟大家讲一下这个软件吧!简介:Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作.同时它也 ...
- Adobe XD 好用的插件我推荐这 10 个!
Adobe XD 好用的插件我推荐这 10 个, Adobe XD 的插件非常多,但是最常使用且高频的大概是这几个插件,基本上都是快速达到某些功能和效果的效果型插件,让你你的设计效率蹭蹭提升,快来看看 ...
- 支持Adobe xd的实时预览插件-标记狮
如果你是刚入门的UI设计师,Adobe xd是一款免费安装的本地UI设计软件,免费安装入口教程: Adobe XD 官方正版及插件下载方法-常见问题-标记狮社区-UI设计免费素材资源UI教程分享平台 ...
- Adobe XD有哪些好用的插件?
Adobe XD是专门为UI/UX设计打造的协作式设计工具,可完美融合Adobe家的其他产品.与仅专注于MacOS的Sketch不同,Adobe XD支持多系统,这种灵活性使Adobe XD在原型设计 ...
- Adobe XD 连不上网用不了插件的解决办法
安装了xd想用插件发现,提示"请先链接网络",只要注册一个所在地在美国的账号即可联网成功,操作如下: 1.依次点击菜单栏帮助 - 登录 2.点击创建账户 3.输入邮箱和密码(邮箱可 ...
- adobexd怎么录屏_请问如何使用Adobe XD制作应用动效?
最近XD更新了一个大版本,前阵子偶然用用发现有很多有趣的新交互功能,整理了下发出来!可以先预览它最后的效果: 放一下录制的讲解视频:超人的电话亭公开课 - XD高级交互动画详解www.bilibil ...
- figma设计_Figma与Adobe XD:我们如何选择下一个设计工具
figma设计 The time came for changes and our design team started raising the topic again about how we s ...
最新文章
- Python基础03-运算符
- 在本机用Toad远程连接Oracle数据库
- Vue路由开启keep-alive缓存页面
- swagger内部类_API管理工具Swagger介绍及Springfox原理分析
- java读取.properties文件及解决中文乱码问题
- vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全
- 玩转CAD格式,CAD转PDF,CAD转DWF,只需四个步骤高效完成
- 和秋叶一起学PPT之绘制表格(课时七)
- 时空行为检测数据集 JHMDB UCF101_24 详解
- 高等代数---欧几里得空间
- 经验总结1—数据核对
- 深度学习细颗粒图像分析综述
- 如何在CentOS 7上安装指定版本的PHP
- luoguP1903 [国家集训队]数颜色 / 维护队列
- Remote table-valued function calls are not allowed.
- 液晶LCD1602驱动代码
- python爬虫遇到验证码、输入验证码后提醒验证码错误_爬虫遇到头疼的验证码?Python实战讲解弹窗处理和验证码识别...
- 鼎新图书馆结束使用计算机时,新生导航•【学习篇】| 学霸从图书馆开始
- 阿里云服务器支持IPV6和CND的详细教程
- 网络管理员资料 网络命令行的使用和范例
热门文章
- 全国移动联通电信基站数据(2014年5月更新升级包)
- 数的读法(详解) 蓝桥杯java
- 主案设计单签单额提成区间 DesignAmountScopeSet.js (添加区间段,并且可以存在无限大)
- zookeeper-3.4.14安装部署详细
- 视频压缩与编解码的基本原理
- 计算机辅助管理试卷和答案,专科《计算机辅助管理》-试卷-答案.doc
- 【逐云】阿里巴巴通用计算平台负责人关涛:让计算平台成为阿里的“水电煤”
- 如何去除饥饿感又不会增肥
- 如鹏网学习笔记(十五)ASP.NET MVC核心基础笔记
- 程序生活 - 减肥小记