VibeFigma

VibeFigma 是一个开源的 Figma 到 React 转换器，无需依赖 AI，直接通过官方 Figma API 提取设计数据，生成结构清晰、可直接用于项目的 React（TypeScript）组件和 Tailwind CSS 样式。

它的目标很明确：减少 UI 开发中的重复劳动，让设计师与开发者之间的协作更高效。

为什么选择 VibeFigma？

市面上不少“Figma 转代码”工具依赖大模型生成模糊或不可维护的 HTML/CSS。而 VibeFigma 采取更可靠的方式：

• 不使用 AI 生成核心代码，而是基于 Figma 的矢量结构和布局信息，精确还原层级与样式
• 输出标准 React 组件，支持 TypeScript 类型定义
• 默认集成 Tailwind CSS，生成的类名符合最佳实践，易于定制和复用
• 完全开源，代码透明，可审计、可自托管

注：项目提供“可选的 AI 驱动代码清理”功能，但核心转换逻辑完全基于规则，确保稳定性和可预测性。

快速开始

VibeFigma 提供三种使用方式，满足不同场景需求：

1. 交互式 CLI（推荐新手）

npx vibefigma --interactive

运行后，按提示依次输入：

• Figma 设计文件 URL
• Figma 访问令牌
• 本地输出路径

全程引导，零配置上手。

2. 单行命令（适合脚本集成）

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

3. 环境变量（适合 CI/CD 或频繁使用）

export FIGMA_TOKEN=your_figma_access_token
npx vibefigma "https://www.figma.com/design/YOUR_FILE_ID"

如何获取 Figma 访问令牌？

1. 登录 Figma，进入 Account Settings（账户设置）
2. 滚动至 Personal Access Tokens（个人访问令牌）
3. 点击 Generate new token
4. 输入名称（如 “VibeFigma”），点击 Generate
5. 立即复制并保存——令牌仅显示一次！

⚠️ 注意：请勿将令牌提交到公开代码库。建议在本地或私有环境中使用。

核心功能

• 官方 Figma API 集成
  直接调用 Figma 官方接口，确保设计数据准确无损，支持最新 Figma 特性（如自动布局、变体等）
• React/TypeScript 组件输出
  每个画框（Frame）生成独立组件文件，保留命名结构，便于组织大型项目
• Tailwind CSS 默认支持
  自动将颜色、间距、字体等样式转换为语义化 Tailwind 类，避免冗余内联样式
• 可选 AI 优化（非必需）
  在基础转换完成后，可启用 AI 辅助进行代码格式化或冗余清理，但不影响主流程稳定性

适用场景

• 前端团队快速搭建 UI 原型
• 设计系统落地时批量生成组件
• 个人项目从设计稿到代码的无缝衔接
• 教学演示：展示 Figma 与 React 的映射关系