如何将 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。
- 现在您可以通过以下方式查看您的应用程序原型 将应用程序部署到 Vercel 只需单击一下！
- 其次，您可以使用 Figma 到代码 Figma 中的插件可在几分钟内获取代码。
谢谢你
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/18466/30100608
标签：Figma,代码,应用程序,React,DhiWise,分步,设计 From： https://www.cnblogs.com/amboke/p/16660387.html