EdgeOne Pages 上线 Figma 插件，设计稿秒变可访问网站

Figma 凭借跨平台特性和便捷的协作体验，已成为产品设计和原型制作的首选工具。为实现一键查看设计稿的实际效果，EdgeOne Pages 正式推出全新 Figma 插件：Figma-to-Website，能够将设计稿转为 HTML 代码后快速部署至边缘节点，并提供可访问的网页链接。

Figma 是一款基于云端的协作设计工具，广受设计师和开发人员的喜爱。它支持多人实时在线编辑，方便团队成员随时随地共同创作和修改设计稿。Figma 不仅具备强大的矢量绘图和界面设计功能，还能通过插件扩展实现更多自动化和高效工作流。

Figma-to-Website 可以一键将 Figma 设计转换为干净、响应迅速的 HTML/CSS 代码，准确还原布局、样式和交互细节，并生成简洁易维护的代码，确保网站在各种设备上都能完美呈现。内置实时预览，发布前可查看预览效果，避免上线后出现偏差。更重要的是，可以一键将生成的网站代码发布到 EdgeOne Pages，实现即时在线访问。插件开源且可定制，适合设计师、开发人员和团队，一键查看设计稿的实际效果。

1. 在 Figma 社区搜索“Figma to Website(Powered by EdgeOne Pages)”，安装插件（点击文末「阅读原文」可直接查看插件）

2. 选择需要转换的图层（建议涵盖整个网页）

3. 运行插件并生成您的网站代码

4. 点击“Publish”即可一键部署至 Pages

项目结构

项目采用单体仓库（Monorepo）架构，包含以下主要包：

• plugin-ui：基于 React 构建的插件用户界面组件。

• 其他包：包含用于代码生成和发布功能的相关模块。

基于开源的Figma to Code项目（https://github.com/bernaferrari/figmatocode），托管由EdgeOne Pages提供支持（https://edgeone.ai/products/pages）。

开发

# Install dependenciespnpm install # Start development serverpnpm run dev

立即体验 EdgeOne Pages 的 Figma-to-Website 插件，让您的设计作品快速转化为可访问的网页！