skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

vibefigma-figma-to-react

Convert Figma designs into React components with Tailwind CSS via the Figma API.

4|Updated May 16, 2026
Search Tags:#typescript#react#code generation#cli#figma#tailwind css#design to code
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill vibefigma-figma-to-react-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vibefigma-figma-to-react
Source: https://github.com/reason-machines/design-skills/tree/main/skills/vibefigma-figma-to-react
Command: npx skills add https://github.com/reason-machines/design-skills --skill vibefigma-figma-to-react-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vibefigma.

What problem does it solve? Manually translating Figma designs into React code is slow and error-prone. This Skill automates the conversion of Figma frames into TypeScript React components with Tailwind CSS, including asset downloads, using the official Figma API. ## Core Features & Use Cases - CLI Conversion: Run npx vibefigma <figma-url> to generate a component file and download assets, with flags for optimization, responsive design, fonts, and positioning. - REST API Server: Expose a POST endpoint for programmatic conversions in CI/CD pipelines or batch scripts. - AI Code Cleaning: Optionally refine generated code with the --clean flag using a Google Generative AI key. - Use Case: A developer copies a Figma frame link for a login form, runs the CLI with a component output path, and receives a ready-to-review LoginForm.tsx with Tailwind classes and downloaded image assets. ## Quick Start Convert this Figma URL into a React component with Tailwind CSS and save it to ./src/components/Hero.tsx using my FIGMA_TOKEN environment variable.

Frequently Asked Questions about vibefigma-figma-to-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Figma design to a React component?▼

Run npx vibefigma with your Figma URL containing the node-id parameter, plus a Figma access token via the FIGMA_TOKEN environment variable or --token flag. The CLI generates a TypeScript React component with Tailwind CSS and downloads associated assets.

How to generate React components from Figma without Tailwind CSS?▼

Pass the --no-tailwind flag to the vibefigma CLI to generate components with regular CSS or inline styles instead of Tailwind classes. You can combine this with --component to set the output file path.

Does Figma to React conversion require an API token?▼

Yes, a Figma Personal Access Token is required to access the Figma API. Generate one in your Figma settings, then set it as the FIGMA_TOKEN environment variable or pass it with the --token flag.

Why does Figma conversion fail with node not found error?▼

The error occurs when the Figma URL lacks a valid node-id parameter. Copy the link directly from Figma by right-clicking the frame and selecting Copy link, which produces the correct format with file ID and node-id.

Can I automate Figma to React conversion in CI/CD?▼

Yes, run the CLI in a GitHub Actions workflow with FIGMA_TOKEN stored as a secret, using the --force flag to overwrite existing components. The skill also provides a REST API server for programmatic conversions.

Related Skills

Explore More Design & Creative Skills→
double-coding-labdouble-coding-lab
4

pp-doctor

Inspects Figma design files for naming, layout, structure, and asset issues before code generation.

Official
Advanced
xtonextone
3

nextjs-react-implementation

Generate Next.js/React components with TS types, Tailwind styling, Vitest, and Storybook from design specs.

Official
Advanced
RebornQRebornQ
52

trellis-check

Run spec compliance, lint, type-check, and test suites on new changes.

Community
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate