超新星

超新星,一个设计系统平台,使用 Flutter 为设计师和开发者构建了他们的协作式 Web 应用程序。

目标

2019 年,Flutter 宣布了针对准备使用 Flutter 的 Web 支持进行构建的公司 早期采用者计划。这些早期采用者之一,超新星,有兴趣使用 Flutter 为 Web 构建一个协作式设计系统平台。

在大多数组织中,设计和开发团队独立工作,因为他们依赖于不同的工具集。超新星的目标是通过创建一个平台来解决这种脱节,在这个平台上,设计师和开发者可以作为一个团队一起工作。他们还希望自动化将设计师使用的设计系统转换为开发人员可以直接以代码形式使用的过程。

为什么选择 Flutter?

最初,超新星被编写为一个原生 macOS 应用程序,但他们的用户对基于 Web 的解决方案表现出极大的兴趣。Flutter 对该团队很有吸引力,因为它允许他们使用单个代码库在其他平台上发布他们的工具——尤其是因为他们知道他们最终会想要一个桌面应用程序,因为该工具非常计算密集,并且对性能的要求比大多数网站更高。

该工具还使用了许多不常见的视觉操作,他们喜欢 Flutter 提供了一种访问底层渲染引擎的方式,这样他们就可以用自己的方式构建它,而不是从头开始使用 WebGL 构建。

他们的解决方案

团队发现,使用 Dart 的 Web 特定库为他们节省了大量时间。在他们需要一个缺乏 Web 支持的插件的少数情况下,例如他们的代码预览小部件,他们将其嵌入为 HTML 并使用 JavaScript 库进行语法高亮显示。

整个工具都是用 Flutter 和 Dart 构建的。由于它依赖于大量复杂的逻辑,他们的应用程序特别依赖于 Dart,Flutter 用于可视化层。团队喜欢 Dart 的语言特性,例如健全的空安全,他们发现这对于使复杂应用程序稳定和可维护至关重要。他们也对 Dart 的注释处理和代码生成功能感到兴奋。

他们使用 Flutter 的 CanvasKit 渲染器从 Figma 的数据模型中解析和渲染组件。团队更喜欢通过 Flutter 使用 CanvasKit 渲染器,而不是使用 WebGL 从头开始编写着色器。CanvasKit 为他们提供了更多更高级别的渲染工具,使他们能够专注于将 Figma 的非标准矢量模型转换为与他们的渲染引擎一起工作的细微差别。

由于字体管理对于开发人员来说是一个重大挑战,Supernova 可以支持设计师想要使用的任何字体。为此,他们使用了 Flutter 和 google_fonts 包,该包会自动直接从 Google 下载字体。

最后,Flutter 使团队能够在 Supernova 平台和他们构建的用于在 Figma 中运行的单独插件之间共享一个代码库。尽管它们的前端完全不同,但它们共享相同的数据模型和逻辑。

“我们对使用 Flutter 在 Web 上的决定充满信心。”

- Jiří Třečák,首席执行官,或 Artem Ufimtcev,首席技术官,Supernova

结果

加入早期访问计划两年后,Supernova 使用 Flutter 推出了其创新的设计系统平台。现在,任何人都可以将他们的 Figma 设计导入 Supernova,并立即开始导出 Flutter(或任何其他框架)的代码。Supernova 的文档编辑器允许您根据您的设计系统创建文档,并包含一个自动化引擎,该引擎会在设计更改时自动更新您的文档和代码。