4,230 讀數

设计师到开发者的交接：如何从 Figma 设计文件构建 React 组件

经过 Teri5m2022/09/23

太長; 讀書

AWS Amplify 允许您从 Figma 构建应用程序并将组件导入 React。在 Amplify 的帮助下，该工具可以创建可重用的 React 组件，从而节省您的时间并避免编写长行代码。本教程将使用 Figma UI 工具包中的两个组件：NavBar 和 FormCheckout UI。我们将能够使用 Amplify UI 工具包查看 React 中的所有 UI 组件。我们必须在我们的应用程序中使用 Amplify Studio 的所有组件才能使用我们的应用程序。

Companies Mentioned

featured image - 设计师到开发者的交接：如何从 Figma 设计文件构建 React 组件

众所周知，产品开发人员的部分工作是将 Figma 的设计转换为带有所选框架的代码，如果项目很重要，这可能会很复杂。设计人员到开发人员交接的本质是开发人员将设计中的屏幕实现为精确和像素完美的组件。

在本文中，我们将扩展 AWS Amplify Studio 的功能以从 Figma 构建应用程序并将组件导入 React。 Figma 和 React 之间的连接，在 Amplify 的帮助下，创建了可重用的 React 组件，可以节省你的时间和编写长行代码。从 Figma 到代码的转换过程是无缝的，使开发人员能够高效地更快地构建（这可能是Abode 以数十亿美元收购 Figma 的原因）。

先决条件

要理解和完成本指南，需要以下内容：

Figma 帐户。注册是免费的
Node >= 14.0.0 和 npm >= 5.6安装在我们的本地机器上用于包安装
代码编辑器
在我们的终端上安装 AWS Amplify CLI。运行此命令：

 npm install -g @aws-amplify/cli

JavaScript和React的知识
拥有 AWS 账户。在这里注册一个帐户

在 Figma 上创建模板 UI 工具包

在我们从 UI 工具包创建 React 组件之前，我们需要设置 Figma 项目。进入 Figma 后，创建账户后前往AWS 社区并搜索AWS Amplify UI kit Figma 文件。

单击“获取副本”以复制或克隆 UI 工具包的副本。

Amplify UI 套件附带一些预建页面，它们是：

Primitives 页面：此页面绑定到 AWS Amplify Studio，其中包含预构建组件的所有样式。更改此页面的内容将影响 Figma 组件中 React UI 库的外观。

我的组件页面：此页面使您可以控制编辑、更改和创建组件，它带有预构建的组件。

示例页面：此页面显示了“我的组件”页面中一些自定义组件的示例设计。

本教程将使用 My Components 页面中的两个组件： NavBar和FormCheckout UI。

创建放大项目

在 Figma 中完成设置后，前往 AWS 控制台创建一个新的 Amplify 项目。登录您的账户，然后搜索 AWS Amplify。

从服务列表中选择 AWS Amplify。进入All Apps仪表板后，单击New app按钮并从下拉列表中选择Build an app 。

为应用命名，然后单击确认部署以创建应用。

随着 Amplify 项目的部署，让我们创建一个新的 React 应用程序。

创建一个反应应用

要构建一个新的 React 应用程序，请转到您的终端并粘贴以下命令：

 npx create-react-app no-code

此命令解压缩构建漂亮且可扩展的 Web 应用程序所需的所有文件和文件夹。

启动放大工作室

安装我们的 React 应用程序后，现在是启动项目的时候了。单击启动工作室以显示无代码的登台。

单击启动工作室按钮，因为它会将您带到显示no-code暂存环境的页面。

在这里，我们将能够做很多事情，比如创建数据模型、身份验证等。但我们的重点将放在“设计”选项卡下的 UI 库上。

单击开始按钮。

与 Figma 同步。此对话框将允许您从“我的组件”页面粘贴 Figma 文件链接。

如果这是您第一次执行此步骤，则可能需要进行身份验证才能访问您的 Figma 帐户。

从 Figma 中获取组件

接受从 Figma 中提取的组件的所有更改。

我们将能够在 Amplify Studio 中查看 Figma 文件中的所有 UI 组件。

Figma 导入组件中的FormCheckout与 Amplify Studio 中显示的相同。

在 React 中使用获取的组件

现在我们已经在 Amplify Studio 中获取了 UI 组件，我们必须在 React 应用程序中拥有所有 UI 组件。

要将我们的应用程序与 Amplify Studio 连接，我们需要使用本地设置说明链接将组件拉入我们的源代码，并从项目根文件夹运行命令。

请记住，要使此命令正常工作，请全局安装 AWS Amplify CLI，如先决条件部分所述。

运行该命令将提示我们的程序一条授权消息。

单击是以授予 React 应用程序的权限。之后，拉动组件时会出现一系列提示。接受问题的默认设置。

如果您在终端中遇到挑战或任何错误日志消息，则可能是您尚未配置 AWS。

如果您面临这一挑战，请查看本指南。

安装会在src目录中创建一个新文件夹ui-components ，其中包含从 Amplify Studio 中提取的所有 UI 组件。

Amplify UI 库入门

Amplify UI React 库对于我们应用程序的样式设置至关重要，它与所有其他 CSS 实用程序库相似。

运行此命令：

 npm install @aws-amplify/ui-react aws-amplify

风格

在应用程序的入口点 index.js 文件中，导入 CSS 文件。使用此代码复制并更新 index.js 文件，该代码负责应用程序的外观：

 // src/index.js
import React from 'react' ; import ReactDOM from 'react-dom/client' ; import App from './App' ; import '@aws-amplify/ui-react/styles.css' ; // add this
const root = ReactDOM.createRoot( document .getElementById( 'root' )); root.render(  < React.StrictMode >
    < App />
  </ React.StrictMode >
);

字体

在安装 Amplify UI 依赖项期间，Amplify UI 附带默认字体Inter 。在里面

public/index.html

文件，复制并粘贴以下 Google 字体 CDN 链接

<head>

元素：

 // public/index.html
... <head> < link rel = "preconnect" href = "https://fonts.googleapis.com" />
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin />
< link
  href = "https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900&display=swap"
  rel = "stylesheet"
/>
</head> ...

显示组件

要显示组件FormCheckout和NavBar ，请导航到

src/App.js

文件并删除所有代码。

接下来，使用以下代码更新文件：

 // src/App.js
import { FormCheckout, NavBar } from './ui-components' ; const App = () => {  return (    <>
      < NavBar />
      < FormCheckout marginTop = '5em' />
    </>
 ); } export default App;