How to Build A Landing Page with Dualite

我花了几个小时创建登陆页面的Figma设计。每种颜色都恰到好处，每个像素都就位，并且具有无缝的用户流程，但现在是实际编码此着陆页的令人畏惧的部分。

构建 Figma 设计是一项艰巨的任务。这就是我了解 Dualite 的地方，它使用 AI 将 Figma 设计转化为实际代码，帮助像我这样的开发人员最大限度地减少实际编码的工作量。让我们看看我如何使用 Dualite 将我的登陆页面转换为实际代码
 

什么是双石？

Dualite 是一款创新的人工智能 Figma 插件，旨在弥合设计和开发之间的差距。它专注于将 Figma 设计转换为高质量、可重用的代码，并支持 Reactjs、TailwindCSS 等流行技术。

Dualite 让您只需单击一下即可将任何 Figma 设计或动画转换为高效的代码，您可以根据您的项目进行自定义，它具有令人兴奋的功能，让我对它们进行总结：

• 模式：Dualite 提供两种模式，组件模式和页面模式，非常适合开发人员和设计人员将其设计转换为生成的代码。这些模式可确保布局、交互性、动画等从设计准确地转换为代码。
  • 组件模式：专注于单独的设计元素，允许创建可重用的组件。
  • 页面模式：转换整个页面，保持整体布局和结构。
  • 在此博客上了解有关模式的更多信息
• 高级功能：
  • Dualite 提供高级设置，用户可以在其中提供有关其设计的更多技术信息。这可确保生成的代码响应灵敏且准确。
  • 这些高级设置为设计人员和开发人员提供了更多功能，使他们能够自定义输出以满足特定的项目要求。此功能对于需要精确控制最终代码的复杂设计特别有用，例如响应式布局或复杂的动画。 要快速开始使用 Dualite，您可以关注他们的文档

Figma设计

让我们开始登陆页面的Figma设计，如下：

所以，Dualite 有一个模式功能，您可以在页面模式和组件模式之间切换

基本上，页面模式用于一次性转换完整的设计，组件模式用于创建单独的组件，我们可以将其集成到我们的项目中，在文档中了解有关组件的更多信息

我们将使用组件模式为设计中存在的所有组件生成代码，然后将它们集成到一个项目中

让我们从将登陆页面划分为组件开始，如下所示：

初始项目设置

我将在 Dualite 中使用 Reactjs 和 Tailwind 来生成代码，所以让我们先设置项目：

• Reactjs App：使用 Vite 或任何其他工具创建 React 应用程序。 Vite 是创建 Javascript 应用程序的流行选择
• 设置 Tailwind：按照 Tailwind 文档在 Reactjs 应用程序中设置 tailwind，不会出现任何不必要的错误。确保添加依赖项，例如 PostCSS 和 autoprefixer，以实现顺利的 Tailwind 设置。
• 配置文件：在项目根目录下创建tailwind.config.js和postcss.config.css。如果您按照 Tailwind 文档中的所有步骤进行操作，则可能会出现 tailwind.config.js。如果已经存在，则相应更新
• 使用 Javascript：到目前为止，Dualite 不支持 Typescript，因此，请确保仅使用 Javascript 创建 Reactjs 应用程序

开始在 Dualite 中转换组件

初始设置：

• 模式：我们将使用组件模式。使用右上角的切换按钮在页面模式和组件模式之间切换
• 框架：当您选择要转换为代码的设计时，您将看到多种语言和框架选项。我将使用 Reactjs 和 Tailwind 来生成代码。
• 要快速开始使用 Dualite，请阅读此内容

现在，让我们开始将设计转换为组件：

1. 公告栏组件：在此处检查生成的代码
    

2. 导航栏组件：在此处检查生成的代码
    

3. 类别过滤组件：在此处检查生成的代码
    

4. Card Component Component: Check the generated code here
    

5. Pagination Component: Check the generated code here
    

6. Footer Component: Check the generated code here
    

Customizations

1. Copy Components:
   • Now, copy Components folder from all the above generated code and paste it into the project in a components folder
   • You might have noticed that all the components' names are “Component” only, so let’s name all the components accordingly. Example: Announcement bar component will be named as “AnnouncementBar”. Check how i have done it here
2. Render all Components:
   • Now, import all the components according to the design inside App.jsx file
   • Run the project and you will see the output,check the App.jsx file here
   • You might have noticed, some components need to be fixed. Let’s start with the customizations
3. Fixing Component Styles:
   • Fonts:
     • As you can see in the design, we have our own Fonts. Adding them inside the assets folders so i can use the font in the project anywhere.
     • Also needs to create @font-face for the all the fonts we are using in index.css file where Tailwind directives are present
   • Navigation Bar Component:
     • Layout is inaccurate so, style needs to be fixed
   • Card Component:
     • Star Icon: Added star icon’s inside graphics folder
     • Text.js: Updated Text.js file to fix the button label and other text of the component
     • Styles: Updated styles to add font weight to specific text element and button label
   • Card Component Logic:
     • Card Component renders only a single component because it is a single component only.
     • To render multiple Card Component, i have to add some demo data to map over it and render multiple Cards

Note: All the changes and the code can be seen on CodeSandBox here

Output

As soon as I made all these customizations and changes in the project, I can see a better version of my design, check the code and output here

Was Dualite helpful ?

Let’s understand it properly, all the components we generated using Dualite were ready to use, yes, we made some customizations into the code to make it as close as the design looks, despite that, all the styles of the components, all the hierarchy of the components with the data in separate files get generated by Dualite.

Instead of spending too much time building the UI, I can use Dualite for that.

Comparing it to manual coding, this would have taken a long enough time. All the components output was really good, nothing can be 100% correct, every code needs a final touch by the developer and that's what we did here

Yes, Dualite was very helpful and fast in generating code for my components.

Conclusion

There you have it, an efficient way to generate code of your Figma designs with very less manual coding. Process of actually coding the designs is a whole roller coaster ride, which can be less complicated if you use Dualite and customize the code according to your needs and the project.

The above is the detailed content of How to Build A Landing Page with Dualite. For more information, please follow other related articles on the PHP Chinese website!