使用 App Builder 将 Figma 设计转换为 HTML 代码-技术文章-Infragistics中文官网,Infragistics下载试用,Infragistics最新版,Infragistics pro,Infragistics Ultimate-面向开发人员和UX专业人员的Infragistics UI控件和工具

像App Builder ™这样的低代码工具是游戏规则的改变者。除了将它们视为数字化转型的战略举措之外，越来越多的公司在过去几年中开始采用它们，并提出了更实际的想法：

消除设计师与开发人员的交接，促进更强有力的协作
允许公民开发人员从头开始处理新项目
通过使开发人员能够首先构建应用程序，然后决定他们希望构建应用程序的技术来改进流程
消除容易出错的手工编码
最后，将设计文件转化为代码

那么，直接进入正题吧。如果您现在有一个静态 Figma 文件，并希望将其转换为像素完美、可用于生产的 HTML 代码，本文将向您展示实现此目的的步骤。

分解我们将在博客文章中讨论的主要内容：

Figma是什么
Figma 转 HTML 是什么
如何通过几个简单的步骤将 Figma 导出为 HTML 代码

还有一些额外的信息可以帮助您理解为什么低代码很重要：

为什么要实现流程自动化：原因和好处
方程 - App Builder + Sketch / Adobe XD / Figma 和设计到代码方法

让我们开始吧。

Figma是什么？

Figma 是用于创建网站、应用程序、交互式 UI 原型、徽标和矢量图形的最强大和流行的设计工具之一。最近的统计数据显示，约有 400 万人使用 Figma，其中包括 Dropbox、Slack、Twitter 等科技巨头。有趣的是，这家设计初创公司去年的估值达到惊人的 100 亿美元。

Figma 拥有大量功能，提供了简单易用的原型设计工具、监控和处理实时项目更新的能力，允许用户获得/给出设计审查并收集富有洞察力的反馈。

然而，Figma（没有插件）只擅长制作用户界面和设计。处理代码通常是单独进行的。

Figma 转 HTML 代码是什么？

现在，将 Figma 转换为代码则是另一回事了。本质上，这是指将Figma中创建的设计文件转换为具有真实可用代码的工作应用程序的过程。在大多数情况下，Figma 到 HTML 的过程是由 Figma HTML 生成器或 Figma 到 HTML 插件执行的。

但在团队进入此阶段之前，通常首先会发生其他子阶段或步骤：

创建艺术板和视觉模型
与利益相关者沟通 POC
交换设计师与开发人员的交接与所有规格
对原型进行用户和可用性测试
收集反馈、处理设计返工和开发修复
最终完成、批准并将其转变为无错误的代码和功能齐全的应用程序

自动化开发流程——标志着数字化生存之战

我们讨论了应用程序制造商的强化使用，他们将您的设计文件转化为应用程序。但到底是什么导致了这种加剧呢？2022 年在很多方面都是动荡的一年——通货膨胀、市场衰退、大流行后的影响以及不同国家持续的劳动力短缺。甚至有人担心我们会回到 1970 年代的滞胀。幸运的是，在经历了最初的价格冲击和许多行业（包括 IT）的不稳定之后，情况似乎已经有所缓和。

我为什么要提到这些事件？

因为它们对软件世界以及随后处理项目、应用程序、人员和流程的方式产生了巨大影响。因此，公司必须发展。

精简和自动化对于他们的生存至关重要。低代码/无代码工具变成了实现它的工具。

像App Builder这样的低代码/无代码工具填补了这一空白，现在已经成熟到了一定程度，使团队能够处理设计和开发中的几乎所有事情——从设计网站、原型设计、将完整的设计文件转变为产品只需点击几下即可准备好应用程序，以实现数据格式化、民主化代码等等。所有这一切都以非常简单直观的方式进行，无需您自己编写代码。

如何使用 App Builder 通过几个简单的步骤将 Figma 转换为 HTML 代码

现在，使用所见即所得低代码应用程序生成器，可以更轻松、更快速地从 Figma 设计文件生成响应式 HTML CSS 代码和实时、功能齐全的应用程序。正如我们之前提到的，您在 Figma 中创建的所有内容都使用设计系统 – Indigo.Design – 因此所有样式规范和主题都与真实的 UI 组件相匹配。

但在开始之前，有几个先决条件：