Show HN: Open-source Figma design to code

Summary

VibeFigma - Figma to React Converter Transform your Figma designs into production-ready React components with Tailwind CSS automatically. VibeFigma leverages the official Figma API to accurately extract design information and generate clean, maintainable code. Demo Video Features Official Figma API Integration - Direct integration with Figma's API for accurate design extraction - Direct integration with Figma's API for accurate design extraction React Component Generation - Convert Figma frames to React/TypeScript components - Convert Figma frames to React/TypeScript components Tailwind CSS Support - Automatic Tailwind class generation (enabled by default) - Automatic Tailwind class generation (enabled by default) Code Optimization - Optional AI-powered code cleanup Step 1: 🔑 Getting a Figma Access Token Go to Figma Account Settings Scroll to Personal Access Tokens Click Generate new token Give it a name and click Generate Copy the token (you won't see it again!) Set it as an environment variable: # Linux/Mac export FIGMA_TOKEN=your_token_here # Windows (PowerShell) $env :FIGMA_TOKEN= " your_token_here " # Windows (CMD) set FIGMA_TOKEN=your_token_here Step 2: Quick Start Using npx (Recommended) No installation required! Just run: npx vibefigma [figma-url] --token YOUR_FIGMA_TOKEN # Example with a public design: npx vibefigma " https://www.figma.com/design/rZbJ7EQucq6UCkqlIl1a6P/Personal-Portfolio-Website-Template--Community?node-id=7-191 " --token YOUR_TOKEN Using Environment Variable Set your Figma token once: export FIGMA_TOKEN=your_figma_access_token npx vibefigma " https://www.figma.com/design/YOUR_FILE_ID " Using our CLI npx vibefigma --interactive This will prompt you for: Figma URL Access token (if not set in environment) Output paths Advanced Usage Basic Usage # Convert a Figma design to React component npx vibefigma " https://www.figma.com/design/YOUR_FILE_ID?node-id=X-Y " Custom Output Paths # Save to specific directory npx vibefigma [url] -c ./src/compone...