几分钟内从 Figma 到 Next.js 应用

2025-06-04

几分钟内从 Figma 到 Next.js 应用

介绍

AWS Amplify 是一套专用工具和功能，可让前端 Web 和移动开发人员快速轻松地在 AWS 上构建全栈应用程序。

在本文中，我们将使用 Amplify Studio将Figma 组件转换为React 组件并在我们的应用程序中使用它。

查看Github上的源代码

先决条件

要想阅读本文，需要满足以下条件：

  • JavaScript 和 React.js 的基本知识。
  • Node.js 已安装在我们的计算机上。
  • 对 Next.js 有一定了解，但不是必需的。
  • AWS Amplify 帐户；在此创建一个。
  • Figma 帐户，在此创建免费帐户。

入门

首先，让我们登录AWS控制台或在此处创建一个帐户。从搜索栏中搜索 AWS Amplify，然后从服务列表中选择它。

接下来，我们点击“新应用”按钮。

对于这篇文章，我们将我们的应用程序命名为**figmatoreact-demo**，然后单击确认部署按钮。

部署过程完成后，单击启动工作室按钮以启动我们将构建应用程序的暂存工作室。

连接 Figma

标准的网页或移动应用开发方法需要用户体验 (UX) 和用户界面 (UI) 设计师构建设计模型，然后开发人员使用代码手动构建这些设计。

AWS Amplify 大大减少了这种工作量；使用 AWS Amplify，我们可以通过将设计导入 AWS Amplify 控制台，然后将其作为组件拉取并导入到我们的项目中来生成代码。

要使用 AWS Amplify 将 Figma 设计转换为 React 组件：

登录Figma或在此处创建免费帐户。在我们的 Amplify Studio 中，单击“设计”，然后单击“UI 库”，然后按照以下步骤操作。

  1. 点击“开始”按钮并提供我们的 Figma 设计 URL。或者
  2. 单击“复制 Amplify 设计文件”链接以复制Amplify 的 Figma 设计。
  3. 复制重复的 Figma 设计 URL，单击“开始”按钮，粘贴它，然后单击“继续”按钮* 。 *

  1. 如果是首次访问，Figma 会请求授权。点击“允许访问”按钮即可授予权限。
  2. AWS Amplify 将从 Figma 获取设计。之后，点击右上角的“全部接受”按钮。

我们已成功导入 Figma 设计并将其转换为**figmatoreact-demo**应用程序的组件。

设置 Next.js 应用程序

Next.js是一个基于 React 的开源前端开发 Web 框架，允许服务器端渲染以及静态网站和应用程序的生成。

要引导新的 Next.js 应用程序，我们在终端中运行以下命令：



npx create-next-app <project-name>
Enter fullscreen mode Exit fullscreen mode

创建应用程序后，我们将导航到项目目录并使用以下命令启动该应用程序：



cd <project-name> # to navigate into the project directory 
npm run dev # to run the dev server
Enter fullscreen mode Exit fullscreen mode

Next.js 将启动一个默认可访问的开发环境，网址为http://localhost:3000。

连接我们的 AWS Amplify 应用程序和 Next.js 应用程序

Amplify Studio 使用Amplify UI 库在 Figma 中提供数十个完全可定制的组件，并作为 React 组件导入 Studio。

要连接我们的 AWS amplify 应用程序，我们需要使用以下命令安装Amplify CLI ：



npm install -g @aws-amplify/cli
Enter fullscreen mode Exit fullscreen mode

接下来，我们点击工作室仪表板中的“本地设置说明”并复制 CLI 命令。

接下来我们运行复制的命令，并按照下面的提示将AWS后端环境拉取到Next.js应用中。

我们成功拉取了AWS后端环境和组件。

AWS 在我们的 Next.js 应用程序中添加了三个文件夹。

  • **/vscode******这包含一些 AWS 到 VSCode 的配置

  • **/amplify**这包含 AWS 后端配置。

  • **/ui-components**这对我们的项目来说是最重要的。它包含我们所有转换后的 Figma 设计/组件

在 Next.js 应用程序中使用转换后的 Figma 设计

在开始执行此操作之前，我们必须安装 AWS 组件所依赖的 UI 库；让我们运行以下命令：



npm install @aws-amplify/ui-react
Enter fullscreen mode Exit fullscreen mode

接下来，让我们从文件中导入一些组件/ui-components并渲染它们index.js。



#pages/index.js 
import Head from "next/head";
import styles from "../styles/Home.module.css";
import {
  NavBar,
  HeroLayout3,
  MarketingPricing,
  ContactUs,
} from "../ui-components";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Figma-to-code</title>
      </Head>
      <NavBar />
      <HeroLayout3 />
      <MarketingPricing />
      <ContactUs />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们将在最顶层组件中导入 AWS 样式，在我们的例子中是在_app.js.



//pages/_app.js 
import "../styles/globals.css";
import "@aws-amplify/ui-react/styles.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

在浏览器中，我们的应用程序应该有一个带有类似于 Figma 设计的 Next.js 组件的登录页面。

由于许多软件团队都采用低代码工具，Amplify Studio 值得考虑。它显著减少了构建应用程序界面所涉及的手动开发工作。

同时，它使开发人员能够广泛地定制他们创建的用户界面的代码。

结论

这篇文章讨论了如何使用 AWS Amplify Studio 将 Figma 设计转换为 React.js 组件。

资源

这些资源可能会有帮助：

文章来源：https://dev.to/codebeast/from-figma-to-nextjs-app-in-minutes-4jp9
Devto 翻译
PREV
在 React JS 中实现丝滑滚动
NEXT
升级你的学习+数据结构和算法的示例学习计划