VibeFigma - Figma to React Converter

vibefigma

Usage

Interactive Mode (Recommended for first-time users)

npx vibefigma --interactive

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

.env

FIGMA_TOKEN=your_token_here

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

Common Options

-t, --token <token>

-c, --component <path>

./src/components/[Name].tsx

-a, --assets <dir>

./public

-f, --force

--no-tailwind

Getting a Figma Access Token

1. Go to Figma Account Settings
2. Scroll to Personal Access Tokens
3. Click Generate new token → name it → copy immediately
4. Store it securely in a

   .env

   file or pass via

   --token

   flag

Workflow

1. Get Figma URL with specific node selected (frame/component to convert)
2. Check if output file already exists at the target path (default:

   ./src/components/[Name].tsx

   or user-specified path)
3. If file exists, ask the user for confirmation before overwriting, then use the

   --force

   flag
4. Run:

   npx vibefigma "<URL>" -c <output-path>

   (add

   --force

   if overwriting confirmed)
   • User configures token in .env or via --token flag
5. If vibefigma throws a token error, inform the user about the token requirement
6. Review generated component
7. If code needs cleanup, see

   references/responsive-cleanup.md

   for making code responsive and production-ready

Output

• 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