Amplify Studio 的 8 项新功能

2024年6月27日：这篇博文使用的是Amplify Gen 1，如果您要开始使用新的Amplify应用程序，我建议您尝试使用Gen 2！

这篇文章由@theswaminator撰写

上周四在 re:Invent 大会上，我所在的 AWS Amplify 团队发布了 Amplify Studio，它为开发者带来了全新的功能，助力加速 UI 开发。Amplify Studio 可以自动将 Figma 设计稿转换为易于阅读的 React UI 组件代码。此外，你还可以将云端后端连接到 UI 组件——Studio 与现有的 Amplify 数据模型完美集成。

以下是全新 Amplify Studio 的 8 项令人兴奋的新功能！

Figma 到 React 代码

最大的新功能是能够将Figma设计稿直接转换为开发者友好的 React 代码。Amplify Studio 利用 Figma 的组件和自动布局等功能生成可直接在您自己的代码中使用的 React 代码。这种工作流程使 UI/UX 设计师能够掌控组件的每一个样式决策——包括阴影、边框半径、内边距、外边距和颜色，而这些正是我们开发者总是容易搞砸的地方🙈。

Studio 让开发者能够专注于使他们的应用程序与众不同的核心业务逻辑，而不是花费大量时间在 UI 样式上反复调整。

Amplify UI 库

为了加速 UI 开发，Amplify Studio 使用了全新且美观的Amplify UI 库。它提供了数十种组件，例如新闻推送、联系表单、电子商务卡片以及按钮、文本框和提示框等基本元素。所有这些组件也都可以在Amplify Studio 的 Figma 社区文件中找到。您可以将 Figma 生成的 UI 组件与 Amplify UI 组件混合搭配使用，从而在极短的时间内构建完整的应用程序。

Figma主题插件

Amplify UI 库自带主题功能，允许您定义应用于整个应用程序的全局设计标记。Figma 的主题插件可让您更新 Amplify Figma 文件，使其与您的品牌风格相匹配！

将用户界面绑定到数据

您可以使用 Amplify 的点击式界面，将导入到 Studio 中的 UI 组件以可视化的方式绑定到后端数据模型中的项目。Studio 会自动生成所有必要的“粘合”代码，以使用真实数据驱动 UI。

创建收藏集

我们构建的几乎所有应用程序都会渲染集合（或重复的项目列表）。您可以在 Studio 中创建集合，以显示数据的多个实例。连接到数据管理器中的数据，使用筛选和排序动态查询数据，将集合绑定到特定记录，并定义集合布局样式（例如网格或列表、内边距、方向）。

随机预览

随机预览功能让您可以测试 UI 组件在数据模型中使用不同类型的数据时的渲染效果。例如，您可以确保 UI 在标题非常短和非常长的情况下都能保持良好的外观！

UI组件属性编辑器

Amplify Studio 可实时预览您的 UI 组件，并允许您编辑各种属性，包括颜色、字体粗细和数据等样式。在编辑器中所做的所有属性更改都会实时反映在预览中。

扩展生成的代码

我最喜欢 Studio 的一点是，我们首先关注的是开发者用户。我们提供了一种可视化的方式来创建组件，但这些组件也可以使用普通的 React 代码生成。所有生成的代码都可以通过修改组件属性或重写生成的代码来进行扩展。

你自己去看看吧！

Amplify Studio现已上线！欢迎您在使用过程中提出宝贵意见！