这对CP我磕了！Adobe XD与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学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”
（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）
这对CP我磕了！Adobe XD与Flutter插件官宣了……相关推荐
- Adobe XD无法下载插件解决办法
今天自己下载配置了XD,发现插件无法下载.应该怎么下载呢?下面给出解决办法:换成美国的账号. 具体操作如下! 点击帮助-->选择注销 注销需要稍等一会儿 点击右下角"注销"按 ...
- adobexd怎么录屏_请问如何使用Adobe XD制作应用动效？
最近XD更新了一个大版本,前阵子偶然用用发现有很多有趣的新交互功能,整理了下发出来!可以先预览它最后的效果: 放一下录制的讲解视频:超人的电话亭公开课 - XD高级交互动画详解www.bilibil ...
- ios 刷新遮罩遮罩_在Adobe XD中进行遮罩的3种方法
ios 刷新遮罩遮罩 Are you new to Adobe XD? Or maybe you're just stuck on how to create a simple mask? Here ...
- figma设计_Figma与Adobe XD：我们如何选择下一个设计工具
figma设计 The time came for changes and our design team started raising the topic again about how we s ...
- xd可以用ui动效效果吗_通过动画使UI设计栩栩如生：Adobe XD和After Effects
xd可以用ui动效效果吗 Note - If you don't fancy splashing out on an Adobe license, you can trial their produc ...
- sketch钢笔工具_设计工具（Sketch，Adobe XD，Figma和InVision Studio）中奇怪的一项功能
sketch钢笔工具 When you build a new product that is very similar to the existing products in the market, ...
- Android 页面布局xd,Adobe XD强大的布局系列工具 助你事半功倍
数字设计有多种形式-从移动端.桌面网站到显示屏应用程序.智能助手.车载娱乐系统(例如CarPlay和Android Auto)等等.为当今的应用程序打造数字体验意味着需要针对各种屏幕尺寸.布局和交互类 ...
- UI设计工具比较：Sketch、Adobe XD、墨刀、Mockplus、Axure RP
UI设计工具,分为2个派系. 其中,最大.最主流的派系,是Sketch.Adobe XD.墨刀这个派系. 这个派系的软件,操作方式.思路都非常接近,连常用快捷键都一样,会一个就等于都会了. 在一个无限 ...
- 网络中pkt是什么意思_网络流行语Cp、磕么？是什么意思？
早上看新闻,看到一篇王建国 CP一炒变废为宝--后面还问了一句"磕么?",这一串网络语言算是彻底给我整蒙了,我这个不算太老,接近90后的本科毕业生,反复思量了好久未果后,只能原文复 ...
最新文章
- Codeforces Round #562 (Div. 2) B. Pairs
- AtomicLong可以被原子地读取和写入的底层long值的操作
- securecrt切换会话(session)的显示方式
- 【自动驾驶】25.激光雷达 标定 相机
- JDK、Spring、Dubbo SPI 原理介绍
- java线程等待都完成_Java等待线程完成
- php绝对路径与相对路径之间关系的的深入研究
- 一分钟学会python编程_用Python教你一分钟检验出来！不用群发_编程语言_Python课程_Python教程_课课家...
- RedHat系列软件管理(第二版) --源码包安装
- Opencv透视变换——cv::getPerspectiveTransform()与cv::warpPerspective()详解
- Elasticsearch的javaAPI之get,delete,bulk
- 「Linux」Linux下根据CET听力文件关键字和lcr时间对mp3进行剪辑分割
- 什么是分布式垃圾回收(dgc)?它是如何工作的?_激荡60年——垃圾回收与Go的选择...
- 使用PInvoke.NET插件为托管代码添加Win32 API签名
- jquery $.post 超时_详解如何实现前端jquery中的ajax方法，看这一篇就够了
- android实现标题栏弹框,Android：Dialog对话框、Builder、showDialog、模板方法设计模式...
- java编程之美(一)
- 51单片机电路原理图_51单片机入门（第1篇）：纯干货，单片机最小系统
- reg文件编写方法整理
- 理解无线电波极化与天线极化