Figma 到 HTML：一键将设计转换成干净的 HTML 代码

由 Vishwas Gopinath (opens new window) 撰写

从 Figma 中的视觉设计到完全编码的网站的旅程通常是一个复杂而耗时的过程。传统上，开发人员花费大量时间将 Figma 设计文件精确地转换为 HTML 代码。这一步在将网页设计变为现实中至关重要。

然而，这个翻译过程不仅影响项目的时间表，还会消耗更多的资源。 重要的任务，比如优化网站性能、完善用户体验和增强功能。

如今，随着人工智能技术的不断发展，是时候将其作为解决这一挑战的一部分了。在Builder.io，我们已经通过Visual Copilot (opens new window)实现了这一点。在本博客文章中，我们将探讨如何使用我们的人工智能工具将Figma设计转换为HTML代码，从而节省大量手动工作时间，简化前端开发人员的工作流程，并有助于轻松构建Web应用程序。

什么是Figma？

Figma (opens new window)是一款注重实时协作的协作界面设计工具。它以用户友好的界面和强大的设计能力而闻名，深受设计师喜爱。Figma组件和设计文件是创建像素完美设计和原型的基础，这对于顺畅地移交给开发人员至关重要。 Traditionally, asking a developer if they could export Figma to HTML might have earned you a tired sigh — it's a bit like asking Michelangelo if he could just 'print' the Sistine Chapel ceiling. But what if the answer could be as simple as, "Why not do it in one click?".

At Builder.io, we’ve created Visual Copilot — an AI-powered Figma to code toolchain that leverages AI to swiftly and accurately convert Figma designs to clean and responsive HTML code.

一键转换

Visual Copilot not only converts your Figma design into HTML but also generates the associated CSS code, ensuring that the stylistic elements of your design are preserved. This accelerates the development cycle dramatically, bridging the gap between design and deployment. 自动响应性

该工具确保HTML组件会自动调整以适应所有屏幕尺寸，生成真正响应式的HTML，无需额外手动干预。

广泛的框架和库支持

Visual Copilot被设计为通用性强，支持广泛的框架和库，不仅限于HTML，如React、Vue、Angular和Tailwind CSS，确保HTML代码与您的项目无缝集成。

可定制的代码

转换后生成的HTML代码是完全可定制的，允许采用一致的编码规范并根据需要集成特定功能，同时确保输出是干净的代码。

与您的代码库轻松集成

将Visual Copilot的输出集成到您的工作流程中就像复制和粘贴代码一样简单。 Visual Copilot 如何利用人工智能输出干净的 HTML 代码

Visual Copilot 的核心由人工智能模型和专门的编译器驱动。该人工智能经过训练，能够识别并将设计模式转化为代码（即使没有自动布局），而编译器 Mitosis 则将结构化设计信息转换为干净的 HTML 代码。 使用Visual Copilot时，Layer Layout Model（LLM）会优化最终输出，确保与您的特定样式和结构偏好保持一致。

开始使用Visual Copilot很简单：

1. 打开Visual Copilot Figma插件 (opens new window)。
2. 在您的Figma文件中选择一个图层或设计。
3. 点击生成代码按钮。
4. 将生成的HTML复制到您的项目中。
5. 使用JavaScript自定义代码以支持动画、自定义字体、SVG或其他所需功能。

💡 要了解有关将设计转换的详细说明，请阅读使用Visual Copilot从Figma导入 (opens new window)。

通过处理各种 通过 Visual Copilot，您可以更轻松地在整个网站上保持一致的外观和感觉。本教程将指导您在短短 50 秒内将 Figma 设计转换为一个登陆页面，使用 Visual Copilot。

阅读有关在 Builder.io 博客上的完整帖子。