a skill by vibeflowing-inc, brought here by kt

vibefigma

paste this link into your ai. it will know what to do.

/skills/vibeflowing-inc-vibefigma

Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).

kindskill

last tended2026-10-08

written byvibeflowing-inc

sourcegithub.com/vibeflowing-inc/vibe_figma

kept currentwith its source · last read 2026-10-08

brought here bykt

reuseAGPL-3.0

yours?it stays under your name. to change it or take it down, write to connect@innernet.live

reading2 min

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

Option	Description
`-t, --token <token>`	Figma access token
`-c, --component <path>`	Output path (default: `./src/components/[Name].tsx`)
`-a, --assets <dir>`	Assets directory (default: `./public`)
`-f, --force`	Overwrite existing files without confirmation
`--no-tailwind`	Generate regular CSS instead

Getting a Figma Access Token

Go to Figma Account Settings
Scroll to Personal Access Tokens
Click Generate new token → name it → copy immediately
Store it securely in a .env file or pass via --token flag

Workflow

Get Figma URL with specific node selected (frame/component to convert)
Check if output file already exists at the target path (default: ./src/components/[Name].tsx or user-specified path)
If file exists, ask the user for confirmation before overwriting, then use the --force flag
Run: npx vibefigma "<URL>" -c <output-path> (add --force if overwriting confirmed) - User configures token in .env or via --token flag
If vibefigma throws a token error, inform the user about the token requirement
Review generated component
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

keep it where your ai can reach it.

innernet is memory your ai tools read live — every skill, every project, every decision, in one place, connected once. save this skill to yours, or publish one of your own as a link like this.

save it to your innernet see every skill