由Murat Yükselâ！
撰写在这个快速发展的时代，设计标准可能对开发人员构成一个严重的问题。在本文中，我们将探讨是否有一种简单，自动的方法将Figma设计转换为Next.js代码。然后，我们将使用尾风CSS介绍将FIGMA转换为Next.js的快速方法。让我开始！
跳跃：
- What is Figma?
- What is Next.js?
- Is there an easy way to convert from Figma to Next.js?
- How to convert Figma to Next.js code using Tailwind CSS
什么是无花果？
FIGMA是cloud-based design and prototyping tool，可让您为网站和移动应用程序创建设计。 Figma是一种协作工具，可让您实时与团队合作，提供矢量编辑，实时设计协作，共享，原型，插件等功能。
如今，远程工作是一件严肃的事情。假设您正在与您的团队成员（包括项目经理，设计师和开发人员）进行虚拟电话。使用Figma，您都可以实时查看并更改Figma文件，从而简化过程。
什么是next.js？
Next.js是一个React框架，可让您构建服务器端渲染和静态Web应用程序。当我只是在处理前端开发并且不了解后端开发时，我不太了解下一步的炒作。毕竟，Next.js中使用的大多数术语都处于更全面的水平。
Next.js和React之间的真正区别在于，要构建一个全堆栈应用程序，您不需要使用任何其他服务器端语言（例如Ruby，Python或node.js）包装服务器。
Next.js supports a technology called serverless functions，它基本上允许您编写整个应用程序而无需离开主文件夹。在本文中，我们不会掩盖server-side rendering and all the other cool features that Next.js offers，但我觉得有必要提及它，因此我们了解Next.js的基础知识。
Next.js还支持不同类型的挂钩，例如getStaticProps和getServerSideProps，它们使您可以在服务器端获取数据以帮助SEO。除此之外，Next.js随附内置路由，自动代码分配以及许多其他功能，使其成为构建Web应用程序的好工具。
是否有一种简单的方法可以从Figma转换为Next.js？
有一些工具可以自动将您的设计变成代码，例如Locofy.ai，anima和CopyCat。但是，他们确实有代价。我找到了一个免费的选择，即Figma plugin called Figma to Reactjs，但是我认为这不是很有效。而且，您可能会从名称中猜测，它不支持Next.js。
我将通过使用具体示例来演示我发现的主要问题。如果您使用一些简单样式的非常基本的输入字段，并使用上述插件进行转换，则将获得与以下内容非常相似的结果：
const Group1000001930: React.VFC = () => {
return (
<div className="group-1-0-0-0-0-0-1-9-3-0">
<div className="rectangle-4-4-3-2" />
<p className="text-1">Your Name</p>
</div>
)
}
.group-1-0-0-0-0-0-1-9-3-0 {
height: 50px;
width: 370px;
}
.rectangle-4-4-3-2 {
border-radius: 5px;
height: 50px;
width: 370px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
}
.text-1 {
text-align: left;
vertical-align: top;
font-size: 15px;
font-family: Inter;
line-height: 20%;
color: #637381;
}
让我们忽略以下事实：此代码非常优化为打字稿。该代码看起来不错，并且具有正确的颜色，高度和宽度。如果我们拿起小组件并手工包裹它们，那可能会起作用，但是由于我们要谈论下一件。
在Next.js中，CSS文件的工作方式与React有所不同。 Next.js不使用单独的CSS文件，而是使用模块化方法。因此，您将使用带有Home.module.css之类的名称的文件。每当您想在这些文件中使用样式时，都必须以以下方式导入并使用它们：
import styles from "../styles/Home.module.css";
<div className={styles.groupOne}>
<div className={styles.divOne} />
<p className={styles.paraOne}>Your Name</p>
</div>;
在上面的代码中，我们假设groupOne，divOne和paraOne类是Home.module.css文件中定义的类。我什至不是在谈论像.group-1-0-0-0-0-0-1-9-3-0这样的导入名称。要使用从插件导入的，我们需要手工更改每个插件。老实说，我认为这样的工作没有太多要点。
让我们考虑另一个选择。从更传统的意义上讲，我是开发人员，我开发了东西，我知道如何阅读设计并将其转换为代码。如果我想做得很好，我的客户满意，我不需要工具来为我做到这一点。但是，尝试仅使用CSS设置所有东西将需要很多时间。因此，我将使用另一种类型的工具，即CSS框架。
如何使用Tailwind CSS 将无花果转换为Next.js代码
让我们考虑以下情况。我有一个客户向我展示一个FIGMA文件，并希望在Next.js中使用它的像素完美版本。截止日期很快，所以我必须迅速工作。由于多种原因，我无法使用任何付费工具，因此我必须自己编码。
在这种情况下，我要做的第一件事是确定要使用的堆栈。如您所知，有时候，客户考虑了特定的堆栈。他们可能希望您使用特定的UI框架（例如Bootstrap，样式组件，MUI或Tailwind CSS）将FIGMA文件转换为Next.js代码。
如果他们不需要UI框架，那么我将彻底查看该项目，并确定在这种情况下哪个框架是最好的。如果设计是重复的和启动风格的，我将选择Bootstrap。如果该项目是具有许多功能的企业级应用程序，例如模式，弹出式等。我选择MUI。如果设计中有许多重复的组件，我会选择样式组件。最后，如果设计中有许多独特的作品，我会选择尾风CSS。
但是，这只是我的两分钱。每个人都有自己的堆栈和偏好。为了本教程，我将使用尾风CSS，因为它易于编写和理解和快速编码。
我有以下无花果设计：
我已经决定了我的技术堆栈，所以是时候对其进行编码了。在开始修补Figma的功能之前，您应该有一个心理模型，即如何将该设计变成代码。
我是Flexbox的忠实拥护者。当我查看此图像时，我会看到两个通过flex-direction行放置的组件。我将左一个Contact.js和右一个Form.js命名。然后，我将打开我的next.js应用程序，在我的src文件夹中，我将创建一个components文件夹，然后将上述文件添加到其中。
首先，我将它们导入我的index.js文件，如下：
import React from "react";
import Contact from "@/components/Contact";
import Form from "@/components/Form";
const index = () => {
return (
<div className="flex flex-col md:flex-row bg-[#FFFFFF]">
<div className="w-full ">
<Contact />
</div>
<div className="w-full ">
<Form />
</div>
</div>
);
};
export default index;
然后，我去Contact.js并开始修补它。在此页面上，直到带有图标的元素，我们的元素定位为column，这是默认行为。
当我们使用图标来进入元素时，例如Our Location，Phone Number和Email Address，我会看到另一个Flexbox命令。这些元素中的每一个都可以分为两个组成部分，父母给了flex-direction行。左元素是图标，右元素是用flex-direction列定位的文本集合。或者，您可以将它们保持原样，因为默认行为是将元素定位为列。
到目前为止，我什至不需要使用Figma的功能。我脑海中有我的布局，这意味着当我开始编码时，我会更快，更有信心。但是，现在，我需要一些额外的知识才能实现完美的像素完美或接近Pixel-Perfect代码。我之所以会说，因为作为开发人员，我们可能必须超越设计文件中设计师给出的内容。
由于无花果的限制，我只能尽可能具体地看到尺寸，而在现实世界中，我会处理超级和超大的屏幕尺寸。因此，我必须从相对论和响应能力方面思考，这在此设计中没有提供。
我必须考虑该页面不能如移动设备上显示。请记住，我们最初的想法是，整个页面将由两个组成部分组成，这些组件以flex-direction行放置，但是在移动设备的情况下，它们将被定位为flex-direction列。无论如何，回到无花果。
我想从页面上看到的第一个文本Contact Us开始。要尽可能完美地编码它，我需要知道颜色的确切六角形代码，大小，字体重量和线高（如果可能）。我双击该元素，一旦我这样做，figma就向我展示了屏幕右侧的元素的属性：
在底部，在Fill部分下，我看到颜色为#3056D3。 Fill部分的顶部是Text部分。当我在那里看时，我看到字体名称为Inter。它在下面说字体重量为Semi Bold。就在它旁边，我看到了数字16，这意味着字体大小为16px。在Semi Bold下，我看到了数字20，这意味着线高为20px。
我可以单击这些部分，按照我的意愿进行更改，并将在Figma文件上显示新样式。要以更友好的方式查看内容，我还可以单击右上角的顶部 Inspect 部分。请查看下图：
现在，我将其推送到我的代码中。然后，我转到我的Contact.js文件，然后添加如下：
import React from "react";
const Contact = () => {
return (
<div>
<h5 className="text-[#3056D3] font-semibold text-[16px] leading-5">
Contact Us
</h5>
</div>
);
};
export default Contact;
上面的代码是尾风CSS的域。尝试记住所有这些命令并不是很实际，因此我在开发时保持Tailwind CSS docs打开。要搜索特定的命令，我只需要按CTRL + K，我会在文档中查看所需的建议。
我创建了一个h5元素，该元素参加了尾风CSS类。我添加了我从Figma中获得的颜色，作为文本[#3056D3]，指定其字体是半圆形的，文本本身为16px，并且通过编写leading-5，线高为20px。我在文档中看到了所有这些命令，如下所示：
现在，我回到设计，看看我需要一些利润。在无花果中，有一种方法可以看到px中元素之间的距离。为此，您需要双击其中一个元素，然后将光标悬停在另一个元素上，这将显示像素中两个元素之间的距离：
但是，这里有一个问题。我不能单独依靠像素，因为我必须考虑到会有不同的屏幕尺寸。在这种情况下，我试图了解元素之间的关系，并再次创建了它的心理模型并自己添加样式。
我看到左右的填充物比顶部和底部的填充物小一点。我使用此模型编写我的代码。我也遵循与Contact Us所做的下一个元素相同的过程。我检查他们的颜色，尺寸，线高度等，尽我所能使其使其完美：
import React from "react";
const Contact = () => {
return (
<div className="h-full p-10 lg:px-28 lg:py-32 ">
<h5 className="text-[#3056D3] font-semibold text-[16px] leading-5 mb-2">
Contact Us
</h5>
<h1 className="text-[#212B36] font-bold text-[40px] leading-10 mb-7">
Get In Touch With Us
</h1>
<p className="text-[#637381] text-[16px] leading-7">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi numquam
sapiente quod culpa qui minus itaque nesciunt cupiditate saepe
praesentium? Exercitationem natus optio debitis quos recusandae
assumenda? Aperiam, accusantium id.
</p>
</div>
);
};
export default Contact;
以下是到目前为止的结果：
我添加了一个额外的边框，以更好地了解开发过程。完成后，我将删除该边界。
现在，我需要使用图标添加零件。正如我之前提到的，我将它们建模为Flexbox。但是，在对它们进行造型之前，我需要图标。要获得它们，我会双击要下载的图标，然后在右侧的底部选择导出部分。我可以以任何我想要的形式导出图标，例如.png，.svg等。我会选择.png：
现在已经下载了图标，我可以编码元素。但是，由于有三个元素与彼此几乎相同，因此如果我创建一个单独的组件并使用道具来编写它们，那可能会更好。因此，根据DRY principles，我不会重复自己。
收集组件
创建一个新文件，称其为Collection.js，并使用以下代码填充它：
import Image from "next/image";
import React from "react";
const Collection = ({ icon, title, para }) => {
return (
<div className="flex flex-row my-12">
<div className="bg-[#3056d30d] w-20 h-20 mr-7 flex justify-center items-center">
<Image width="24" height="24" src={icon} alt="" />
</div>
<div className="w-full">
<h2 className="font-semibold text-[20px] leading-5 mb-2">{title}</h2>
<p className="text-[#637381] text-[16px] leading-7 w-56">{para}</p>
</div>
</div>
);
};
export default Collection;
我的想法是在我的Contact.js文件中映射此组件。因此，我在({ icon, title, para })的顶部取消了结构化的props。我会从父Contact.js文件中取消结构的道具，以便每次使用它们时都不必使用props关键字。
到目前为止很好，但是我如何编写样式，以及如何从Figma文件中获取它们？像往常一样，我单击了元素，寻找它们的价值，并考虑了它如何适合页面。这里没什么新的。但是，当我这样做时，我遇到了一个问题。
您看到的，图标位于与应用程序的一般背景不同的背景上。我想选择它，但是当我寻找它时，我会看到在尾风CSS中实现的东西可能不那么容易。查看下图：
您看到问题了吗？背景以rgba颜色background: rgba(48, 86, 211, 0.05);给出。
所以，我需要处理不透明度。但是，当我想使用尾风CSS进行操作时，我会遇到一些问题。请记住，我们使用尾风CSS尽可能快。如果我按建议给出不透明度，那么背景元素的子元素（即icon元素）也将受到它的影响。我绝对不想要那个。
我要么必须更改我的flexbox方法，然后取消z索引，要么我必须考虑其他事情。我选择后一种选项，然后决定将RGBA颜色转换为十六进制颜色。您可以为此目的找到一些tools on Google。与该特定RGBA颜色相同的十六进制颜色为#3056d30d。当我使用它时，一切都按预期工作。
这里还有另外一件事，Image标签。如您所见，它是从"next/image"导入的。在Next.js中，我们不使用经典的HTML <img>标签，而是使用Next.js自己的Image标签。我们需要给它一个高度和宽度。
在我的Contact.js文件中，我导入了我保存在我也创建的assets文件夹中的图标。创建一个称为data的对象数组，并在传递相关道具时映射Collection组件：
import React from "react";
import Collection from "./Collection";
import house from "@/assets/house.png";
import email from "@/assets/email.png";
import phone from "@/assets/phone.png";
const Contact = () => {
const data = [
{
title: "Our Location",
para: "99 S.t Jomblo Park Pekanbaru 28292\. Indonesia",
icon: house,
},
{ title: "Phone Number", para: "(+62)81 414 257 9980", icon: phone },
{ title: "Email Address", para: "info@yourdomain.com", icon: email },
];
return (
<div className=" h-full p-10 lg:px-28 lg:py-32 ">
<h5 className="text-[#3056D3] font-semibold text-[16px] leading-5 mb-2">
Contact Us
</h5>
<h1 className="text-[#212B36] font-bold text-[40px] lg:text-[35px] leading-10 mb-7">
Get In Touch With Us
</h1>
<p className="text-[#637381] text-[16px] leading-7">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi numquam
sapiente quod culpa qui minus itaque nesciunt cupiditate saepe
praesentium? Exercitationem natus optio debitis quos recusandae
assumenda? Aperiam, accusantium id.
</p>
{data.map((item, index) => (
<Collection
key={index}
title={item.title}
para={item.para}
icon={item.icon}
/>
))}
</div>
);
};
export default Contact;
形式组件
现在，我需要填充Form.js文件。我将使用我到目前为止所展示的方法来查看我需要的东西，例如，我应该如何处理尺寸等：
：
import React from "react";
const Form = () => {
return (
<div className=" h-full p-10 lg:px-28 lg:py-32 ">
<div className="bg-[#FFFFFF] drop-shadow-lg h-full w-full p-10">
<input
type="text"
placeholder="Your Name "
className=" border border-[#F0F0F0] w-full h-[50px] rounded-lg p-5 mb-5"
/>{" "}
<input
type="text"
placeholder="Your Email "
className=" border border-[#F0F0F0] w-full h-[50px] rounded-lg p-5 mb-5"
/>{" "}
<input
type="text"
placeholder="Your Phone "
className=" border border-[#F0F0F0] w-full h-[50px] rounded-lg p-5 mb-5"
/>
<textarea
name=""
id=""
cols="30"
rows="10"
placeholder="Your Message"
className=" border border-[#F0F0F0] w-full rounded-lg p-5 mb-5"
></textarea>
<button className="bg-[#3056D3] w-full h-[50px] rounded-lg p-5 mb-5 flex justify-center items-center">
<p className="text-white leading-5">Send Message</p>
</button>
</div>
</div>
);
};
export default Form;
现在，我的应用程序应该看起来像以下图像：
结论
在本文中，我们学会了如何使用尾风CSS将无花果设计转换为Next.js代码。我演示了如何使用心理模型来创建时尚的设计而无需付费工具。我还谈到了figma to reactjs插件，但我决定在最后编写自己的代码以获得更好的结果。
我希望您喜欢阅读本文并从中学到一些东西。保持冷静并保持编码！
LogRocket：Next.js应用程序的全面可见性
调试下一个应用程序可能很困难，尤其是当用户遇到难以复制的问题时。如果您对监视和跟踪Redux状态感兴趣，自动播放JavaScript错误以及跟踪慢速网络请求和组件加载时间，请尝试LogRocket。
LogRocket就像是用于网络和移动应用程序的DVR，录制了下一个应用程序上发生的一切。您可以汇总并报告您的应用程序在发生问题时所处的状态，而不是猜测问题的原因。 Logrocket还监视您的应用程序的性能，使用客户端CPU加载，客户端内存使用等指标进行报告。
Logrocket Redux中间件软件包在您的用户会话中添加了额外的可见性。 logrocket从您的redux商店记录所有操作和状态。
现代化您如何调试下一个。