bernaferrari/FigmaToCode

这是什么？

核心功能

• 01可将 Figma 选区生成 HTML、React、Svelte、styled-components、Tailwind、Flutter 和 SwiftUI 代码。
• 02支持 Auto Layout、嵌套 Frame、对齐方式以及混合的绝对定位。
• 03Tailwind 输出支持 3 和 4 语法，并可设置自定义类名前缀。
• 04支持 Figma 颜色变量，HTML 输出可将图片以 Base64 内嵌。
• 05提供实时预览，并对无法精确转换的元素给出警告。
• 06可导出 Vite、Next.js、Flutter 或 SwiftUI 起始项目，并包含本地资源。

适用场景

• 将设计稿中完成的组件作为首版实现交给开发者。
• 在接入业务逻辑前，用 Tailwind 或 React 快速搭建页面片段原型。
• 基于现有移动端设计生成 Flutter 或 SwiftUI 的起步代码。
• 在不允许将设计文件发送到外部 AI 或云服务的环境中使用。

快速上手

1. 1

   从 Figma 社区安装免费插件

2. 2

   在 Figma 中选择画框、组件、组或图层并运行插件，然后选择目标格式

使用前须知

• !需要 Figma，插件只能在 Figma 的插件环境中运行。
• !生成的代码只是视觉框架，语义、无障碍和应用逻辑需要人工审查。
• !采用 GPL-3.0 许可证，这是一种 copyleft 许可证，会影响衍生代码的分发方式。

收录于专题

标签

常见问题

FigmaToCode 是什么？

一款 Figma 插件，可将选中的设计本地转换为 HTML、React、Svelte、Tailwind、Flutter 或 SwiftUI 代码。 Figma to Code 是一款 Figma 插件，可将选中的 Frame、组件、编组或单个图层转换为 Web 和原生平台的起步代码。输出目标包括 HTML、React (JSX)、Svelte、styled-components、Tailwind CSS（支持 Tailwind 3 和 4 语法）、Flutter Widget 和 SwiftUI View，并可将生成的代码与本地图片资源打包成 Vite、Next.js、Flutter 或 SwiftUI 的小型起始项目。

FigmaToCode 可以免费使用吗？用的什么许可证？

FigmaToCode 以 GPL-3.0 许可证开源。用于商业产品前，请先确认许可证条款。

FigmaToCode 还在维护吗？

半年内有更新。FigmaToCode 最近一次提交是在 2026年8月5日。

FigmaToCode 适合用来做什么？

将设计稿中完成的组件作为首版实现交给开发者。 在接入业务逻辑前，用 Tailwind 或 React 快速搭建页面片段原型。 基于现有移动端设计生成 Flutter 或 SwiftUI 的起步代码。 在不允许将设计文件发送到外部 AI 或云服务的环境中使用。

FigmaToCode 怎么安装和运行？

从 Figma 社区安装免费插件 在 Figma 中选择画框、组件、组或图层并运行插件，然后选择目标格式

在哪里获取 FigmaToCode？

源代码和安装说明在 GitHub 上：https://github.com/bernaferrari/FigmaToCode