这篇文章是和@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库。它提供了几十个组件，如新闻提要、联系表单、电子商务卡，以及诸如按钮、TextFields和警报等基元。所有这些组件在Amplify Studio的Figma社区文件中也有。您可以将 Figma 生成的 UI 组件与 Amplify UI 组件进行混合和匹配，在很短的时间内构建完整的应用程序。
Figma Theming 插件
Amplify UI 库具有主题化功能，允许您定义适用于整个应用程序的设计标记。Figma的主题插件允许您更新Amplify Figma文件，以符合您的品牌风格。
将UI与数据绑定
您可以使用Amplify的点和点击界面，将导入Studio的UI组件与您的后台数据模型中的项目进行可视化绑定。Studio会自动生成所有的 "胶水 "代码，以便用真实的数据支持UI。
创建集合
几乎所有我们建立的应用程序都会呈现出集合（或一个重复的项目列表）。你可以在Studio中创建集合，显示你的数据的多个实例。连接到你的数据管理器中的数据，通过过滤和排序动态查询数据，将你的集合绑定到特定的记录，并定义你的集合布局风格（例如网格与列表，填充，方向）。
洗牌预览
Shuffle预览让你能够测试你的UI组件是如何通过你的数据模型的不同类型的数据进行渲染的。例如，你可以确保你的用户界面在一个非常短的标题和一个非常长的标题下仍然看起来很好。
UI组件属性编辑器
Amplify Studio为您的UI组件提供了一个实时预览，并能够编辑从颜色、字体重量和数据等样式的属性。所有在编辑器中的属性变化都会实时地反映在实时预览中。
扩展生成的代码
我最喜欢Studio的部分是，我们首先关注的是开发人员的受众。我们有一个可视化的方法来制作组件，但随后它们可以使用正常的React代码生成。所有生成的代码都可以通过修改组件的道具或覆盖生成的代码来扩展。
自己去看看吧!
Amplify Studio现在已经上线了!我很乐意听到你的反馈，因为你用它来构建!
