Supernova, 一款将设计图生成 App UI辅助工具

Supernova

众所周知，一款移动端App的诞生，需要多方人员的配合。先要做出设计，之后写代码时若想高度还原设计还需要再花费许多人力。

生成App UI代码

一款旨在完美消除设计师与工程师之间鸿沟、大幅提高工作效率的移动端开发辅助工具。它可以帮助设计师将Sketch 和 Adobe XD 原型导出Flutter、iOS、Android、React Native代码，帮助工程师们大大减少花费在拼 UI 上的时间消耗。

可自动实现的功能：

• 将设计图层转化为 Flutter、iOS、Android、React Native 控件
• 生成控件的样式、对控件进行进一步设计
• 创建页面之间的关系链
• 全自动生成响应式布局
• 智能检测、自动切图，快速导出资源
• 创建基础动效、对动效进行细节调整
• 导出代码、资源、项目、字体、界面等项目所需文件

从 Sketch 到 Supernova

Supernova 不会按照 sketch 的方式来处理图层，而是会将设计稿转换成适用于App开发的基础内容模块——图片、文本以及视图，当然所有设计信息都会被保留。 不仅如此，它还会优化设计。比如移除冗余元素、修正颜色及透明度、创建或智能合并路径、导出图片资源、运用遮罩等等。总之，程序员们再也不会因为处理这类元素而烦躁到想砍人了!

原生控件 & 交互式预览

在大多数情况下，基本的开发模块还不够，我们需要更复杂的控件组来提供额外的功能，比如滚动、加载数据、点击事件等。Supernova 支持在各种控件组之间无缝切换，或是将多个控件和合并成诸如表格这类更复杂的元素。 为了使你所做的修改一目了然、也为了清晰地体现应用的运行状态，Supernova拥有独特的实时预览功能——当你完成编辑之后，只需要点击「Interactive」切换到交互式预览模式，就可以看到整个App实际展现给用户的面貌。在预览模式下，从组件、动效，到交互状态、响应式布局，全部都会得到展现。

Starlight—响应式布局的自动生成引擎

如今能够支持各种屏幕尺寸的响应式 App 已经是必须的基本要求了。 因此，我们已经为大家实现了自动布局功能。 Supernova 允许你使用与 Flutter、iOS、Android、React Native 一样的自动布局系统来实现布局，并且已经为你去除了最复杂的那部分工作——计算各种约束限制。我们会根据各种位置信息、外边距、控件类型、样式以及内容等等，自动为你计算好。 在你创建了按钮、表格之类的控件之后，只需点击「Solve screen」，自动布局就完成了。再切换到「Interactive」模式，就可以在各种尺寸的设备上预览了。

动效

制作优秀的动效是非常复杂的，单纯依靠人工操作把动效调至恰到好处更是一件几乎不可能的事情。为了使制作动效变得轻松、简单而愉悦，Supernova 提供了一套完善的动效引擎，它已经为你考虑好了一切，可以直接将设计转换成原生代码。 你可以在动效面板中实时预览你所创建的动效。可以手动设计或是直接使用预设模板，关键帧、弹性动效（spring animations）这些基本功能都包含在内。所有这些动效及其交互效果都会立即直观地展现在你面前。

页面关系链

Supernova 支持直观地以线条连接页面来表示页面之间的关系。 创建关系链时能够以按钮、表格、单元格、控件组等作为起点，连接至其他页面，或者你也可以先直接将页面连接起来，然后再去代码中做进一步调整。

如何加入 Supernova

如果您是 Supernova 的新手，请在 https://supernova.io 上下载它，目前仅支持Mac 系统，打开该应用程序，然后完成注册过程。

如果您已经是用户，请登录并更新到8.5版。

疫情期免费计划 近期由于 COVID-19 新型冠状病毒 引起的近期事件，Supernova 公司将免费开放 Supernova 的所有功能，直到 2020年6月1日。他们希望消除创建应用程序的所有限制，可能会增加构建工具以协助和应对这种前所未有的情况以及未来发展的可能性。Supernova 公司 还希望它减轻当前经济不确定性所造成的任何财务负担。

官方网站：https://supernova.studio/ 教程文档：https://supernova.io/learn