vibefigma

VibeFigma - Figma から React への変換ツール

vibefigma CLI を使用して、Figma のデザインを Tailwind CSS を使った React コンポーネントに変換します。

使用方法

対話モード（初めて使用する方におすすめ）

npx vibefigma --interactive

Figma の URL、アクセストークン、出力先のパスを指定するよう求められます。

直接コマンドを実行

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

環境変数を使用

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

.env ファイルを使用

プロジェクトのルートにある .env ファイルに Figma のアクセストークンを追加できます。

FIGMA_TOKEN=your_token_here

その後、次を実行します。

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

注：トークンが設定されていない場合、vibefigma はエラーを返します。その場合に限り、トークンが必要であることをユーザーに伝えてください。

よく使うオプション

オプション	説明
-t, --token <token>	Figma のアクセストークン
-c, --component <path>	出力先のパス（デフォルト：./src/components/[Name].tsx）
-a, --assets <dir>	アセットディレクトリ（デフォルト：./public）
-f, --force	確認せずに既存のファイルを上書き
--no-tailwind	通常の CSS を代わりに生成

Figma アクセストークンの取得方法

1. Figma のアカウント設定に移動します
2. Personal Access Tokens までスクロールします
3. Generate new token をクリックし、名前を付けて、すぐにコピーします
4. .env ファイルに安全に保存するか、--token フラグで渡します

ワークフロー

1. 変換するフレームまたはコンポーネントのノードを選択した状態で、Figma の URL を取得します
2. 出力先のパスに出力ファイルがすでに存在するか確認します（デフォルト：./src/components/[Name].tsx、またはユーザー指定のパス）
3. ファイルが存在する場合は、上書きする前にユーザーに確認し、その後 --force フラグを使用します
4. 次を実行します：npx vibefigma "<URL>" -c <output-path>（上書きの確認が取れている場合は --force を追加します）
   • ユーザーはトークンを .env または --token フラグで設定します
5. vibefigma がトークンエラーを返した場合は、トークンが必要であることをユーザーに伝えます
6. 生成されたコンポーネントを確認します
7. コードのクリーンアップが必要な場合は、references/responsive-cleanup.md を参照して、レスポンシブ対応と本番環境での使用に適した状態にします

出力

VibeFigma は次を生成します。

• Tailwind CSS クラスを使った React コンポーネント（.tsx）
• アセットディレクトリ内のアセット（画像／アイコン）

注意事項

• 最良の結果を得るには、Figma URL で特定のノード／フレームを必ず選択してください
• 生成されたコードは、本番環境で使用する前に手動でクリーンアップが必要な場合があります
• レスポンシブデザインのパターンについては、references/responsive-cleanup.md を参照してください