vibefigma

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

VibeFigma - Figma to React Converter

VibeFigma - Figma转React转换器

Convert Figma designs into React components with Tailwind CSS using the

vibefigma

CLI.

使用

vibefigma

CLI将Figma设计转换为搭配Tailwind CSS的React组件。

Usage

使用方法

Interactive Mode (Recommended for first-time users)

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

bash

npx vibefigma --interactive

Prompts for Figma URL, access token, and output paths.

bash

npx vibefigma --interactive

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

Direct Command

直接命令

bash

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

bash

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

With Environment Variable

使用环境变量

bash

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

bash

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

Using .env File

使用.env文件

The user can add their Figma access token to a

.env

file in their project root:

env

FIGMA_TOKEN=your_token_here

Then run:

bash

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

Note: If the token is not configured, vibefigma will throw an error. Only then inform the user about the token requirement.

用户可在项目根目录的

.env

文件中添加Figma访问令牌：

env

FIGMA_TOKEN=your_token_here

然后运行：

bash

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

注意：如果未配置令牌，vibefigma会抛出错误，此时需告知用户令牌的要求。

Common Options

常用选项

Option	Description
`-t, --token <token>`	Figma access token
`-c, --component <path>`	Output path (default: `./src/components/[Name].tsx` )
`-a, --assets <dir>`	Assets directory (default: `./public` )
`-f, --force`	Overwrite existing files without confirmation
`--no-tailwind`	Generate regular CSS instead

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

Getting a Figma Access Token

获取Figma访问令牌

Go to Figma Account Settings
Scroll to Personal Access Tokens
Click Generate new token → name it → copy immediately
Store it securely in a
```
.env
```
file or pass via
```
--token
```
flag

前往Figma账户设置
滚动到个人访问令牌部分
点击生成新令牌 → 命名后立即复制
将令牌安全存储在
```
.env
```
文件中，或通过
```
--token
```
参数传递

Workflow

工作流程

Get Figma URL with specific node selected (frame/component to convert)
Check if output file already exists at the target path (default:
```
./src/components/[Name].tsx
```
or user-specified path)
If file exists, ask the user for confirmation before overwriting, then use the
```
--force
```
flag
Run:
```
npx vibefigma "<URL>" -c <output-path>
```
(add
```
--force
```
if overwriting confirmed)
- User configures token in .env or via --token flag
If vibefigma throws a token error, inform the user about the token requirement
Review generated component
If code needs cleanup, see
```
references/responsive-cleanup.md
```
for making code responsive and production-ready

获取选中特定节点/框架的Figma URL（要转换的目标）
检查目标路径下是否已存在输出文件（默认路径：
```
./src/components/[Name].tsx
```
或用户指定路径）
如果文件已存在，先询问用户是否确认覆盖，之后可使用
```
--force
```
参数
运行：
```
npx vibefigma "<URL>" -c <输出路径>
```
（如果确认覆盖，添加
```
--force
```
参数）
- 用户通过.env文件或--token参数配置令牌
如果vibefigma抛出令牌错误，告知用户令牌的要求
检查生成的组件
如果代码需要清理，可查看
```
references/responsive-cleanup.md
```
以优化代码的响应式和生产就绪性

Output

输出内容

VibeFigma generates:

React component (
```
.tsx
```
) with Tailwind CSS classes
Assets (images/icons) in the assets directory

VibeFigma会生成：

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

Notes

注意事项

Always select a specific node/frame in Figma URL for best results
Generated code may need manual cleanup for production use
See
```
references/responsive-cleanup.md
```
for responsive design patterns

为获得最佳效果，请确保Figma URL中选中了特定的节点/框架
生成的代码可能需要手动清理才能用于生产环境
可查看
```
references/responsive-cleanup.md
```
了解响应式设计模式