我们将详细介绍如何在 AWS Amplify Studio 中进行设计师 ↔️ 开发人员协作，使应用程序构建变得更加容易，但让我们从这里开始一项。
假设您的设计师（或您！）喜欢在 Figma 中工作，Figma 是当今 UI 设计中占主导地位的工具。整个设计系统都在那里，从颜色和字体，到按钮和表单等原子组件，再到卡片和集合等更大的布局组件。Figma 中的设计会不断发展，当它们发展时，开发人员的职责就是将这些更改移植到网站。如果……这不需要手动操作呢？使用 AWS Amplify，您现在可以直接获取这些更新后的 Figma 设计，而无需进行任何操作，除了审查和接受更改。这真是太神奇了，人们之前只在理论上认为有一天设计工具可以实现。现在它已经实现了。
我们将在稍后详细介绍这一点，我只想确保您在最开始就注意到了这一点。
设定舞台
设计师经常难以与开发人员合作，反之亦然，即使双方通常都热衷于提供出色的应用程序体验。如果您是一位设计师，如果您曾经将自己的视觉奇迹交给开发人员，那么您就知道有时会随之而来的恐惧。您的开发人员是否知道如何完全实现您的设计？像素会被移除吗？我对最终迭代满意吗？
如果您是一位开发人员，您可能会认为设计实现和迭代是一个乏味且手动的工作。您可能没有能力思考设计，即使您确实关心取悦您的客户和最终用户以及发展您的业务。
有很多工具旨在帮助促进交接过程。但是，大多数工具并没有完全解决设计实现问题。
AWS Amplify 团队 最近推出了 AWS Amplify Studio，这是一种新的可视化开发环境，它允许前端开发人员使用最少的代码构建全栈应用程序，同时集成 Amplify 的强大后端配置和管理功能。Amplify Studio 有助于自动化设计实现过程，帮助设计师和开发人员更好地协作，并确保设计被实施到最终产品中。让我们深入了解并查看这些新功能。
让我们构建一个应用程序
在上一篇文章中，我们概述了 Amplify Studio 的功能。现在让我们逐步了解如何在 AWS 上快速构建和部署 Web 应用程序。Amplify Studio 包含后端创建和管理功能，简化了应用程序后端基础设施（如数据库表、用户身份验证和文件存储）的设置和管理，而无需云专业知识。
使用可视化开发环境定义数据模型、用户身份验证和文件存储，而无需后端专业知识。Amplify Studio 可以帮助您完成繁重的工作。让我们专注于 UI 和数据绑定。
整个演示是由 Ali Spittel 完成的，他是 AWS Amplify 的高级开发者倡导者。
为了演示，假设这是一个 **房屋租赁应用程序**。
首先，让我们创建一个数据模型，以便我们可以将数据链接到我的 UI 组件。然后创建一个包含租赁图像、名称、价格和位置的组件。
然后，我们可以保存并部署。
接下来，让我们转到 Figma。Amplify Studio 有助于开发人员和 UX 设计师更好地协作。除了开发人员实施设计和迭代所需的大量时间外，通常 UX 设计也无法准确地实施，这会让设计师感到沮丧并导致次优的最终用户体验。使用 Amplify Studio，开发人员可以从 Figma 导入其设计师创建的自定义 UI 组件，或者他们可以使用 Amplify Studio 提供的 UI 组件库，并对其进行自定义以适应他们的样式指南。
Amplify 团队发布了一个名为 AWS Amplify UI Kit 的 Figma 文件。
样式与 Amplify UI 库 相符，该库包括基元、组件（基元的组合）、卡片和集合。
将文件复制为入门文件，然后进行编辑！
您可以根据需要自定义组件。如果您正在与 UX 设计师合作，你们两人都可以使用 Figma 项目并将 UX 设计导入到 Amplify Studio 中。
Amplify Studio 的 Figma 到代码插件允许我直接从 Figma 导入 UX 设计，这些设计会自动转换为干净的 React 代码，可以进一步自定义。
要导入 UX 组件，请将 Figma 文件的链接粘贴到 Amplify Studio 中。
来自 Figma 文件的所有组件都将导入到 Amplify Studio 中。您可以审查 Figma 中导入的组件，并决定是否接受或拒绝它们，作为额外的质量检查。如果您正在导入设计迭代，这有助于您在实施之前查看设计更改。
此过程可以帮助我节省时间，因为我不必编写数千行代码，因为 Amplify Studio 会自动为我生成代码。它创建人类可读、可靠的 React 代码。稍后，如果需要，您可以扩展此代码以更好地控制组件。
然后，我们可以将 UI 组件链接到数据模型中的数据，并添加子属性，例如租赁价格、名称和位置。
我们可以创建组件集合，并自定义布局。假设我们要将它们显示为列表或网格，或者更改其方向，调整间距等等。我们可以选择显示在我页面上的数据。
现在，我们需要将其集成到应用程序中。Studio 为我提供了代码片段，以便将我的组件添加到我的应用程序中。
运行命令 amplify pull，它会从我们拉入 Amplify Studio 的所有 Figma 组件中运行一些代码生成。然后，我们可以在代码库中像使用任何其他 React 组件一样使用这些 React 组件。
我们将有一个包含有关 API 信息的 Amplify 目录，还有一个包含在前端创建的数据的 models 目录。我们还有一个完整的 UI 组件目录，其中包含我们在 Figma 中创建并导入到 Amplify Studio 的所有 UI 组件。
假设我们已安装 Amplify JavaScript 库和 React UI 组件。我们将使用几行代码来配置此应用程序的 Amplify。我们可以使用 Amplify Provider 组件，该组件将位于顶层。它将允许我的 UI 组件拥有正确的样式。
在下面的组件中，我们 import 了 CSS 文件，然后导入租赁集合。然后我们可以看到我应用程序的 React 代码。这是由 Amplify 生成的代码。
以下是我们在 Amplify UI 文档中可以更改的属性。
我们还可以向生成的组件中的项目添加覆盖。
许多公司都有自己的样式指南，这很棒！我们可以使用 Amplify Studio 将这些样式指南的详细信息添加到 Figma，最终添加到我们的整个应用程序中。
您可以安装一个新的 Figma 插件：AWS Amplify 主题编辑器。如果您想向 UI 添加自定义主题，可以使用该插件。这可以通过 CSS 自定义属性、JavaScript 对象或使用 Amplify UI 主题编辑器插件在 Figma 中设计标记来实现。您可以使用它来更改调色板、组件颜色和品牌颜色。
Amplify Studio 的一个优点是它可以与设计师和开发人员使用的工具一起使用，但有助于集中和简化他们的工作流程，同时促进更紧密的协作。
设计师可以确保他们的 UX 设计和迭代得到完全实施。开发人员可以确保他们将设计实现作为其 CI/CD 流程的一部分。作为开发人员，我们可以节省时间，因为我们无需将设计师的想法和更改转换为代码，并且可以专注于构建更好的应用程序体验和最终用户的需求，同时确保我们没有遗漏设计细节。
一旦此应用程序准备好部署，我们就可以使用 Amplify Hosting 托管该应用程序。它为任何 React、Vue 或 Next.js Web 应用程序提供托管，并具有内置的持续集成和持续部署 (CI/CD) 工作流程、测试、拉取请求预览和自定义域。
Amplify Studio 的前端 UI 功能处于预览阶段（其应用程序后端功能已普遍可用）。您可以访问 沙盒 来试用它。
