VibeFigma – Figma から React コンポーネントへの変換ツール

Figma のデザインを、Tailwind CSS を自動で適用した本番環境向けの React コンポーネントに変換します。
VibeFigma は公式 Figma API を活用し、設計情報を正確に抽出してクリーンかつ保守性の高いコードを生成します。

デモ動画

(ここに動画リンクまたは埋め込みコードを挿入してください)

主な機能

• 公式 Figma API 統合 – 正確なデザイン抽出を実現する直接統合
• React コンポーネント生成 – Figma フレームを React/TypeScript コンポーネントへ変換
• Tailwind CSS サポート – デフォルトで有効になっている Tailwind クラスの自動生成
• コード最適化 – 必要に応じて AI がコードクリーンアップ

はじめに

ステップ 1: Figma アクセストークンを取得

1. Figma のアカウント設定 → Personal Access Tokens に移動
2. 「Generate new token」をクリックし、名前を付けて「Generate」を押す
3. 生成されたトークンをコピー（再表示はできません）

環境変数として設定します:

# Linux/Mac
export FIGMA_TOKEN=your_token_here

# Windows (PowerShell)
$env:FIGMA_TOKEN="your_token_here"

# Windows (CMD)
set FIGMA_TOKEN=your_token_here

ステップ 2: クイックスタート

npx

を使用（推奨）

npx vibefigma [figma-url] --token YOUR_FIGMA_TOKEN

公開デザインの例:

npx vibefigma \
  "https://www.figma.com/design/rZbJ7EQucq6UCkqlIl1a6P/Personal-Portfolio-Website-Template--Community?node-id=7-191" \
  --token YOUR_TOKEN

環境変数を使用

export FIGMA_TOKEN=your_figma_access_token
npx vibefigma "https://www.figma.com/design/YOUR_FILE_ID"

インタラクティブ CLI を利用

npx vibefigma --interactive

以下の入力が求められます:

• Figma URL
• アクセストークン（環境変数に設定されていない場合）
• 出力パス

高度な使い方

基本的な使用例

# Figma デザインを React コンポーネントへ変換
npx vibefigma "https://www.figma.com/design/YOUR_FILE_ID?node-id=X-Y"

カスタム出力パス

特定のディレクトリに保存:

npx vibefigma [url] -c ./src/components -a ./public/assets

特定ファイルに保存:

npx vibefigma [url] -c ./src/components/Hero.tsx

Tailwind CSS を無効化

Tailwind ではなく通常の CSS を生成:

npx vibefigma [url] --no-tailwind

高度なオプション

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

コマンドラインオプション

Usage: vibefigma [options] [url]

Figma デザインを React コンポーネントへ変換

Arguments:
  url                           Figma ファイル/ノードの URL

Options:
  -V, --version                 バージョン番号を表示
  -t, --token <token>           Figma アクセストークン（FIGMA_TOKEN 環境変数を上書き）
  -u, --url <url>               Figma ファイル/ノードの URL
  -c, --component <path>        コンポーネント出力パス (デフォルト: ./src/components/[ComponentName].tsx)
  -a, --assets <dir>            アセットディレクトリ (デフォルト: ./public)
  --no-tailwind                 Tailwind CSS を無効化（デフォルトで有効）
  --optimize                    コンポーネントを最適化
  --clean                       AI コードクリーンアップを使用（GOOGLE_GENERATIVE_AI_API_KEY が必要）
  --no-classes                  CSS クラスを生成しない
  --no-absolute                 絶対位置指定を行わない
  --no-responsive               レスポンシブデザインを無効化
  --no-fonts                    フォントを含めない
  --interactive                 インタラクティブモードを強制
  -h, --help                    コマンドヘルプを表示

API サーバー

VibeFigma は REST API サーバーも提供しています。

# 依存関係をインストール
bun install

# 開発サーバーを起動
bun run dev

サーバーは

http://localhost:3000

設定

.env

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

完全な API ドキュメントは

API.md

CLI 開発

# 開発モードで CLI を実行
bun run dev:cli

# CLI のビルド
bun run build:cli

# ローカルで CLI をテスト
bun run cli -- --help

コントリビューション

ご協力は大歓迎です！Pull Request をぜひ送ってください。

参考文献

このプロジェクトには、Salakhutdinov Salavat 氏の

css-to-tailwindcss

ライセンス

本プロジェクトは Functional Source License, Version 1.1 (FSL‑1.1‑MIT) に基づいてライセンスされています。
詳細については

LICENSE

NOTICE