vibe_figma

VibeFigma - Figma to React Converter

Want to skip the setup? Try VibeFigma instantly in the cloud - Import from Figma is built directly into VibeFlow UI. No installation needed, just paste your Figma URL and go. Transform your Figma designs into production-ready React components with Tailwind CSS automatically.

Quick Start

VibeFigma can be used in multiple ways:

1. Using our CLI (Interactive - Easiest!)

npx vibefigma --interactive

The CLI will guide you through:

• Entering your Figma URL
• Providing your access token
• Choosing output paths

2. Claude Code Skill

For Claude Code, install the skill to enable Figma to React conversion directly within your Claude Code environment.

npx skills add vibeflowing-inc/vibe_figma --skill vibefigma

3. Direct Command (Fast)

npx vibefigma "https://www.figma.com/design/4i8Tp5btFPRqtkYXplnfT6/50-Web-Sign-up-log-in-designs--Community-?node-id=26-2944&t=d8ZfhZOwcLuUz0Jz-4" --token YOUR_TOKEN

# Add --force to overwrite existing files without confirmation
npx vibefigma "https://www.figma.com/design/4i8Tp5btFPRqtkYXplnfT6/50-Web-Sign-up-log-in-designs--Community-?node-id=26-2944&t=d8ZfhZOwcLuUz0Jz-4" --token YOUR_TOKEN --force

3. Using Environment Variable

Set your Figma token once:

export FIGMA_TOKEN=your_figma_access_token
npx vibefigma "https://www.figma.com/design/4i8Tp5btFPRqtkYXplnfT6/50-Web-Sign-up-log-in-designs--Community-?node-id=26-2944&t=d8ZfhZOwcLuUz0Jz-4"

Getting a Figma Access Token

1. Go to Figma Account Settings
2. Scroll to Personal Access Tokens
3. Click Generate new token
4. Give it a name and click Generate
5. Copy the token (you won't see it again!)
6. Store it securely in a .env file or pass via --token flag

Features

• Official Figma API Integration - Direct integration with Figma's API for accurate design extraction
• React Component Generation - Convert Figma frames to React/TypeScript components
• Tailwind CSS Support - Automatic Tailwind class generation (enabled by default)
• Code Optimization - Optional AI-powered code cleanup

Advanced Usage

Basic Usage

# Convert a Figma design to React component
npx vibefigma "https://www.figma.com/design/4i8Tp5btFPRqtkYXplnfT6/50-Web-Sign-up-log-in-designs--Community-?node-id=26-2944&t=d8ZfhZOwcLuUz0Jz-4"

Custom Output Paths

# Save to specific directory
npx vibefigma [url] -c ./src/components -a ./public/assets

# Save to specific file
npx vibefigma [url] -c ./src/components/Hero.tsx

Disable Tailwind CSS

# Generate regular CSS instead of Tailwind
npx vibefigma [url] --no-tailwind

Skip Overwrite Confirmations

# Overwrite existing files without prompting (useful when files already exist)
npx vibefigma [url] --force

# Example with specific output path
npx vibefigma [url] -c ./src/components/Hero.tsx --force

Advanced Options

npx vibefigma [url] \
  --token YOUR_TOKEN \
  --component ./src/components \
  --assets ./public/assets \
  --optimize \
  --clean

Command Options

…

API Server

This project also includes a REST API server:

# Install dependencies
bun install

# Run development server
bun run dev

# Server runs on http://localhost:3000

Configuration

Environment Variables

Create a .env file:

GOOGLE_GENERATIVE_AI_API_KEY=your_google_ai_key
PORT=3000
HOST=0.0.0.0
CORS_ORIGIN=*

API Usage

The project includes a REST API for Figma to React conversion:

POST /v1/api/vibe-figma

See API.md for full API documentation.

CLI Development

# Run CLI in development mode
bun run dev:cli

# Build CLI
bun run build:cli

# Test CLI locally
bun run cli -- --help

Demo Video

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgments

This project includes code derived from css-to-tailwindcss by Salakhutdinov Salavat, licensed under the MIT License.

License

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). See the LICENSE file for the full license text.

See the NOTICE file for details about third-party code used in this project.

Contacts

VibeFigma is the open-source core powering VibeFlow UI. For custom work or enterprise needs, reach out to Alessia & Elia directly:
[email protected]