Figma to Code Plugin

将 Figma 设计转换为代码的插件。

🚀 快速安装

自动安装（推荐）

使用一行命令安装（通过 npm CDN）：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/install.sh | bash

💡 脚本会自动下载并安装到 ~/figma-to-code-plugin

或使用 wget：

wget -qO- https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/install.sh | bash

或使用 jsdelivr CDN：

curl -fsSL https://cdn.jsdelivr.net/npm/@mico_fe/figma-to-code-plugin@latest/install.sh | bash

安装选项

跳过确认，强制覆盖安装：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/install.sh | bash -s -- -y

或：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/install.sh | bash -s -- --force

查看帮助：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/install.sh | bash -s -- --help

卸载

使用卸载脚本：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/uninstall.sh | bash

或手动删除：

rm -rf ~/figma-to-code-plugin

卸载选项

跳过确认，强制卸载：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/uninstall.sh | bash -s -- -y

或：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/uninstall.sh | bash -s -- --force

查看帮助：

curl -fsSL https://unpkg.com/@mico_fe/figma-to-code-plugin@latest/uninstall.sh | bash -s -- --help

📦 从 npm 安装

npm install -g @mico_fe/figma-to-code-plugin

🛠️ 开发

克隆仓库后，在本地开发：

# 安装依赖
pnpm install

# 开发模式（热重载）
pnpm dev

# 构建开发版本
pnpm build:dev

# 构建生产版本
pnpm build:prod

🔧 在 Figma 中使用

方法 1: 使用安装脚本（推荐）

运行安装脚本后，在 Figma 中：

1. 打开 Figma 桌面应用
2. 菜单：Plugins > Development > Import plugin from manifest...
3. 选择：~/figma-to-code-plugin/manifest.json

方法 2: 开发模式

开发时使用本地构建：

1. 在项目中运行 pnpm build:dev 或 pnpm dev
2. 在 Figma 中导入 manifest.json（项目根目录）
3. 插件会自动加载 dist/ 目录下的文件

📁 项目结构

apps/plugin/
├── dist/              # 构建输出目录
│   ├── code.js       # 插件主逻辑
│   └── index.html    # 插件 UI
├── plugin-src/       # 插件源代码
│   └── code.ts       # 主入口
├── ui-src/           # UI 源代码
│   ├── App.tsx       # React 应用
│   └── main.tsx      # UI 入口
├── manifest.json     # Figma 插件配置
├── install.sh        # 安装脚本
└── package.json      # 包配置

🧪 构建脚本

• pnpm dev - 开发模式，监听文件变化并自动重新构建
• pnpm build:dev - 构建开发版本
• pnpm build:prod - 构建生产版本（优化和压缩）
• pnpm build:main - 仅构建插件主逻辑
• pnpm build:ui:dev - 仅构建 UI（开发模式）
• pnpm build:ui:prod - 仅构建 UI（生产模式）

📝 发布

# 构建生产版本
pnpm build:prod

# 发布到 npm
npm publish