我们都喜爱Figma，无论你是设计师还是开发人员，它的易用性和灵活性使我们能够毫不费力地创建出精美的设计。

但是，作为一个Flutter开发者，当你看到一个出色的设计，需要为其编写UI代码时，你通常的反应是“哦不，又要开始挣扎了”。

编写UI代码是一种痛苦，这并不是什么秘密，尤其是当你遇到Flutter UI系统并出现错误时，例如：

- RenderFlex的子元素具有非零的灵活度，但传入的高度（或宽度）约束未定义。

- 一个RenderFlex在右边/底部溢出了X像素

直到你发现你不能在没有添加额外的小部件和代码的情况下将小部件X放在小部件Y内。 当我们在处理Flutter代码时遇到错误，例如更改其他内容或者UI看起来奇怪，小部件位置混乱，甚至一些小部件看不见时，我们都在寻找将Figma转换为Flutter代码的工具，但我们都对结果感到非常失望。

女士们先生们，让我向你们介绍真正的Figma for Flutter：Nowa 🔥

Nowa (opens new window) 是一个全新的现代化无/低代码工具，工作方式非常类似于Figma：它允许您轻松自由地设计，同时将您的设计（甚至逻辑）转换为干净的Flutter代码，甚至直接导出Flutter应用程序。 现在是时候充分利用令人惊叹的Flutter框架的全部功能，而无需为每个像素的编码而奋斗。

让我们看看Nowa和Figma的比较：

在画布中轻松绘制 🎨

无需挣扎或约束，Nowa为您提供与Figma相同的自由式设计感觉，让您的创造力无限发挥，没有限制。

就像在Figma中一样，你可 通过Nowa，您可以添加不同类型的动画，如Lottie和Rive。您还可以添加元素，绘制形状和屏幕，并自由移动对象，但更好的是，您可以直接放置和自定义Flutter小部件。

现在还提供创建令人惊叹设计所需的高级设计功能。例如，您可以在几次点击中创建一个UI组件，根据需要自定义它，并在链接到彼此的不同位置中复制它。

由于您的Flutter应用程序可以在许多具有不同屏幕尺寸的设备上运行，拥有响应式设计不仅是一种选择，而是必须的。

Nowa允许您完全控制设计的响应性，具有组织元素的高级布局选项，使您的布局能够击败任何试图破坏它的屏幕尺寸！

添加动画并使其对事件做出反应。 测试您的应用程序 🤳🏻

“播放模式”类似于figma预览，是测试您的应用程序确保它看起来完美的强大方式。

现在更加增添趣味：您可以选择要在其上预览应用程序的确切设备和平台，甚至设置方向和其他设备设置。这样，您可以真正确保您的应用程序将如何被用户感知。

轻松获取您设计的代码（或直接导出应用程序）🧑🏽‍💻

在您创造和做事情的同时，Nowa正在实时将这些工作转换为Flutter代码。代码干净且准备就绪！

仅需单击一次，即可将整个项目作为Flutter代码下载。您甚至可以在下载之前在Nowa内查看代码，或者检查特定屏幕或组件的代码。

如果您不是源代码爱好者，您仍然可以直接导出应用程序。 现在可以通过点击来快速创建自己的应用！您可以将其导出为Web应用（HTML，CSS，JS），安卓应用（aab/apk），甚至直接部署到App Store以供iOS使用。

您也可以拥有一个本地的Flutter项目，并在同时使用VSCode和Nowa连接到同一个项目（在Nowa桌面版中也可以实现）。

不仅仅是一个设计工具，它还可以更进一步。

您可以通过向设计本身添加变量并使用Nowa的逻辑编辑器构建自定义逻辑来使您的设计更加生动。您可以进行状态管理，为UI字段创建回调等。

Nowa还拥有工具来轻松集成REST API请求、Supabase，以及即将推出的Firebase等功能，几次点击即可完成，无需编写代码或深入研究复杂混乱的文档。

未来更新 🚀

Nowa正处于使专业应用开发变得简单和富有创意的初期阶段。更多功能即将推出，例如**扩展的小部件库，插件，SVG支持，动画编辑器，以及更多与逻辑相关的功能。**您可以期待更多精彩！ 现在可以免费查看路线图 (opens new window)以获取更多详细信息。

您可以免费试用完整的编辑器并下载Flutter代码。立即注册并试试这里 (opens new window)

了解更多关于Nowa的信息

查看Nowa的YouTube频道 (opens new window)，文档 (opens new window)，并加入Discord (opens new window)社区。