🎨 BlackyFigma

Transform your Figma designs into production-ready React components with Tailwind CSS automatically.

BlackyFigma leverages the official Figma API to accurately extract design information and generate clean, maintainable code. It's not just a converter; it's a bridge between your design and your code.

---

🚀 Installation

From GitHub Packages

1. Create or edit your .npmrc file in your home directory or project root:

@xgauravyaduvanshii:registry=https://npm.pkg.github.com

2. Install globally using your favorite package manager:

npm install -g @xgauravyaduvanshii/blackyfigma

Quick Run with npx

The easiest way to get started without installation:

npx @xgauravyaduvanshii/blackyfigma --interactive

---

✨ Features

• 🎯 Official Figma API Integration - Direct integration for maximum accuracy.
• ⚛️ React & TypeScript - Generates modern, typed components ready for production.
• 🎨 Tailwind CSS - Automatic Tailwind class generation with responsive support.
• 🤖 AI-Powered Optimization - Optional Gemini AI cleanup for human-like code quality.
• 📦 Project Scaffolding - Automatically creates a complete React project structure if needed.

---

🛠 Getting Started

Step 1: 🔑 Get Your Figma Access Token

1. Go to your Figma Account Settings.
2. Scroll to Personal Access Tokens.
3. Click Generate new token.
4. Give it a descriptive name and copy the token safely.

Step 2: Set Environment Variable (Optional)

Save your token to avoid entering it every time:

# Linux/Mac
export FIGMA_TOKEN=your_token_here

# Windows (PowerShell)
$env:FIGMA_TOKEN="your_token_here"

---

💻 Usage

Interactive Mode (Recommended)

This mode will guide you through the process and securely save your Gemini API Key:

blackyfigma --interactive

Direct Command

blackyfigma "https://www.figma.com/design/YOUR_URL" --token YOUR_TOKEN

---

⚙️ Advanced Configuration

Option	Description	Default
-t, --token	Figma access token	env.FIGMA_TOKEN
-c, --component	Component output path	./src/components
-a, --assets	Assets directory	./public
--no-tailwind	Disable Tailwind CSS	false
--optimize	AI-powered code optimization	false
--clean	Use AI code cleaner	false
--interactive	Force interactive mode	false

---

🌐 API Server

BlackyFigma also comes with a built-in REST API server.

# Start the server
bun run dev

# POST /v1/api/blacky-figma

Refer to API.md for full documentation.

---

🛠 Development

# Dev Mode
bun run dev:cli

# Build
bun run build:cli

# Publish (GitHub Packages)
npm login --scope=@xgauravyaduvanshii --registry=https://npm.pkg.github.com
npm publish

---

📄 Acknowledgments

• Built by xgauravyaduvanshii @ flyingdarkdev.in

---

Licensed under the Functional Source License, Version 1.1 (FSL-1.1-MIT).
© 2026 Flying Dark Dev.