开源的安卓和iOS应用开发框架Flutter是由谷歌创建的，Flutter的第一个稳定版本于2018年12月发布。
Flutter是一个开源项目，旨在实现快速、简单的编程，具有类似原生的性能。此外，为了取代JavaScript，Flutter使用Dart。
而现在，网络版的Flutter已经发布，并且是稳定的。这对网页设计师来说是个好消息，他们现在可以构建高度安全和吸引人的网站，此外还可以使用相同的代码库将Flutter移动应用发布到网络上。
除此之外，Flutter还是一个动态用户界面元素的设计框架--其用户界面的丰富性和互动性使其适合在线应用。
Supernova简介
Flutter在2019年为那些准备使用Flutter平台提供的网络功能进行创作的企业推出了一个早期采用者计划。Flutter引起了其中一个早期采用者的注意，Supernova想用它来创建一个网络的协作设计系统平台。
设计系统
测试代码和选择一个具有基本功能的吸引人的设计是一项协作工作。
设计师们使用生动的颜色、图案和基本工具制作工具和组件设计。众多的升级最终揭示了最终的结果。因此，设计系统是不断发展的。
众多的设计现在与许多平台上的顶级软件兼容。这些设计需要端到端的加密。
各种各样的组件和工具有助于产品的创造和发展，因此，设计师们总是在完善策略，使安全加密易于使用。
理念和构建模块
Supernova可以让你快速、轻松地获得关于任何输出设计中的任何设计系统的全面、有组织的信息。
在访问数据设计系统的模型中描述了一个活动的设计系统。这意味着你可以运行导出器并产生一组输出，然后打开另一个设计系统并产生一组完全不同的输出--所有这些仍然利用同一个导出器。
你可以通过预定义的函数访问设计系统中的数据，这些函数抽象了与数据下载和解决有关的任何复杂性。
在撰写本报告时，有以下的模型件。此外，每个类别都有一个全面的获取设计系统数据的策略列表。
- 设计令牌。一个底层对象，是对象类型的基础，如
Color,Font,Gradient,Shadow,Border,Measure,Typography,Text, 等 - 代币组。
colors,fonts,gradients或任何此类设计标记的逻辑组。每个令牌组总是只持有一个相应的令牌。 - 设计系统。一个持有关于一个特定设计系统的元数据的对象。
- 设计系统版本。每个设计系统由一个或多个版本组成，当你运行一个特定的导出器时，你总是以一个版本为目标。版本对象使你能够访问关于特定版本的元信息；例如其语义标签、名称、甚至完整的发布说明。
超新星如何工作
超新星的设计是基于两个基本原则；个人编码和定制设计。
这两个团队各不相同，独立运作。下面是关于Supernova系统如何工作的解释。
产品团队
这个团队使用Figma的设计方法创造出引人注目的元素。Figma 设计工具结合了所有设计风格。
生成的设计是一个独特的编码转换器。该程序是安全的、加密的、无法复制的。他们对设计进行升级，增加了自动化选项。
数据是自动更新和同步的。该系统是为了使用钩子自动更新新版本。单独的代码用于导出设计令牌。它避免了缺陷，并为许多设计平台生产出口商。
风格、资产和不同自动化引擎的设计由独特的代码来管理。
设计团队
现在代码已经完成，设计阶段开始了。Supernova设计系统文件使用许多工具和组件产生和打破设计。
像代码一样，设计是抽象的。超新星的配色方案使用独特而生动的色调。
关键特征
由于Supernova的设计系统，每个部门都可以使用自己的技术。为了给每个团队提供发挥创造力和使用全部技术的机会，它将整个开发工作结合在一个界面上。
让我们来看看各团队之间的一些区别。
设计师专用
- 通过它的同步性，与Figma的整合可以保持代币、字体和样式的设计
- 代币参考包含许多不同的代币，每个代币都有独立的名称和用途
- 代币运输的自动化技术与差异化技术相结合，可以实现代币的进口和再进口
- 导入的时间是变化的；设计工具扩展改变了导入和再导入操作的时间
- 字体定制包括来自谷歌字体的可变令牌、来自Figma的令牌、测试令牌和测量符号，以及未设计的时间令牌
开发者专用
- 系统指定将用于将设计数据转换为代码的代码生成过程
- 有效的代码集成确保每个设计元素都有自己的一套编码基本原理
- 为不同的平台分发大量的代码库；可以为多个平台提供编码技能
- 脉冲星为各种编程语言及其模板提供了专门的输出包
- 风格和字典专家，Supernova Flutter导出器从设计系统中发送数据，可改变风格和字典设置
维护者专用
- 用团队管理来管理团队的角色和责任很简单
- 版本管理是为文件的每个修改版本建立快照以及新版本的过程
- 观看或访问设计系统不需要任何费用，因为浏览量是无限的
- 创建发行说明涉及更新设计系统的信息，以及通过使用创造性的发行说明来更新信息。
Supernova是如何与Flutter Web一起使用的？
根据用户的反馈，Supernova的网络版是根据用户对MacOS替代品的要求而建立的。
因此，该团队对Flutter很感兴趣，因为它可以让他们使用一个代码库在多个平台上部署他们的工具--特别是考虑到他们的工具比绝大多数网站更多的是计算密集型，对性能的要求更严格。
Flutter提供了一种直接的手段来获得低层渲染引擎，而不是从WebGL开始，然后再从那里开始努力。
Supernova如何帮助Flutter Web
使用Dart的网络专用库可以节省他们的时间，因为代码预览小工具不能包含在HTML中；开发人员必须使用一个JavaScript库来突出语法。
Supernova完全是用Flutter和Dart编写的。由于应用程序的逻辑复杂，显示层是用Flutter开发的。开发人员意识到，Dart的语言对于设计和维护复杂的程序至关重要。Dart的注释处理和代码生成能力随着时间的推移有了很大的提高。
Figma数据模型是使用Flutter的CanvasKit引擎渲染的。该团队选择了 CanvasKit，而不是在 Flutter 中构建自定义 WebGL 着色器。CanvasKit 的高级渲染能力允许翻译 Figma 的非标准矢量模型。Supernova可以处理设计师选择的任何字体，这一点至关重要。Flutter 和 Google Fonts 包都可以直接从 Google 的服务器上下载字体。
Supernova与Flutter Web适应性的结果
经过两年的早期访问，Supernova推出了一个新的设计系统平台，利用了Flutter框架。
Supernova现在允许您导入所有的Figma创作，并利用它们来创建Flutter脚本（或任何其他框架）。
您可以通过使用Supernova的文档编辑器中的自动化引擎来编写文档，这些文档会随着您的设计变化而自动更新。
用Supernova构建
现在每个人都可以使用Supernova。要开始使用，请到Supernova网站上创建一个账户，并提供一个Figma设计文件的链接。
可以说，从那时起，整个世界都是你的囊中之物。您可以立即开始为 Flutter（或任何其他框架）输出代码，或者您可以获得图标的资产，以便您可以开始编写文档。
演示项目
现在是亲身体验Supernova的时候了。注册完成后，继续进行下一步，提供关于你和你的企业的信息。
完成后，你会看到Supernova的仪表盘，如下图所示。
您可以使用右上方的 "新建 "按钮创建一个新的color token ，或者使用中间的按钮链接您现有的Figma文件。
为简洁起见，本文的演示项目已经链接了Figma文件，现在准备进行修改，如下图所示。
一旦导入 Figma 文件，它就被添加为设计系统的源文件（已链接）。它不需要再次被添加 - 可以从文件中获取更新。
Figma 文件会被 Supernova 定期自动检查是否有修改。如果您在 Figma 中进行了更新并想立即检查修改，或者您的 Figma 文件更新模式被设置为手动，也可以按需获取更新。
代号（键/值对）是Supernova中设计系统的风格特征--使用你的设计系统的代码库和项目可以消费它们。
在传统的名称和值字段之外，每个令牌还有一个可选的描述字段。Supernova代币的价值是可变的，这取决于其用途。带有颜色、渐变和阴影等样式参数的令牌可以被导入到你的设计编辑器中；所有其他令牌必须手动创建。
要编辑Supernova令牌。
- 打开标记菜单，点击编辑
- 编辑标记的名称、描述或值（多个）。
- 点击确认以保存
此外，为了定义或编辑令牌的自定义属性，请遵循以下步骤。
- 在你的设计系统中，导航到设计系统设置，然后是属性
- 点击 "新建"来创建一个新的属性，或编辑属性的名称或默认值
- 单击**"✓"**保存（或 "x"取消）。
利用Flutter导出器
设计系统数据可以通过导出器（相当于npm包，例如）转化为生产代码。
它所生成的代码以及它所针对的平台、技术和堆栈使每个导出器包都是独一无二的。通过使用由Pulsar驱动的模板，你可以调整生成的代码以满足你的需求。Pulsar，像Handlebars和Mustache，是一种熟悉的模板语言。
在建立你自己的导出器时，默认情况下它们是私有的，如果你觉得导出器对其他开发者有用，你可以在以后选择将其发布到市场上。
要使用导出器，你必须首先在你的工作区安装导出器。然后，该导出器将对工作区的所有团队成员可用。你可以通过两种方式安装一个导出器。
- 从导出器商店安装一个现有的导出器
- 链接一个包含导出器包的GitHub仓库
(注意：这里有关于这个过程的分步骤指南)
一旦安装了一个导出器，你就需要安装一个VS Code扩展，以便与Supernova一起工作，从而从中生成你的构建--构建是指向特定设计系统和特定版本的导出器。
建议使用VS Code扩展，以便运行导出器和检索生产代码。
在配置默认项目导出器之前，请确保你的VS Code扩展中至少安装了一个导出器。默认导出器可以在Supernova面板中定制，该面板可以在左下角找到。
要改变VS Code中的默认导出器，请选择配置默认导出器并提供以下数据。
- 工作区。你所选择的设计系统将被托管的位置
- 设计系统。你希望导出器关注的设计系统
- 版本。设计系统的当前版本。使用Shared Draft，你将永远拥有最新的信息。
- 输出器：你想在这个项目中使用的输出器。
最后一步将要求提供代码应写入的目录。
当你设置了默认的导出器，一个名为supernova.json 的新文件将出现在工作区的根文件夹中。出口器的配置包括在这个文件中，它被VS代码的扩展名所占用。
强烈建议你把这个文件保存在你的源代码控制中，这样你的所有团队成员可以随时访问设计系统的数据，无论他们在开发过程中处于什么位置。
你用来启动配置活动的按钮现在会说，在你设置了默认的输出器之后，同步当前的代码库。要申请新的可生产的代码，只需点击这个按钮。输出器将下载当前的设计系统数据，并将代码生产到你指定的文件夹中。这下可方便了!
输出器由Supernova的模板语言Pulsar驱动。Pulsar允许你准确地定义输出的外观，直到最后一个字符。因此，从这里开始，你可能想探索更多关于Pulsar语言的内容。
结论
技术总是在不断发展。每一个设计都是为了安全和编码能力而加密的，强调利用定制的代码和框架进行独特的、创新的、技术复杂的数据展示--这些方面共同融合了技术专长、艺术天赋和安全性。
为了在早期阶段对Supernova的安全性、选择和性能进行微调，他们对该系统的一部分功能进行了有限的访问。
然而，随着Supernova的发展，你将能够接触到广泛的设计系统方面。你可以在这里加入Supernova社区的Discord。
在使用Supernova时，不再需要你的团队在不同的工具之间转换，也不再需要管理独特的程序和界面。一切都可以以与你现在的操作方式一致的方式自动化。
