vibefigma

VibeFigma - Figma 转 React 转换器

使用 vibefigma CLI，通过 Tailwind CSS 将 Figma 设计转换为 React 组件。

用法

交互模式（推荐首次使用的用户使用）

npx vibefigma --interactive

系统会提示输入 Figma URL、访问令牌和输出路径。

直接运行命令

npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y" --token FIGMA_TOKEN

使用环境变量

export FIGMA_TOKEN=your_token
npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y"

使用 .env 文件

用户可以将 Figma 访问令牌添加到项目根目录中的 .env 文件：

FIGMA_TOKEN=your_token_here

然后运行：

npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y"

注意：如果未配置令牌，vibefigma 会抛出错误。只有在这种情况下，才告知用户需要令牌。

常用选项

选项	说明
-t, --token <token>	Figma 访问令牌
-c, --component <path>	输出路径（默认：./src/components/[Name].tsx）
-a, --assets <dir>	资源目录（默认：./public）
-f, --force	无需确认即可覆盖现有文件
--no-tailwind	改为生成常规 CSS

获取 Figma 访问令牌

1. 前往 Figma 账号设置
2. 滚动到 Personal Access Tokens
3. 点击 Generate new token → 为令牌命名 → 立即复制
4. 将其安全地存储在 .env 文件中，或通过 --token 标志传递

工作流

1. 获取已选中特定节点的 Figma URL（要转换的画框/组件）
2. 检查目标路径下是否已存在输出文件（默认：./src/components/[Name].tsx，或用户指定的路径）
3. 如果文件已存在，覆盖前先征求用户确认，然后使用 --force 标志
4. 运行：npx vibefigma "<URL>" -c <output-path>（确认覆盖时添加 --force）
   • 用户在 .env 中配置令牌，或通过 --token 标志传递令牌
5. 如果 vibefigma 抛出令牌错误，告知用户需要令牌
6. 检查生成的组件
7. 如果代码需要清理，请参阅 references/responsive-cleanup.md，了解如何使代码具备响应式并达到生产就绪状态

输出

VibeFigma 会生成：

• 带有 Tailwind CSS 类的 React 组件（.tsx）
• 存放在资源目录中的资源（图片/图标）

注意事项

• 为获得最佳效果，始终在 Figma URL 中选择特定节点/画框
• 生成的代码在用于生产环境前可能需要手动清理
• 请参阅 references/responsive-cleanup.md，了解响应式设计模式