vibefigma

Convert Figma designs into React components with Tailwind CSS using the vibefigma CLI.

Usage

Interactive Mode (Recommended for first-time users)

npx vibefigma --interactive

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

Direct Command

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

With Environment Variable

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

Using .env File

The user can add their Figma access token to a .env file in their project root:

FIGMA_TOKEN=your_token_here

Then run:

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.

Common Options

| -t, --token <token> | Figma access token

| -c, --component <path> | Output path (default: ./src/components/[Name].tsx)

| -a, --assets <dir> | Assets directory (default: ./public)

| --no-tailwind | Generate regular CSS instead

Getting a Figma Access Token

• 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

Workflow

• Get Figma URL with specific node selected (frame/component to convert)

• Run: npx vibefigma "<URL>" -c <output-path> (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

Output

VibeFigma generates:

• React component (.tsx) with Tailwind CSS classes

• Assets (images/icons) in the assets directory

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