众所周知，产品开发人员的部分工作是将 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 套件附带一些预建页面，它们是：   ：此页面绑定到 AWS Amplify Studio，其中包含预构建组件的所有样式。更改此页面的内容将影响 Figma 组件中 React UI 库的外观。 Primitives 页面 ：此页面使您可以控制编辑、更改和创建组件，它带有预构建的组件。 我的组件页面 ：此页面显示了“我的组件”页面中一些自定义组件的示例设计。 示例页面 本教程将使用 My Components 页面中的两个组件：  和  UI。  NavBar FormCheckout 创建放大项目 在 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 导入组件中的 与 Amplify Studio 中显示的相同。 FormCheckout 在 React 中使用获取的组件 现在我们已经在 Amplify Studio 中获取了 UI 组件，我们必须在 React 应用程序中拥有所有 UI 组件。 要将我们的应用程序与 Amplify Studio 连接，我们需要使用本地设置说明链接将组件拉入我们的源代码，并从项目根文件夹运行命令。  请记住，要使此命令正常工作，请全局安装 AWS Amplify CLI，如先决条件部分所述。 运行该命令将提示我们的程序一条授权消息。  单击是以授予 React 应用程序的权限。之后，拉动组件时会出现一系列提示。接受问题的默认设置。 如果您在终端中遇到挑战或任何错误日志消息，则可能是您尚未配置 AWS。 如果您面临这一挑战，请查看 。 本指南 安装会在 目录中创建一个新文件夹  ，其中包含从 Amplify Studio 中提取的所有 UI 组件。  src ui-components  Amplify UI 库入门 Amplify UI React 库对于我们应用程序的样式设置至关重要，它与所有其他 CSS 实用程序库相似。 运行此命令：    npm install @aws-amplify/ui-react aws-amplify 风格 在应用程序的入口点 index.js 文件中，导入 CSS 文件。使用此代码复制并更新 index.js 文件，该代码负责应用程序的外观：                                   root.render(           ); // 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' ));    < React.StrictMode > 
      < App  /> 
    </ React.StrictMode > 
 字体 在安装 Amplify UI 依赖项期间，Amplify UI 附带默认字体  。在里面 文件，复制并粘贴以下 Google 字体 CDN 链接 元素：  Inter public/index.html <head>   ... <head>                                 </head> ... // public/index.html 
 < 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,wght@-10..0,100..900&display=swap" 
    rel = "stylesheet" 
 /> 
 显示组件 要显示组件 和  ，请导航到 文件并删除所有代码。 FormCheckout NavBar src/App.js 接下来，使用以下代码更新文件：                     ); }   // src/App.js 
 import  { FormCheckout, NavBar } from   './ui-components' ; const  App = () =>  {    return  (      <> 
        < NavBar  /> 
        < FormCheckout   marginTop = '5em'  /> 
      </> 
 export   default  App;  margin-top 属性给出了导航栏和结帐表单之间的上边距。 CSS 值是如何在我们的组件中使用来自 Amplify UI 的样式的一部分。 启动开发服务器 React 带有一个热重载功能，每次文件有更新时都会自行刷新。 运行此命令：    npm start 开发服务器运行在  .  http://localhost:3000 想要将此 React 应用程序部署到网络上吗？查看 ，该资源可指导您逐步使用 AWS Amplify。 此资源 结论 Amplify Studio 提供了零代码甚至完全没有代码的低代码工具。这个工具让开发人员的工作变得令人兴奋，因为我们的一部分工作已经为我们完成了，而无需从头开始构建组件，或者更好的是，实现设计师的屏幕。 我们可以大胆地说，从设计师到开发人员的交接是无缝的。 本文教我们如何在 Amplify Studio 的帮助下创建和集成 Figma 组件，并将这些组件连接到作为工作应用程序的 React 组件。 完整的源代码在这个 中。 GitHub repo

This story contains new, firsthand information uncovered by the writer.

Amazon

Google

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

該音頻是用故事的原始語言製作的！

太長; 讀書

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

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

架构师指南：构建 AI/ML 数据湖参考架构

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

架构师指南：构建 AI/ML 数据湖参考架构

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps