mcpField
V
vibefigma

vibefigma

github.com/vibeflowing-incDesign & UI85083 installsUpdated 3w ago
Repository

About vibefigma

VibeFigma is a CLI for turning selected Figma designs into React components, with Tailwind CSS by default. It also exports design assets, and offers regular CSS as an option.

Key features

  1. 01Converts Figma nodes into React components
  2. 02Generates Tailwind CSS classes
  3. 03Exports images and icons
  4. 04Supports regular CSS output
  5. 05Configurable component and asset paths

Use cases

  1. 01Creating React components from selected Figma frames
  2. 02Exporting design assets into a project
  3. 03Generating components with regular CSS instead of Tailwind

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vibeflowing-inc/vibe_figma --skill vibefigma

After installing, type/vibefigmain Claude Code to confirm it loaded.

Bundled filesreferences/responsive-cleanup.md

Details

From the project README

VibeFigma - Figma to React Converter

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

OptionDescription
-t, --token <token>Figma access token
-c, --component <path>Output path (default: ./src/components/[Name].tsx)
-a, --assets <dir>Assets directory (default: ./public)
-f, --forceOverwrite existing files without confirmation
--no-tailwindGenerate regular CSS instead

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

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

Comments

Markdown supported