如何将 Figma 设计转换为 React 代码：分步指南⚛️

如何将 Figma 设计转换为 React 代码：分步指南⚛️

你想加速你的 React.js 应用程序开发吗？正是通过自动将您的设计转换为 React 组件！

如果是， DhiWise Web 应用程序构建器可以节省一些宝贵的时间，否则您可以用它来开发关键的应用程序功能。上面提到的 Web 应用程序构建器可以从您的 Figma 设计中快速生成可用于生产的代码。重要的是它遵循可视化编程的精神。

在本文中，我们将了解 DhiWise 如何帮助您获得可用于生产的前端​​应用程序，以及页面导航和 API 集成等功能。

在此之前，我们先简单介绍一下 Figma 和 React。

无花果 ️

Figma 是一个流行的基于 Web 的矢量图形编辑器和原型制作工具。它带有 macOS 和 Windows 桌面应用程序支持的附加功能。

它允许移动用户使用 Figma 镜像伴侣应用程序实时查看 Figma 原型——适用于 Android 和 iOS。此外，它还使设计人员和开发人员能够为 Web 和移动应用程序创建 UI 和线框图。

反应.js ⚛️

React 是一个免费的开源前端 JavaScript 库，用于构建基于 UI 组件的用户界面。它由 Meta 和一个由个人开发人员和公司组成的社区维护

React 用于构建单页应用程序。它允许我们创建可重用的 UI 组件。

要在您的代码中获得 80% 以上的设计准确度，请遵循这些 设计指南 在设计你的 Figma 时。

让我们更深入地研究它......️

步骤1： 登入 到 DhiWise

首先，使用您的 Google 或 GitHub 帐户注册/进入 DhiWise。

Signup to DhiWise

第 2 步：创建一个新应用程序

完成后，您将被定向到仪表板，您可以在其中搜索和查看以前创建的应用程序。要开始构建新应用程序，只需单击新建应用程序，它会将您重定向到创建新应用程序页面。

Dashboard

第 3 步：选择 React 作为创建应用程序的技术

是的，就是这样。就像选择冰淇淋口味一样简单。

Select React web app

第 4 步：连接您的 Figma 帐户并导入 Figma

接下来，将您的设计从 Figma、XD 或 Sketch 导入 DhiWise。如果您没有任何现成的设计，DhiWise 提供现成的应用程序模板和屏幕库。

要导入应用程序设计，请选择设计应用程序的平台。输入应用程序名称并选择 Figma。要将 Figma 文件导入 DhiWise，您需要将 Figma 帐户与 DhiWise 集成。

您始终可以从其他提到的平台迁移设计，但为此，您可能需要提出请求并在 24-48 小时内让 DhiWise 为您处理相同的问题。

Select Figma

第 5 步：选择页面

接下来，您可以从 Figma 文件中选择多个页面并在应用程序中使用它们，如图所示。请记住，如果您已经为您的页面设置了原型，那么您的工作就差不多完成了一半。

原因：DhiWise 自动获取页面资源，包括导航。而且您无需再次处理单独的导航和其他配置。

select-screens

第 6 步：定制

页面导入后，您可以直接从此处更改视图。如果有任何错误识别的 Figma 元素，此功能将覆盖您（这种情况的可能性很小）。

此外，您可以应用从 验证 至 导航和返回导航 , 打开模态 ， 也 API 集成 . 是的，您可以将来自 REST API 的实时数据绑定到您的页面。

详细了解所有功能： React Web 应用程序生成器

第 7 步：生成源代码

自定义完成后，单击“构建”以在几分钟内获取包含所有自定义的结构化源代码。

Build app and view code

第 8 步：下载/同步您的代码到 GitHub/GitLab

构建应用程序后，您可以从 DhiWise 下载整个源代码和/或将其与您的 GitHub 或 GitLab 存储库同步。

如果您在 DhiWise 应用程序中进行了更多更改并且希望在应用程序中更新代码，您可以使用 VSCode 扩展 将最新的代码直接获取到您的 Vscode 中。

额外的东西

DhiWise 有两个很棒的功能可以让开发生活更加精彩——同时使用 DhiWise。

1. 现在您可以通过以下方式查看您的应用程序原型 将应用程序部署到 Vercel 只需单击一下！
2. 其次，您可以使用 Figma 到代码 Figma 中的插件可在几分钟内获取代码。

谢谢你

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/18466/30100608