vibefigma-figma-to-react
OfficialConvert Figma designs into React components
Software Engineering#typescript#react#figma#component generation#tailwind#design to code#ui conversion
AuthorAradotso
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Converting Figma UI designs into production-ready React components is slow and error-prone when developers must manually recreate layout, typography, and styling details.
Core Features & Use Cases
- Figma-to-React conversion: Extracts design structure via the official Figma API and generates TypeScript/React component code from a Figma URL (including node selection).
- Tailwind-ready output: Produces React components styled with Tailwind CSS by default for faster integration into modern frontends.
- Practical use case: Turn a Figma landing page frame (or a specific frame/node like a hero or pricing section) into a reusable React component, then wire it into a Next.js/Vite project.
Quick Start
Tell the system to run npx vibefigma on your Figma URL and write the generated Tailwind React component to your chosen component path, using your FIGMA_TOKEN for access.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: vibefigma-figma-to-react Download link: https://github.com/Aradotso/design-skills/archive/main.zip#vibefigma-figma-to-react Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.