开源 Figma 插件

把 Figma 设计,
导出为可预览的 HTML

在 Figma 中选择设计稿,生成可预览的 HTML。下载最新构建包,使用本地 manifest 即可导入。

推送到 master 后自动更新 无需额外安装器
FIGMATOCODE / RELEASE ZIP

FigmaToCode

最新插件构建包

可下载
FigmaToCode 安装包
manifest.json 插件清单
apps/plugin/dist/code.js 插件逻辑
apps/plugin/dist/index.html 插件界面
解压后选择根目录的 manifest.json
BUILD SOURCE master → latest.zip

LATEST BUILD

下载当前最新构建

构建 读取中… 更新于

下载 ZIP

QUICK START

三步开始使用

插件从本地文件导入,整个过程只需准备下载的 ZIP 安装包。

  1. 01

    下载并解压

    点击页面上的下载按钮。解压 ZIP 后,找到最外层的 manifest.json。

    FigmaToCode 安装包 最新构建
  2. 02

    从 manifest 导入

    在 Figma 桌面版的插件开发菜单中,选择“从 manifest 导入”,再选中该文件。

    Plugins › Development › Import from manifest
  3. 03

    运行插件

    回到设计文件,在 Development 列表中找到 FigmaToCode 并启动。

    FigmaToCode 已添加到 Development

发布页会在主分支更新后自动生成新安装包;本地导入的开发版需要重新下载并在 Figma 中刷新。

GOOD TO KNOW

常见问题

下载包什么时候更新?

每次代码推送到 GitHub 的 master 主分支后,Actions 会重新构建插件包并更新本页的下载链接。

安装后的插件会自动升级吗?

本页提供的是本地导入的开发版本。页面更新后,请下载新安装包,并在 Figma 桌面版中重新导入或刷新插件。

中国内地可以访问吗?

本站使用 Cloudflare Pages 静态托管,内地访问效果受网络线路影响。若需要稳定的内地访问,可配置已备案域名并部署到国内对象存储或 CDN。

下载后遇到问题怎么办?

请到 GitHub 仓库提交 Issue,并附上 Figma 版本、操作步骤和错误信息,方便定位问题。